概述
之前已經(jīng)說了搭建一個 React 項目的基本知識阱州，現(xiàn)在就來正式搭建一個 React 項目。首先說一下這個 React 項目的頁面和功能
項目介紹
這個 React 項目主要用于移動端卸伞，共有四個頁面
- Login -> 用于登錄
- Home -> 展示主頁
- Detail -> 展示詳情頁面
- 404 -> 404 頁面
- Account -> 個人中心頁面
使用的庫包括
- react
- react-redux
- react-router-dom
- redux
- react-sticky
- rc-form
- node-sass
- antd-mobile
使用 fetch 進行 AJAX 請求
使用 scss 進行 css 的編寫
快速搭建項目
通過 create-react-app 腳手架快速搭建一個 React 項目
create-react-app react-project
cd react-project
在 github 上創(chuàng)建一個空倉庫桑阶，創(chuàng)建之后便可以將代碼 push 到這個新倉庫中悟泵，運行這兩句話即可。我的項目地址
push 到新倉庫
git 相關操作
- 創(chuàng)建開發(fā)分支并切換到開發(fā)分支
git checkout -b dev
- 將開發(fā)分支提交到 github 上
git push --set-upstream origin dev
目前為止我們便有了兩個分支
-
master-> 用于發(fā)布正式版本 -
dev-> 用于開發(fā)
之后我們便使用 dev 分支進行開發(fā)
安裝依賴
yarn add -D react-redux
yarn add -D react-router-dom
yarn add -D redux
yarn add -D react-sticky
yarn add -D rc-form
yarn add -D node-sass
yarn add -D antd-mobile
yarn add -D react-app-rewired
yarn add -D babel-plugin-import
或者
yarn add -D react-redux react-router-dom redux react-sticky rc-form node-sass antd-mobile react-app-rewired babel-plugin-import
引入 ant-design-mobile UI 框架
- 更改入口文件
index.html鱼冀。在public目錄下index.html文件的<head>標簽中加入
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
if(!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>
- 更改
package.json文件里的啟動配置。
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
}
- 在根目錄下創(chuàng)建
config-overrides.js文件悠就，用于修改默認配置
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
config = injectBabelPlugin(['import', {
libraryName: 'antd-mobile',
style: 'css'
}], config);
return config;
};
- 按需引用并使用千绪。將
src目錄下的App.js文件更改為：
import React, { Component } from 'react';
import { Button } from 'antd-mobile'; // 引入 Button
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
{/* 使用 Button */}
<Button>default</Button>
<Button type="primary">primary</Button>
</div>
);
}
}
export default App;
- 運行項目
yarn start
-
第一個報錯
error
解決方案：
yarn add -D react-app-rewired@1.6.2
-
第二個報錯
error
解決方案：
yarn remove react-scripts
yarn add -D react-scripts@2.1.1
之后便可以運行成功。將瀏覽器改為手機模式梗脾，即可看到兩個 button
引入 ant-design-mobile 效果圖
配置 SCSS
官網(wǎng)中已經(jīng)說明如何配置 scss荸型，只需要安裝 node-sass npm 包即可，之前我們安裝依賴的時候已經(jīng)安裝過了炸茧，所以可以直接使用 scss
- 將
App.css改為App.scss - 在
App.js中將import './App.css';改為import './App.scss';即可 - 更改
App.scss內(nèi)容瑞妇，UI 將自動進行更新
之后我們將使用 scss 編寫 css
發(fā)布
這里主要說兩點有關發(fā)布的問題：
- github 發(fā)布
- 上傳到測試或者線上
github 發(fā)布
github 發(fā)布主要是讓他人可以通過 github 直接看到我們的項目
修改
.gitignore文件，將其中的/build刪除-
運行：
yarn buildbuild之后仔細看一下log梭冠，我們可以看到
yarn build log
我們重點關注一下homepage踪宠。我們需要在package.json中添加homepage字段，即："homepage" : "http://myname.github.io/myapp/build"-
myname-> github 的 這部分
myname -
myapp-> 倉庫名
-
再次打包并提交到 github 上
-
合并到
master分支git checkout master git merge dev -
master分支打包yarn build 提交到 github 上
-
在 github 項目的 settings 中的
GitHub Pages
GitHub Pages
之后點擊保存妈嘹，頁面刷新后將GitHub Pages的Urlcopy 下來
GitHub Pages Url 在項目中的描述中添加預覽鏈接柳琢，在剛剛 copy 的 Url 后面添加
build/index.html即可
上傳到測試或線上
上傳到測試或線上將打包的代碼上傳到服務器上，我主要使用腳本進行上傳润脸。
- 創(chuàng)建
update.sh腳本 - 內(nèi)容為
# 說明： # 將此文件放置于默認bash目錄柬脸，直接運行 # 發(fā)測試環(huán)境 source update.sh dev # 發(fā)正式環(huán)境 source update.sh pro if [ $1x = "pro"x ]; then rsync -avz ./build/* MyName@Ip:Path echo "production code publish success" elif [ $1x = "dev"x ]; then rsync -avz ./build/* MyName@Ip:Path echo "develop code publish success" else echo "hello world" fi - 上傳到服務器
- 發(fā)測試環(huán)境
source update.sh dev - 發(fā)線上環(huán)境
source update.sh pro
- 發(fā)測試環(huán)境
