由于使用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,因为比较简洁,但是实际开发以公司的规范为主。