> For the complete documentation index, see [llms.txt](https://information9527.gitbook.io/html/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://information9527.gitbook.io/html/qi-ta-js-gong-ju/react.md).

# React

## GITHUB 與 React

### **使用步驟**

1.確認Node.js、npm、create-react-app為最新版本，並擁有GitHub帳號。

若沒有任何安裝下方提供下載點。

{% content-ref url="/pages/-MKVJsmavyixP8AbvfH3" %}
[NODE.JS](/html/qi-ta-js-gong-ju/node.js.md)
{% endcontent-ref %}

{% embed url="<https://nodejs.org/zh-tw/download/>" %}

2.在GitHub建立倉庫，命名為react-gh-pages（自行命名），忽略README.md、gitignore、LICENSE等檔案。

![](https://3336654295-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDPdvZ3NzJOlXMhEq_2%2F-MTsuiFAg6LyNc5-liB5%2F-MTsyH_XsOWvR0jde2hH%2Fimage.png?alt=media\&token=e60d6d1d-8bda-42a7-8275-e5e6e15ae622)

### 建立React

1. 建立新的react-app。\
   打開終端，全局安裝：`npx -i -g create-react-app react-gh-pages`
2. 接著切換目錄：`cd react-gh-pages`\
   並安裝gh-pages：`npm install gh-pages — save-dev`

   （ — save-dev會將訊息添加到package.json文件的devDependencies）
3. 打開目錄中的package.json，新增一條：\
   “homepage”: [http://使用者名稱.github.io/倉庫名](http://xn--2rqw4io09amhedni.github.io/%E5%80%89%E5%BA%AB%E5%90%8D)\
   其中的使用者名稱以及倉庫名請自行輸入。接著在scrpits中新增兩條：\
   “predeploy”: “npm run build”,\
   “deploy”: “gh-pages -d build”

![Image for post](https://miro.medium.com/max/655/1*cJFygTf8whTviO8-5l6ZgQ.png)

### &#x20;Npm build / Git Push

1. 在終端中起始倉庫：git init\
   ：git remote add origin <https://github.com/gitname/react-gh-pages.git>
2. 在gh-pages branch新增build並佈署：\`\`\`npm run deploy
3. 最後就可以把自己的檔案push上master branch囉：\
   `git add` \
   \
   `>git commit -m “Create a React app and publish it to GitHub Pages”`\
   \
   `>git push origin master`\
   \
   接著在每次提交後，都要記得npm run deploy佈署一次。