从零开始搭建react项目

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

一、环境搭建

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

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

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

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

二、创建项目

  • 不使用 GIt 的情况
  1. 先安装 create-react-app 脚手架,脚手架包含了一些基本的配置,创建完可以直接启动,很适合对 webpack配置还不熟悉的新手
//全局安装
npm install -g create-react-app  
  1. 然后直接用脚手架创建项目,执行命令前,先把操作目录切到上面创建的myProject文件夹下,否则项目将会默认创建到c盘目录下
npx create-react-app <项目名称>// 注意:名字不能包含大写字母。我的是 my-app。
//切到刚刚创建的项目
cd my-app
//直接启动项目
npm start
  • 使用Git的情况

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

(1)设置git账号和邮箱,用于提交代码

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

(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

(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'
    }
}

三、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"
  },

自定义则需要自己使用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
cnpm 和 yarn

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

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

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

cnpm install node-sass sass-loader --save-dev
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值