当前位置:   article > 正文

从零开始搭建react项目_从零搭建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
  1. 然后直接用脚手架创建项目,执行命令前,先把操作目录切到上面创建的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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/671241
推荐阅读
相关标签
  

闽ICP备14008679号