React脚手架

认识脚手架

开发项目需要考虑的问题：

0. 目录结构如何划分
1. 如何管理文件之间的相互依赖
2. 如后台管理第三方模块的依赖
3. 如果压缩和打包项目
4. less、sass如何解析
5. 多个文件中的 JS 代码如何组织到一起
6. 。。。

为了解决上述问题，我们需要去学习很多的工具：

• babel
• webpack
• gulp

如果我们每次都从零开发，成本太高，因此脚手架出现了。

• 脚手架帮助我们搭建基本的工程化结构
• 脚手架简化了项目从开发到部署的步骤

常见脚手架：

• Vue - @vue/cli | vite
• Angular - @angular/cli
• React = create-react-app (CRA)

脚手架条件：

• 目前脚手架都是使用 node 编写的，并且都是基于 webpack的

创建React项目

创建流程

0. 全局安装脚手架 npm i create-react-app -g
1. 创建项目 create-react-app 项目名 注意：react 项目名不允许大写。
2. 进入项目 cd 项目名
3. 运行项目 npm start
4. 在 VSCODE 中打开 code .

目录结构分析

pwa技术和爬虫我们暂时不需要，可以删除一些文件

从零编写代码

src/index.js

import ReactDOM from 'react-dom/client'
import App from './App'
// webpack内置babel
​
​
const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(
    <App />
)

App.jsx

import React from 'react'
​
class App extends React.Component {
    constructor() {
        super()
        this.state = {
            mesg: "Hello React"
        }
    }
    render() {
        const { mesg } = this.state
        return (
            <div>
                {mesg}
            </div>
        )
​
    }
}
​
export default App

\