从零开始搭建react项目_从零搭建react项目

一直与世隔绝埋头编码，第一次写这种文章，也算是复习总结一下目前为止掌握的知识点
以前还需要去改环境变量，还不一定改对了，有时还会漏了，就导致报错查不出来。现在一般的前端项目像自己写写开源啊demo这种，直接安装官网下载安装包，无需额外配置就可以一步到位

一、环境搭建

• 开发工具 vscode
• 包管理工具 node
• 版本管理工具 Git (可选)

单纯本地开发可以不用git，但是偶尔改错了代码之后不容易回退，前面写好了的功能也可能会一不小心被清掉，所以建议自己开发也要发布到github/gitlab这种网站上，写完一部分功能就可以提交，也便于自己以后查看

这三个是开发前端必备的，官网下载就可以了。前两个装完就可以直接开始敲代码了，其他小工具可以后面再用命令安装， node安装完才可以使用npm命令

正式开始之前，先本地创建一个文件夹，专门放自己的代码便于查找管理，例如我的文件夹myProject，里面也会放一些网上下载的开源项目。

二、创建项目

• 不使用 GIt 的情况

1. 先安装 create-react-app 脚手架，脚手架包含了一些基本的配置，创建完可以直接启动，很适合对 webpack配置还不熟悉的新手

//全局安装
npm install -g create-react-app  
1
2

2. 然后直接用脚手架创建项目，执行命令前，先把操作目录切到上面创建的myProject文件夹下，否则项目将会默认创建到c盘目录下

npx create-react-app <项目名称>// 注意：名字不能包含大写字母。我的是 my-app。
//切到刚刚创建的项目
cd my-app
//直接启动项目
npm start
1
2
3
4
5

• 使用Git的情况

这里主要使用ssh方式下载到本地，所以，还需要提前处理好 git 和 ssh keys

（1）设置git账号和邮箱，用于提交代码

git config --global user.name "username"
git config --global user.email  useremail@qq.com
1
2

（2）设置ssh keys
（有空再单独整理）参考 https://cloud.tencent.com/developer/article/2102765

（3）github 会有打不开的情况，需修改hosts文件添加相关配置

//这两个是必备的，其他的根据需要添加
140.82.112.4 github.com
199.232.69.194 http://github.global.ssl.fastly.net
1
2
3

（4）然后就可以开始创建项目了

1. 注册一个github账号，创建一个 Repositories，记得默认勾选需要.md文件会使得后续操作更容易
2. 复制项目的ssh地址（如果直接使用https地址，则以后每次操作都需要登陆）
3. 在myProject文件夹，右键选择git bash here(安装了Git才有这个选项)
4. 命令行直接 git clone xxx（项目地址 ）
5. 右键vs code打开项目，
6. 根目录创建一个webpack.config.js文件，添加相关webpack 配置
7. 创建src文件夹，文件夹下创建入口文件 index.js
8. 创建public文件夹，文件夹下创建页面 index.html
9. index.html 中指定根模块< div id=root />，index.js 在root上渲染react模块
10. npm start 启动

//webpack.config.js文件配置
var path =require('path');
module.exports = {
    //入口文件
    entry:'./src/index.js',
    //出口文件
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    }
}
1
2
3
4
5
6
7
8
9
10
11

三、webpack配置

不管使用默认配置，还是自定义，正式开发都还会需要修改webpack的。

脚手架创建的话，已经引入了react依赖包，如下：

 "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
1
2
3
4
5
6
7
8
9

自定义则需要自己使用npm安装，默认都是最新版本

1. 这里首先安装 react，vue项目则安装vue2.0/vue3.0
2. 后续必然用到路由，所以 react-dom (或react-router-dom）也是必须的
3. 如果项目中用到了TS文件，必须安装 @testing-library 这几个包

npm i --save-dev typescript @typescript-eslint/parser
1

cnpm 和 yarn

另外，为了操作方便，也可以安装cnpm和yarn

npm install -g cnpm -registry=https://registry.npm.taobao.org
1

npm install -g yarn 
1

例如，为了使用sass，在react中直接安装node-sass即可，无需其他配置。这里用npm或yarn都安装不成功，可能是网络问题，用cnpm直接一步到位。

cnpm install node-sass sass-loader --save-dev
1