1. 使用create-react-app创建react应用
1.1 react脚手架
- xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
- 包含了所有需要的配置（语法检查、jsx编译、devServer…）
- 下载好了所有相关的依赖
- 可以直接运行一个简单效果
- react提供了一个用于创建react项目的脚手架库: create-react-app
- 项目的整体技术架构为: react + webpack + es6 + eslint
- 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化
1.2 创建项目并启动
第一步，全局安装 create-react-app 命令：npm i -g create-react-app
yshuqdeMacBook-Pro:etc yshuq$ npm i -g create-react-app
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/create-react-app
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/create-react-app'
npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/create-react-app'] {
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'mkdir',
npm ERR! path: '/usr/local/lib/node_modules/create-react-app'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/yshuq/.npm/_logs/2023-10-10T07_28_58_168Z-debug-0.log
yshuqdeMacBook-Pro:etc yshuq$上面是在mac系统上安装报错提示没有权限。所以在命令前面添加sudo
sudo npm i -g create-react-app
Password:
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
changed 67 packages in 2s这不是一个错误。你的tar已经过时了。
要解决此问题，请运行以下命令： npm i tar并输入 ok。现在您的问题npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates.将得到解决。 请参考：https://stackoverflow.com/questions/68857411/npm-warn-deprecated-tar2-2-2-this-version-of-tar-is-no-longer-supported-and-w
在这里我将不解决这个问题。
第二步，切换到想创项目的目录，使用命令：create-react-app hello-react
yshuqdeMacBook-Pro:~ yshuq$ create-react-app hello-react
Creating a new React app in /Users/yshuq/hello-react.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
(######⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠦ idealTree:webpack-dev-server: sill placeDep ROOT schema-utils@3.3.0 OK for: @pmmmwh/react-refresh-webpack-plugin@0.5.11 want: ^3.0.0
(######⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠦ idealTree:webpack-dev-server: sill placeDep ROOT schema-utils@3.3.0 OK for: @pmmmwh/react-refresh-webpack-plugin@0.5.11 want: ^3.0.0
(######⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠦ idealTree:webpack-dev-server: sill placeDep ROOT schema-utils@3.3.0 OK for: @pmmmwh/react-refresh-webpack-plugin@0.5.11 want: ^3.0.0
added 1460 packages in 9m
241 packages are looking for funding
run `npm fund` for details
Initialized a git repository.
Installing template dependencies using npm...
added 69 packages, and changed 1 package in 29s
245 packages are looking for funding
run `npm fund` for details
Removing template package using npm...
removed 1 package, and audited 1529 packages in 6s
245 packages are looking for funding
run `npm fund` for details
8 vulnerabilities (2 moderate, 6 high)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Created git commit.
Success! Created hello-react at /Users/yshuq/hello-react
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd hello-react
npm start
Happy hacking!
You have new mail in /var/mail/yshuq第三步，进入项目文件夹：cd hello-react
yshuqdeMacBook-Pro:hello-react yshuq$ ls -al
total 1392
drwxr-xr-x 10 yshuq staff 320 Oct 10 19:17 .
drwxr-xr-x+ 82 yshuq staff 2624 Oct 10 19:08 ..
drwxr-xr-x 12 yshuq staff 384 Oct 10 19:18 .git
-rw-r--r-- 1 yshuq staff 310 Oct 10 19:17 .gitignore
-rw-r--r-- 1 yshuq staff 3359 Oct 10 19:17 README.md
drwxr-xr-x 853 yshuq staff 27296 Oct 10 19:18 node_modules
-rw-r--r-- 1 yshuq staff 699118 Oct 10 19:18 package-lock.json
-rw-r--r-- 1 yshuq staff 814 Oct 10 19:18 package.json
drwxr-xr-x 8 yshuq staff 256 Oct 10 19:17 public
drwxr-xr-x 10 yshuq staff 320 Oct 10 19:17 src
yshuqdeMacBook-Pro:hello-react yshuq$第四步，启动项目命令：npm start 将自动打开浏览器地址http://localhost:3000
npm start
.......
Compiled successfully!
You can now view hello-react in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.0.102:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfullynpm start 命令 将自动打开浏览器地址http://localhost:3000 显示
2. React脚手架项目结构
yshuqdeMacBook-Pro:hello-react yshuq$ ls -al
total 1392
drwxr-xr-x 10 yshuq staff 320 Oct 10 19:17 .
drwxr-xr-x+ 82 yshuq staff 2624 Oct 10 19:08 ..
drwxr-xr-x 12 yshuq staff 384 Oct 10 19:18 .git
-rw-r--r-- 1 yshuq staff 310 Oct 10 19:17 .gitignore
-rw-r--r-- 1 yshuq staff 3359 Oct 10 19:17 README.md
drwxr-xr-x 853 yshuq staff 27296 Oct 10 19:18 node_modules
-rw-r--r-- 1 yshuq staff 699118 Oct 10 19:18 package-lock.json
-rw-r--r-- 1 yshuq staff 814 Oct 10 19:18 package.json
drwxr-xr-x 8 yshuq staff 256 Oct 10 19:17 public
drwxr-xr-x 10 yshuq staff 320 Oct 10 19:17 src
public ---- 静态资源文件夹
favicon.icon ------ 网站页签图标
index.html -------- 主页面
logo192.png ------- logo图
logo512.png ------ logo图
manifest.json ----- 应用加壳的配置文件
robots.txt -------- 爬虫协议文件
src ---- 源码文件夹
App.css -------- App组件的样式
App.js --------- App组件
App.test.js ---- 用于给App做测试
index.css ------ 样式
index.js ------- 入口文件
logo.svg ------- logo图
reportWebVitals.js --- 页面性能分析文件(需要web-vitals库的支持)
setupTests.js ---- 组件单元测试的文件(需要jest-dom库的支持)