概述
之前已经说了搭建一个 React 项目的基本知识，现在就来正式搭建一个 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 上创建一个空仓库，创建之后便可以将代码 push 到这个新仓库中，运行这两句话即可。我的项目地址
push 到新仓库
git 相关操作
- 创建开发分支并切换到开发分支
git checkout -b dev
- 将开发分支提交到 github 上
git push --set-upstream origin dev
目前为止我们便有了两个分支
-
master-> 用于发布正式版本 -
dev-> 用于开发
之后我们便使用 dev 分支进行开发
安装依赖
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",
}
- 在根目录下创建
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
官网中已经说明如何配置 scss，只需要安装 node-sass npm 包即可，之前我们安装依赖的时候已经安装过了，所以可以直接使用 scss
- 将
App.css改为App.scss - 在
App.js中将import './App.css';改为import './App.scss';即可 - 更改
App.scss内容，UI 将自动进行更新
之后我们将使用 scss 编写 css
发布
这里主要说两点有关发布的问题：
- github 发布
- 上传到测试或者线上
github 发布
github 发布主要是让他人可以通过 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即可
上传到测试或线上
上传到测试或线上将打包的代码上传到服务器上，我主要使用脚本进行上传。
- 创建
update.sh脚本 - 内容为
# 说明： # 将此文件放置于默认bash目录，直接运行 # 发测试环境 source update.sh dev # 发正式环境 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 - 上传到服务器
- 发测试环境
source update.sh dev - 发线上环境
source update.sh pro
- 发测试环境
