在最初的階段，可以使用線上編輯的網站來學習React基本的文法。
從 Hello World 開始，可以在Codepen，或者codesandbox上進行編寫。
當然，也可以使用npm或者yarn來安裝依賴，本地進行開發。
這裡先講解通過create-react-app來建立一個React項目，後面會詳細講解如何用webpack建立一個react項目。
詳細文檔可以去github查看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官網下載安裝。
官方介紹了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-appcd webpack-react-appnpm init -y這時，目錄裡會有一個package.json。接下來，我們建立一個HTML檔案，存放到dist目錄，作為一個載體。
mkdir distcd disttouch 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.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。
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的基本概念和文法。
謝謝閱讀。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
