React学习笔记03-编写第一个react应用程序

合集 - React学习记录(23)

1.React学习笔记01-React的基本认识2023-10-162.React学习笔记02-创建React项目2023-10-16

3.React学习笔记03-编写第一个react应用程序2023-10-16

4.React学习笔记04-JSX语法2023-10-175.React学习笔记05-类组件2023-10-196.React学习笔记06-函数式组件2023-10-197.React学习笔记07-组件嵌套2023-10-198.React学习笔记08- 组件的样式2023-10-199.React学习笔记09- 事件处理2023-10-2010.React学习笔记10- Ref的应用2023-10-2011.React学习笔记11-状态(state)2023-10-2012.React学习笔记12-循环渲染2023-10-2013.React学习笔记13-小案例toList(状态,状态维护,条件渲染渲染)2023-10-2114.React学习笔记14-dangerousSetinnerHtml指令2023-10-2115.React学习笔记15-setState同步异步问题2023-10-3116.React学习笔记16-属性props2023-11-0317.React学习笔记17-属性VS状态2023-11-0318.React学习笔记18-非受控组件2023-11-0419.React学习笔记19-受控组件2023-11-0420.React学习笔记20-父子通信(子传父)2023-11-0821.React学习笔记21-非父子通信(状态提升)2023-11-0822.React学习笔记22-订阅发布模式2023-11-0823.React学习笔记23-非父子通信(订阅发布模式)2023-11-08

收起

react开发需要引入多个依赖文件:react.js,react-dom.js,分别又有开发版本和生成版本，creat-react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的

工程目录下的src目录情况，然后在里面重新创建一个index.js写入以下代码。

//从react的包当中引入了React。只要你要写React.js组件就必须引入React,因为react里有一种语法叫JSX,要写JSX，就必须引入React
import react from 'react'
//ReactDOM可以帮助我们把React组件渲染到页面上去，没有其它的作用了。它是从react-dom中引入的，而不是从react引入。
import ReactDOM from 'react-dom'
import App from './01-base/App'

//ReactDOM里有一个render方法，功能就是把组件渲染并且构造DOM树，然后插入到页面上某个特定的元素上
ReactDOM.render(
    /* 
    这里就比较奇怪了，它并不是一个字符串，看起来像是纯HTML代码写在JavaScript代码里面。语法错误吗？这并不是合法的JavaScript代码,“在JavaScript写的标签的”语法叫JSX-
    JavaScriptXML。
    */
    <App></App>,document.getElementById('root')
)

/* 
注意：
<React.StrictMode> 目前有助于：识别不安全的生命周期
关于使用过时字符串 ref API 的警告检测意外的副作用
检测过时的 context API
*/

然后在src目录下新建一个01base文件夹，在01base下新建一个App.js写入以下代码

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div>App</div>
    )
  }
}

 App.js是一个类组件。

 保存后可以看到App.js已经挂载好了。