一、如何使用 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项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。