构建一个react项目 - 超详细 - 脚手架的运用（一）

1 - 全局安装脚手架: react官方推荐的脚手架

npm install -g create-react-app

2 - 使用脚手架创建项目

create-react-app my-react

出现下面图片的内容，说明项目创建成功

初始的项目目录结构如下

3 - 项目运行

npm run start

项目结构解析

- package.json
  管理项目的以依赖
  
- public文件夹
  favicon.ico - 浏览器tab上的图标
  index.html - 项目的入口文件，一从这里开始，项目的源头。
             - <div id="root"></div>是项目的总容器，一个项目只能存在一个总容器
             - 在此容器下的所有内容都由 React DOM 来管理
             
- src文件夹
  存放项目的核心内容，主要的工作区域。其中index.js是和index.html文件关联的唯一接口

或者
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM.render()方法作用 - 将<App/>的内容渲染到根DOM节点中
document.getElementById('root') -- 根节点
<App /> -- 集成的页面内容

可能会遇见的报错信息

1. 如果创建的项目初始目录不完整，大概率是create-react-app版本问题，卸载重新安装

2. npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
- tar版本过低，需升级tar版本：npm i -g tar