第十七章 使用脚手架写一个HelloWorld项目
由于使用react脚手架创建的默认文件很多我们都用不到，我们可以将不需要的默认的文件删除掉，自己重新写一遍提高熟悉度。
移除默认文件并改造
步骤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，因为比较简洁，但是实际开发以公司的规范为主。