开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 8 天，点击查看活动详情

React(3)

常规的react项目需要使用npm或yarn做为包管理工具进行项目管理，webpack进行打包管理。

react官方为了方便开发，为我们提供了react-scripts包。

项目结构

根目录
    - public //静态目录
        - index.html  //首页
    - src
        - App.js
        - index.js  //js的入口文件

项目初始化

使用包管理工具，npm或者yarn，这里我用的是npm

npm init -y    //初始化项目，创建package.json文件

使用npm安装项目所需要的依赖

npm install react react-dom react-scripts -S  // -S 表示保存到项目中

运行React项目

0. 引入react-dom

   import ReactDom from 'react-dom/client';
   

1. 使用react-scripts进行打包

   npx react-scripts build
   

2. 运行react项目

   npx react-scripts start
   

3. 可以在package.json中设置，scripts

   "scripts":{
       "start": "react-scripts start",
       "build": "react-scripts build"
     }，
   

   用npm start启动，npm run build进行打包

4. 配置eslint，进行代码检查，对错误进行提示

   "eslintConfig": {
       "extends":[
         "react-app"
       ]
     }
   

5. 在index.js中引入ReactDOM

   import ReactDOM from 'react-dom/client';