2018.09.26終---2019.11.10更---
注意：在現(xiàn)今前端的日常開發(fā)中需要nodejs+npm環(huán)境和基本的計(jì)算機(jī)知識（如命令行）糠雨。詳情參考：nodejs 和 Linux命令大全钩述。不知道的請先去學(xué)會署惯，不然下面的內(nèi)容有可能不適合你篇裁。會使用shell的高手，請直接去博文最低下的附件3勇凭。
一煌茴、創(chuàng)建項(xiàng)目、安裝基本第三方庫以及配置所需目錄
1.1 創(chuàng)建項(xiàng)目
sudo npm i -g create-react-app # npm下安裝react環(huán)境
create-react-app react-demo # 創(chuàng)建一個(gè)項(xiàng)目名為react-demo的react項(xiàng)目
cd react-demo # 進(jìn)入此項(xiàng)目
npm start # 運(yùn)行項(xiàng)目（項(xiàng)目運(yùn)行后双妨，查看項(xiàng)目文件和運(yùn)行結(jié)果淮阐，查看完畢后，再進(jìn)行下面操作）
1.2 自定義配置模式
npm run eject # 此時(shí)默認(rèn)的項(xiàng)目結(jié)構(gòu)會發(fā)生較大變化刁品，注意觀察前后變化
1.3 安裝一些基本的第三方庫
npm i react-router-dom # react 路由器的DOM綁定（必安裝）
npm i node-sass sass-loader axios es6-promise # 使用sass和axios請求方式（根據(jù)個(gè)人情況決定是否安裝泣特，本人使用sass和axios）
1.4 配置所需目錄
不會shell的，可以手動配置目錄為以下結(jié)構(gòu):（主要配置public和src其他默認(rèn)就好）
├── config # 配置文件夾
├── node_modules # node 依賴文件夾
├── ... # 各種npm的js庫
├── public # 靜態(tài)資源目錄挑随、入口文件目錄
├── image # 靜態(tài)圖片存放
├── js # 本地js第三方庫
├── favicon.ico # 瀏覽器標(biāo)簽欄圖標(biāo)
├── index.html # 入口 index.html 文件
├── manifest.json # 配置參數(shù)
├── scripts # npm 腳本文件夾
├── ... # 默認(rèn)
├── src # 開發(fā)目錄
├── api # 請求
├── index.js # 請求的js
├── components # 組件
├── config # 配置
├── index.js # 配置的js
├── router # 路由
├── index.js # 路由配置入口js
├── style # 樣式
├── index.scss # css樣式主文件
├── tools # 自定義js工具包
├── index.js # 自定義的js方法
├── views # 單頁面應(yīng)用
├── home.jsx # 首頁jsx組件
├── App.js # dom 掛載文件
├── index.js # 入口文件
├── App.test.js # 測試文件
├── serviceWorker.js # 注冊服務(wù)文件状您，舊版本是registerServiceWorker.js
├── setupProxy.js # 配置代理
├── package-lock.json # 包鎖定文件，不用管兜挨。
├── package.json # 配置文件膏孟，有些內(nèi)容在此配置
└──README.md # 說明文檔，該文檔非常豐富拌汇，建議由時(shí)間閱讀
會shell的可以執(zhí)行我的快捷命令柒桑，不會的請按照上面的自行手動構(gòu)建:
# react-src-catalog-building.sh
# 新建文件 react-src-catalog-building.sh，內(nèi)容如下：（以下內(nèi)容可以通過命令行執(zhí)行）
cd src && mkdir api components config views router style tools # 在src下噪舀，創(chuàng)建我們需要的文件夾
rm -r App.css index.css logo.svg # 刪除App.css App.test.js index.css logo.svg等無用文件
cd api && touch index.js && cd ../ # api => index.js
cd config && touch index.js && cd ../ # config => index.js
cd router && touch index.js && cd ../ # router => index.js
cd style && touch index.scss && cd ../ # style => index.scss
cd tools && touch index.js && cd ../ # tools => indext.js
cd views && touch home.jsx && cd ../ # views => home.jsx
touch setupProxy.js
cd ../
# 運(yùn)行shell文件 react-src-catalog-building
sh react-src-catalog-building.sh # 如果是通過命令行執(zhí)行上面內(nèi)容魁淳，則不需要執(zhí)行該命令
二飘诗、配置config相關(guān)
2.1 配置支持 @ 文件映射 src 目錄
在根目錄下的/config/webpack.config.js 文件中，找到 alias 的配置:
注意：舊版是
/config/webpack.config.dev.js文件和/config/webpack.config.prod.js文件中界逛，找到alias的配置
alias: {
...
'@': path.join(__dirname, '..', 'src'), // 添加這段內(nèi)容
}
2.2 配置項(xiàng)目支持 scss 文件
新版你可以跳過這一步昆稿，因?yàn)樗约阂呀?jīng)做了scss的支持
在根目錄下的 /config/webpack.config.dev.js 文件和 /config/webpack.config.prod.js 文件中，找到 module 的配置
module: {
strictExportPresence: true,
rules: [
{ test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'],}, // 再rules這個(gè)數(shù)組中第一個(gè)位置,添加這段內(nèi)容
...
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
...
{
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/], # 改為 exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /.scss$/], // 增加 /.scss$/ 來使其支持sass
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
]
}
],
...
}
三息拜、配置src下各個(gè)文件
3.1 配置 src/index.js 文件
import React from 'react'
import ReactDOM from 'react-dom'
import './style/index.scss'
import App from './App.js'
import * as serviceWorker from './serviceWorker' // 注意：新版本此處與舊版不一致溉潭，以新版為主；舊版import registerServiceWorker from './registerServiceWorker'
ReactDOM.render(<App />, document.getElementById('root'))
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister() // 注意：新版本此處與舊版不一致少欺，以新版為主岛抄；舊版registerServiceWorker()
3.2 配置 src/App.js 文件
import React, { Component } from 'react'
import RouterView from './router/index.js'
class App extends Component {
render() {
return (
<RouterView></RouterView>
)
}
}
export default App
3.3配置 src/views/home.jsx 文件
import React, { Component } from 'react'
export default class Home extends Component {
constructor (props) {
super(props)
this.state = {}
}
componentDidMount () {
}
render () {
return (
<div className="home">
Home-首頁
</div>
)
}
}
3.4 配置 src/router/index.js 文件
import React, { Component } from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Home from '@/views/home.jsx'
export default class App extends Component {
render () {
return (
<Router basename="/">
<Switch>
<Route exact path='/' component={Home} />
</Switch>
</Router>
)
}
}
3.5 配置 src/style/index.scss 文件
// $static: "/erjimulu/image/"; // 打包時(shí)用此路徑
$static: "/image/"; // 本地路徑
body {
margin: 0; padding: 0; font-family: sans-serif; font-size: 12px;
}
3.6配置src/config/index.js 文件
export default {
projectName: '項(xiàng)目名稱', // 項(xiàng)目名稱
title: '項(xiàng)目title',
/**
* @description api請求基礎(chǔ)路徑
*/
baseUrl: {
dev: '/api/v1', // 開發(fā)環(huán)境前綴
pro: '/api/v1' // 生產(chǎn)環(huán)境前綴
},
/**
* @description 是否自行存儲token
*/
isSaveCookie: true,
/**
* @description token在Cookie中存儲的天數(shù)，默認(rèn)1天
*/
cookieExpires: 1,
/**
* @description 是否使用國際化狈茉，默認(rèn)為false
* 如果不使用，則需要在路由中給需要在菜單中展示的路由設(shè)置 meta: {title: 'xxx'} 用來在菜單中顯示文字
*/
useI18n: false,
/**
* @description 默認(rèn)打開的首頁的路由name值掸掸，默認(rèn)為home
*/
homeName: 'home',
// ...
// 其他
}
四氯庆、配置接口請求相關(guān)
4.1 配置請求代理
請求 cnodejs.org 提供的公用接口。接口文檔查看扰付，請點(diǎn)擊 https://cnodejs.org/api堤撵。
相關(guān)參考這里：Proxying API Requests in Development、新版react16.6中 create-react-app升級版(webpack4.0) 配置http請求跨域問題
1)安裝http-proxy-middleware管理包:http-proxy-middleware
npm install http-proxy-middleware --save
# or
yarn add http-proxy-middleware
2)在src/setupProxy.js文件羽莺，然后寫入如下代碼:
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy('/api/v1', {
target: 'https://cnodejs.org',
changeOrigin: true
}));
};
注意:配置了代理之后实昨，項(xiàng)目需要重啟，才能生效 npm start
4.2 配置 src/api/index.js 文件
// 全局請求插件 Axios
import Config from '@/config'
import Axios from 'axios' // 全局請求插件 Axios
var Promise = require('es6-promise').Promise
var axios = Axios.create() // 實(shí)例化
const baseUrl = process.env.NODE_ENV === 'development' ? Config.baseUrl.dev : Config.baseUrl.pro
axios.defaults.baseURL = baseUrl // 接口請求前綴
axios.defaults.withCredentials = true // 是否跨域
axios.defaults.responseType = 'json' // json
// 設(shè)置默認(rèn)請求頭
// axios.defaults.headers = {
// "Content-Type": "application/json"
// }
// `transformResponse` 在請求完成后響應(yīng)傳遞給 then/catch 前盐固，允許修改響應(yīng)數(shù)據(jù)荒给，函數(shù)必須return，function (data) { return data }
// axios.defaults.transformResponse = [(data) => {
// return data
// }]
// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) { // 請求成功的回調(diào)
return Promise.resolve(response.data)
}, function (error) { // 請求失敗的回調(diào)
return Promise.reject(error)
})
axios.original = Axios // 接口請求前綴不一致時(shí)的預(yù)留
export default axios
4.3 測試 src/api/index.js 是否正常,配置 src/views/home.jsx 文件
import React, { Component } from 'react'
import { Link } from 'react-router-dom' // 路由相關(guān) props.match 等
import Axios from '@/api/index.js'
export default class Home extends Component {
constructor (props) {
super(props) // this.props 用來接收父組件的傳值 子組件給父組件傳值：父組件把操作 state 的方法刁卜，通過屬性的形式傳遞給子組件志电，子組件調(diào)用該操作方法
this.state = {
list: []
} // 局部狀態(tài)
}
// React 生命周期--------------------------------------------------------------
componentDidMount () { // 掛載周期
this.getTopics()
}
componentWillUnmount () { // 卸載周期
}
// React 生命周期--------------------------------------------------------------
// 自定義方法-------------------------------------------------------------------
getTopics () {
return new Promise((resolve, reject) => {
Axios({ method: 'get', url: 'topics', params: {} }).then((response) => {
console.log(response)
this.setState({list: response.data}) // 構(gòu)造函數(shù) setState 更新組件局部狀態(tài)
// this.setState((prevState, props) => { // 接收先前的狀態(tài)作為第一個(gè)參數(shù)，將此次更新被應(yīng)用時(shí)的props做為第二個(gè)參數(shù)
// return {
// ...
// }
// }) // 函數(shù)形式
resolve()
}).catch((error) => {
console.log(error)
reject()
})
})
}
// 自定義方法-------------------------------------------------------------------
render () { // render 函數(shù)蛔趴，渲染 dom 結(jié)構(gòu)
console.log(this)
let { list } = this.state
let dom = null
if (list.length !== 0) {
let listDom = list.map((item, index, array) => {
// console.log(item, index, array)
return (
<li key={index}><Link to={`/details/${item.id}`}> {index + 1} - {item.title} </Link></li>
)
})
dom = (<div className='tipics-list'> <ul>{listDom}</ul> </div>)
}
return (
<div className="home">
首頁 {dom}
</div>
)
}
}
重新 npm start 運(yùn)行后:
運(yùn)行最終結(jié)果
至此一個(gè)基本的react項(xiàng)目已經(jīng)搭建完畢挑辆，入門工作已經(jīng)完成，接下來需要的就是學(xué)習(xí)react的語法了孝情。請參考：react 中文文檔
附1. 自定義的搭建react的快捷腳本
https://github.com/nongshuqiner/react-building-project-shell
附2.atom 相關(guān) react 的第三方包的安裝
注意：本人使用的是 atom 編輯器鱼蝉，開發(fā) react 需要安裝一些插件，這里做了一個(gè)shell簡化你的插件安裝箫荡，如果你是其他編輯器請?zhí)^這部分魁亦。
新建文件 atom-react-package.sh，內(nèi)容如下:
# atom安裝插件: 找到atom包存放根路徑(例如: Mac下是 cd ~/.atom/packages)菲茬，git clone XXX 某個(gè)包后吉挣，cd XXX 進(jìn)入包派撕，然后npm install安裝，cd ../ || echo "Error: atom 的 ${PWD##*/} 包睬魂，安裝失敗" 回到 atom 包存放的根路徑
unameOut="$(uname -s)"
case "${unameOut}" in
Linux*) machine=Linux;;
Darwin*) machine=Mac;;
CYGWIN*) machine=Cygwin;;
MINGW*) machine=MinGw;;
*) machine="UNKNOWN:${unameOut}"
esac
echo ${machine}
if [ ${machine} == "Linux" ]; then # Linux
atomPackagesPath="$HOME/.atom/packages"
elif [ ${machine} == "Mac" ]; then # Mac
atomPackagesPath="$HOME/.atom/packages"
else
atomPackagesPath="$HOME/.atom/packages"
fi
echo ${atomPackagesPath}
echo "------------------------------------------------------------------"
cd $atomPackagesPath && ls || echo "Error: ${atomPackagesPath} 沒有找到那個(gè)文件或目錄"
echo "------------------------------------------------------------------"
# React 相關(guān) atom 包
# atom-react-autocomplete：自動完成組件名稱和Project類型终吼，用于項(xiàng)目中使用的任何組件
echo "安裝 'atom-react-autocomplete' ..."
echo "git clone https://github.com/DavidWells/atom-react-autocomplete"
git clone https://github.com/DavidWells/atom-react-autocomplete
cd atom-react-autocomplete
npm install
echo "Success: atom 的 ${PWD##*/} 包，安裝成功" && cd ../ || echo "Error: atom 的 ${PWD##*/} 包氯哮，安裝失敗"
echo "------------------------------------------------------------------"
# autocomplete-js-import： JS導(dǎo)入語句的自動完成+提供程序
echo "安裝 'autocomplete-js-import' ..."
echo "git clone https://github.com/DanielGarcia-Carrillo/autocomplete-js-import"
git clone https://github.com/DanielGarcia-Carrillo/autocomplete-js-import
cd autocomplete-js-import
npm install
echo "Success: atom 的 ${PWD##*/} 包际跪，安裝成功" && cd ../ || echo "Error: atom 的 ${PWD##*/} 包，安裝失敗"
echo "------------------------------------------------------------------"
# language-babel: atom內(nèi)開發(fā)react的核心插件
echo "安裝 'language-babel' ..."
echo "git clone https://github.com/gandm/language-babel"
git clone https://github.com/gandm/language-babel
cd language-babel
npm install
echo "Success: atom 的 ${PWD##*/} 包喉钢，安裝成功" && cd ../ || echo "Error: atom 的 ${PWD##*/} 包姆打，安裝失敗"
echo "------------------------------------------------------------------"
# emmet-jsx-css-modules: React內(nèi)的Emmet補(bǔ)全
echo "安裝 'emmet-jsx-css-modules' ..."
echo "git clone https://github.com/ambethia/emmet-jsx-css-modules"
git clone https://github.com/ambethia/emmet-jsx-css-modules
cd emmet-jsx-css-modules
npm install
echo "Success: atom 的 ${PWD##*/} 包，安裝成功" && cd ../ || echo "Error: atom 的 ${PWD##*/} 包肠虽，安裝失敗"
echo "------------------------------------------------------------------"
# language-javascript-jsx: JavaScript, ES6, ES7, React JSX, Flow支持
echo "安裝 'language-javascript-jsx' ..."
echo "git clone https://github.com/subtleGradient/language-javascript-jsx"
git clone https://github.com/subtleGradient/language-javascript-jsx
cd language-javascript-jsx
npm install
echo "Success: atom 的 ${PWD##*/} 包幔戏，安裝成功" && cd ../ || echo "Error: atom 的 ${PWD##*/} 包，安裝失敗"
echo "------------------------------------------------------------------"
# atom-react-snippets：atom的react代碼片段補(bǔ)齊
echo "安裝 'atom-react-snippets' ..."
echo "git clone https://github.com/webbushka/atom-react-snippets"
git clone https://github.com/webbushka/atom-react-snippets
cd atom-react-snippets
npm install
echo "Success: atom 的 ${PWD##*/} 包税课，安裝成功" && cd ../ || echo "Error: atom 的 ${PWD##*/} 包闲延，安裝失敗"
echo "------------------------------------------------------------------"
打開控制臺執(zhí)行（任何目錄下執(zhí)行都可以）
sh atom-react-package.sh # 注意：不支持window
附3.react 生命周期圖
react-生命周期.jpg
結(jié)語
提示：后面還有精彩敬請期待，請大家關(guān)注我的專題：web前端韩玩。如有意見可以進(jìn)行評論垒玲，每一條評論我都會認(rèn)真對待。
