【笔记】React脚手架学习笔记

发表于 更新于 阅读次数：

前言

通过React脚手架开发React项目学习笔记

下载依赖

1
npm install -g create-react-app

创建React项目

1
npx create-react-app <project_name>

基本命令

运行项目

1
npm run start

构建项目

1
npm run build
  • 构建成功后，会生成build目录

暴露配置项

  • 暴露后是永久的，无法还原
1
npm run eject

项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
+ node_modules
+ public
  - favicon.ico
  - index.html
  - logo192.png
  - logo512.png
  - manifest.json
  - robots.txt
+ src 项目源码
  - App.css
  - App.js
  - App.test.js
  - index.css
  - index.js
  - logo.svg
  - reportWebVitals.js
  - setupTests.js
- .gitignore
- package.json
- package-lock.json
- README.md

Webpack全局常量

  • public目录：%PUBLIC_URL%

使用Sass作为CSS预编译语言

  • 无需安装任何依赖，在安装React依赖时默认安装了Sass依赖

使用Less作为CSS预编译语言

1
2
npm remove sass-loader
npm install less less-loader@8 --save

根节点

  • 在React中通过ReactDOM.createRoot()创建根节点时，不能把<body></body>作为根节点，而需要将一个新的盒子作为根节点，且只能将一个盒子作为根节点
1
2
3
4
5
const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <div id="root"></div>
);

空文档标记标签

  • 通过React.Fragment创建的任何含义的一对标签
  • 可以既保证只有一个根节点，又不会新增一个HTML层级
1
2
3
4
5
6
7
8
const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <>
    <div id="root"></div>
    <div></div>
  </>
);

未完待更

参考文献

哔哩哔哩——吴悠讲编程
哔哩哔哩——前端开发专业教程