（一）react脚手架

react脚手架

react提供了一个用于创建react项目的脚手架库：create-react-app

项目的整体技术架构为：react + webpack + es6 + eslint

使用脚手架开发的项目的特点：模块化、组件化、工程化

使用create-react-app快速搭建开发环境

create-react-app是一个快速创建React开发环境的命令，底层由Webpack构建，封装了配置细节，开箱即用。

执行命令：

npx create-react-app react-basic

1. npx Node.js工具命令，查找并执行后续的包命令
2. create-react-app 核心包(固定写法)，用于创建React项目
3. react-basic React项目的名称(可以自定义)

cd react-basic/
npm start

项目结构

├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html     #渲染的html root节点
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.js
    └── index.js

• index.js

//项目的入口 从这里开始运行

//React两个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';

//导入项目的根组件
import App from './App';

//把App根组件渲染到id为root的dom节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);

• App.js

//项目根组件
//App -> index.js -> public/index.html(root)
function App() {
  return (
    <div className="App">
      this is App
    </div>
  );
}

export default App;