一、如何使用 git 在 GitHub 上创建一个项目

新建一个项目

首先，在github上注册自己的账号，然后登录后，可以看到如下界面，是你的主页。点击右边的➕号，选择第一个选项

填写项目信息

此时我们正在创建一个项目。转跳到如下页面：

红色标注说明：

项目名称

项目描述

公有还是私有。即是否给别人看

是否创建md文件说明

用户忽略一部分文件的文件

是否添加开源证书

github项目创建完成，界面如下：

点击如上的绿色按钮，有如下标红内容，点击右边的圆圈，复制链接。

备注：如果你不想用Clone with HTTPS出来的这个链接，可以选择切换Use SSH。个人感觉：使用上感觉没啥区别，只是走得协议不一样。

到了此步，线上就创建好了一个项目仓库。接下来将其和本地同步(即和我们自己的电脑)

二、本地电脑中，先创建一个React项目

//1. 创建后端，通过express $ mkdir be$ cd be($ npx express -e)无效的话，如下做：$ npm init$ npm install express --no-save//2. 创建前端react项目$ mkdir fe$ cd fe//react项目快速搭建($ npx create-react-app my-app同下效果)$ npx create-react-app .$ cd my-app$ npm start

小Tips：一开始表姐是自己安装官网搭建，一开始用的npm，但是太慢，切换了淘宝源。然后发现用npx可以将各种安装依赖只在项目中临时创建，于是就改用了这个。后面发现还是yarn最快。

三、将本地文件和远程仓库同步

//1.从工作区提交暂存区 $ git add . 提交所有改动的文件//备注： 第一次使用时会提示输入以下内容：$ git config --global user.email "you@example.com"$ git config --global user.name "Your Name"//2.暂存区到本地服务器$ git commit -m "提交的注释" 暂存区到本地服务器接着弹出填写：git账号和密码//3.提交远程服务(本地连接远程)$ git push origin master:提交远程服务(origin:远程服务器名称 master:主分支)如果是主分支，只要git push就可以了或者(//本地同步远程$ git remote add origin url$ git pull origin 分支名 --allow-unrelated-histories)//查看是否连接成功$ git remote -v//4.更新(拉取下来)$ git pull origin master : 更新//5.上传代码$ git push --set-upstream origin master之后再重复上面1.2.3步

另：附上git常用命令

Git 本地操作//1.如何将远程仓库和本地进行相关的联系Clone with https:每次提交远程服务器都需要用户名和密码--不常用Clone with ssh：配置私钥(本地)和公钥(配置给githup)//2.克隆代码到本地$ git clone 仓库的url---第一次//3.查看状态：$ git status 对比本地和本地服务器的区别//4.创建分支Git branch 分支名称 创建分支Git checkout 分支名称 切换分支Git branch 查看分支//5.Git commit -am “提交的注释” === git add . git commit -m ””//6.版本：$ git tag v1.0$ git push origin v1.0//7.协作：//8.提交日志 $ git log //9.$ git rm与$ git rm --cached//10.当我们需要删除暂存区或分支上的文件, 同时工作区也不需要这个文件了, 可以使用$ git rm file_path$ git commit -m 'delete somefile' $ git push//.gitignore:忽略提交文件，忽略环境配置。

四、我的整个项目结构

src下新建文件夹- pages- components- assets - actions,及下面还要新建一个api文件夹(因为表姐后面的数据请求写在的axtions里的)- router- utils- actions- reducers- store- hoc- context- server

五、配置组件库Ant Desigin

//安装$ yarn add antd

其他：参考官网中的按需配置，表姐认为很详细了。

六、配置路径别名

npm中找customize-cra第三方包，找到其中的别名Alias,按照说明修改config-overrides.js 文件。

const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');const path = require("path") //引入path模块module.exports = override( fixBabelImports('antd', { libraryDirectory: 'es', style: 'css', }), addWebpackAlias({ //别名：绝对路径(要写绝对路径，就要用到path模块，在上面引入) "@": path.join(__dirname, "src") }),);

配置好了之后，重新启动项目

$ yarn start

使用时，如下：

import LayOut from "@/layout"; //如此使用路径别名

七、配反向代理

src目录下新建setupProxy.js文件

安装方向代理插件

$ yarn add http-proxy-middleware -D

setupProxy.js内配置如下：

const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:3000', changeOrigin: true, })} //小tips：最后$ yarn add运行，启动没问题就OK。

这样，一个react项目就创建好了。接下来就是写我们自己的项目代码了哦。下一篇我会继续为大家分享我的登录注册拦截及项目效果。如果喜欢这篇文章，关注我的头条号@职场大表姐，我会继续为大家分享更多相关内容。如果你有什么想法，可以留言告诉我哦^_^

#职场众生相##职场达人说#

总结

以上是生活随笔为你收集整理的react项目_保证一看就会 | 手把手教你创建一个React项目的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。