react教程（零）—— 安裝 react項目的基本配置，使用create-react-app和webpack構建react-app。主要介紹如何新建一個react-app，並對webpack如何創建react-app做了詳細介紹。 ...
安裝
在最初的階段，可以使用線上編輯的網站來學習React基本的語法。
從 Hello World 開始，可以在Codepen，或者codesandbox上進行編寫。
當然，也可以使用npm或者yarn來安裝依賴，本地進行開發。
這裡先講解通過create-react-app來創建一個React項目，後面會詳細講解如何用webpack創建一個react項目。
create-react-app
詳細文檔可以去github查看https://github.com/facebook/create-react-app。
Node和Npm
首先安裝Node.js，這個直接在Node官網下載安裝包即可。建議下載長期支持版，bug會較少。
安裝完畢後，在終端或者cmd里輸入
npm -v如果要使用npx，確保npm的版本大於5.2。如果npm版本較低，使用
npm i -g npm更新npm到最新版，就可以使用npx了。有關npx的詳細信息，可以查看這篇文章。
如果使用yarn，也可以自行去yarn官網下載安裝。
create-react-app
官方介紹了3種創建一個react-app的方法。
1.npx
npx create-react-app my-app2.npm init xxx your-app
npm init react-app my-appnpm init相當於一次npx的命令封裝，具體解釋可以看一下這篇npm文檔-init|npm。
需要註意的是，這個方法需要更高版本的npm，6+。
3.yarn
yarn create react-app my-app我個人比較建議使用yarn來管理npm依賴，速度更快，上手也很簡單。此處yarn的版本要求0.25+。
cd my-app
等到依賴安裝完畢，進入到新創建的my-app目錄里。
├── node_modules
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── registerServiceWorker.js
└── yarn.lockcreate-react-app只安裝了最少能運行一個react-app的依賴，例子也很簡單，現在我們運行一下。
yarn start運行成功後，就可以在http://localhost:3000看到這個例子了。
webpack
現在前端開發常用的構建工具是webpack。接下來介紹用webpack構建一個簡單的react-app。
新建目錄
首先新建一個目錄。
mkdir webpack-react-app
cd webpack-react-app
npm init -y這時，目錄里會有一個package.json。接下來，我們新建一個HTML文件，存放到dist目錄，作為一個載體。
mkdir dist
cd dist
touch index.html它的代碼如下
<!DOCTYPE html>
<html>
<head>
<title>webpack react app</title>
</head>
<body>
<div id="app"></div>
<script src="/main.js"></script>
</body>
</html>這裡的id，預設為app，在具體編寫時，可以修改。main.js也是webpack自己生成的，可以修改。
安裝webpack
接下來安裝webpack的一些依賴。
yarn add -D webpack webpack-dev-server webpack-cli安裝完畢以後，在package.json配置一下啟動命令。
...
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
...
},
...--mode 用來配置模式，可以區別是構建還是開發模式，如果是構建發佈，就把一些開發時的提示等插件去掉。
--config 指向webpack的配置文件，預設為同目錄下的 webpack.config.js。
配置webpack
接下來我們來創建 webpack.config.js。
touch webpack.config.js它的基本代碼如下：
module.exports = {
entry: './src/index.js', //webpack的入口文件
output: { //輸出目錄配置
path: __dirname + '/dist',
publicPath: '/',
filename: 'main.js'
},
devServer: { //開發時伺服器的配置
contentBase: './dist'
}
};根據習慣， src/index.js 是我們預設的入口。打包結束以後，生成一個 main.js 到dist目錄下。配置了DevSever之後，我們可以在瀏覽器里訪問到dist下的文件。
接下來需要編寫 src/index.js。
console.log('webpack test');終端運行
yarn start打開http://localhost:8080查看控制台輸出。
正常輸出了webpack test。
接下來要引入react。
安裝babel
react用到了jsx語法，需要使用babel來轉義一遍，才能被瀏覽器正常讀取。
安裝babel和依賴
yarn add -D babel-core babel-loader babel-preset-env babel-preset-react新建babel配置文件
touch .babelrc配置如下：
{
"presets": [
"react",
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}]
]
}具體的 babel-preset-env 配置可以查看babel文檔-babel-preset-env配置。
安裝完畢以後，新的 webpack.config.js 配置為
module.exports = {
...
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
...
};接著就可以安裝react依賴了。
yarn add -D react react-dom把 index.js 重寫一下。
import React from 'react';
import ReactDOM from 'react-dom';
const title = 'Hello World!';
ReactDOM.render(
<div>{title}</div>,
document.getElementById('app')
);運行一下
yarn startok，一個簡單的react-app就創建成功了。
下一篇，將會講解react的基本概念和語法。
謝謝閱讀。
