react学习-创建项目

什么是脚手架

xx脚手架：用来帮助程序员快速创建一个基于xxx库的模版项目

• 包含所有需要的配置（语法检查，jsx编译，devServer）
• 下载好了所有相关的以来
• 可以直接运行一个简单的效果

react提供了一个创建react项目的脚手架库：create-react-app
项目的整体技术架构为：react + wepack + es6 + eslint
使用脚手架开的项目的特点：模块化、组件化、工程化

创建项目并启动

1. 全局安装：npm install -g create-react-app
2. 切换到想创建项目的目录，使用命令create-react-app react-hello
3. 进入项目目录，cd react-hello
4. 启动项目：npm start

react脚手架项目结构

react-app
├── README.md
├── package-lock.json
├── package.json
├── public            静态资源文件
│   ├── favicon.ico
│   ├── index.html    用于展现组件的页面
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json 应用加壳的规则
│   └── robots.txt    爬虫规则
└── src
    ├── App.css      app组件的样式
    ├── App.js
    ├── App.test.js  测试文件
    ├── index.css    通用样式组件
    ├── index.js     项目入口文件（打包）
    ├── logo.svg
    ├── reportWebVita.js 性能测试文件
    └── setupTests.js  测试文件

入口文件

/src/index.js

imprt React from react;
import ReactDom from 'react-dom';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);