创建一个简单的React demo

React中文文档

1.创建项目

npm init react-app my-app
cd my-app
npm start

npm init react-app my-app
运行这个命令会在当前目录中创建一个名为 my-app 的目录。
注意：项目路径不能有中文，不能有特殊符号！
cd my-app
表示进入项目
npm start
表示运行项目，完成后会自动打开浏览器看见项目页面

2. 新建Hello World 组件

将src下的所有文件删除，新建index.js

React团队目前推出最新的版本为18.0，在18.0版本中，React不再支持 ReactDOM.render，如果使用ReactDOM.render，控制台就会报错，但并不影响程序的正常运行。

// // 旧版本
// // 1.引入模块
// import React from 'react'
// import ReactDOM from 'react-dom'
// // 2.将组件挂载到指定元素上
// ReactDOM.render(
//    <h1> hello world！</h1>
//     , document.getElementById('root')
// )

// 新版本
import React from 'react'
import {createRoot} from 'react-dom/client'

const root = createRoot(document.getElementById('root'));
root.render(  <h1> hello world！</h1>);

打开刚刚浏览器页面，刷新发现刚刚的React图标页改成了hello world！页面

3. 组件化开发

src目录下新建App.js

//1、导入React核心模块
import React from 'react'

//2、定义组件类
class Hello extends React.Component{   //类
    render(){     //函数
        return (   //返回值 ,只能有一个根元素,但根元素内部可以有多个元素,类似于template
            <h1>
                Hello XiaoCheng !
            </h1>
        )
    }
}
// 导出组件
export  default Hello

注意 return 里面只能有一个根元素,但根元素内部可以有多个元素,类似于template。

在需要引入该组件的index.js中，导入，就可以直接使用这个组件了：

// 1.引入模块
import React from 'react'
import {createRoot} from 'react-dom/client'
import Hello from './App'//从具体文件引入组件
// 2.将组件挂载到指定元素上
const root = createRoot(document.getElementById('root'));
root.render(<Hello/>);

注意组件首字母必须大写！Hello 而不能写成hello。