React - 使用create-react-app快速创建和部署

更多信息请查阅create-react-app生成的模板项目中的README.md

创建React项目

Step 1:

npm install -g create-react-app全局安装create-react-app

Step 2:

create-react-app my-app快速生成React模板项目

Step 3:

进入目录并预览项目

1 2	cd my-app npm start

Step 4:

此时访问http://localhost:300即可预览项目

React部署 - Gtithub Pages

Step 1:

在package.json中添加homepage配置

1
2
3

"homepage":"https://myusername.github.io/my-app"
//如果为Github Pages添加自定义域名则为
"homepage":"http(s)://mydomian/"

Step 2:

安装gh-pages:

1 2	npm install --save gh-pages yarn add gh-pages

Step 3:

在package.json的scripts中添加deploy,即下面两行

  "scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",

Step 4:

使用 npm run deploy部署至github

1	npm run deploy

Step 5:

确保项目的 gh-pages分支中Github Pages设置无误

Step 6:

自定义域名的CNAME文件
在public/目录下添加CNAME文件，部署时自动上传至gh-pages分支