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。