由于使用react脚手架创建的默认文件很多我们都用不到，我们可以将不需要的默认的文件删除掉，自己重新写一遍提高熟悉度。
移除默认文件并改造
步骤1：删除掉默认文件夹public 和 src
步骤2：新建新的文件夹目录public和src
public |-----index.html // 模板文件 src |-----components // 存放组件的文件夹 |-----App.jsx // App应用容器 |-----index.js // 入口文件
步骤3：编写public/index.html模板文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React 脚手架</title> </head> <body> <div id="root"></div> </body> </html>
步骤4：编写App.jsx组件
import { Component} from "react" import Hello from "./components/Hello" export default class App extends Component { render() { return (<div>App</div>) } }
步骤5：编写index.js文件
// 引入react核心库 import React from 'react' // 引入reacDOM import ReactDOM from 'react-dom' // 引入App组件 import App from './App' ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') )
注意：这里的react版本是17.0.2, 如果是18.x需要使用createRoot来写：
// 引入react核心库 import React from 'react' // 引入reacDOM import ReactDOM from 'react-dom' // 引入App组件 import App from './App' const root = ReactDOM.createRoot(document.getElementById('root')) root.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') )
步骤6：npm start 运行项目是否成功。
开始编写HelloWorld组件
步骤1：在src/components目录下新建Hello文件夹
步骤2：在Hello文件夹下创建Hello.jsx文件
import {Component} from "react" export default class Hello extends Component { render(){ return <h1>Hello World</h1> } }
步骤3：在App容器中引入Hello组件
import { Component} from "react" import Hello from "./components/Hello/Hello" export default class App extends Component { render() { return (<div>App <Hello/> </div>) } }
步骤4：npm start再次运行项目，查看渲染是否成功。
关于组件的编写方式
- 方式1
1、通常其组件对应的文件夹和文件名称，首字母都是大写
2、文件夹和文件名称使用语义化的英文作为名称
3、这样的组件引入方式是：./components/文件夹名称(首字母大写)/文件名(首字母大写)
- 方式2
1、组件的文件夹名称，首字母大写
2、文件夹里面的组件名称使用：index.jsx或者index.js作为组件名称
3、这种组件的引入方式是：./components/文件夹名称(首字母大写)
相比较而言，我比较喜欢方式2，因为比较简洁，但是实际开发以公司的规范为主。
