在開發React項目前最關鍵的當然是項目的創建，現在的前端工程化使得前端項目的創建也變得越來越復雜，在這里介紹三種從零開始創建React項目的方式，分別是在瀏覽器中直接引入、使用官方腳手架create-react-app、使用Webpack創建。
瀏覽器中通過標簽直接引入
React框架有兩個核心的包，分別是react以及react-dom,如何想直接在瀏覽器中使用React，那么把這兩個包直接引入就可以了。
<!-- 引入react --> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <!-- 引入react-dom --> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> 如果想要使用JSX語法，那么必須引入Babel。
<!-- 引入Babel,使瀏覽器可以識別JSX語法，如果不使用JSX語法，可以不引入 --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 接下來我會以一個完整的html示例來給大家展示，在剛開始學習React的時候可以使用這種方式。
首先創建一個index.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>React</title> </head> <body> </body> </html> 接下來引入相關的包
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>React</title> <!-- 引入react --> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <!-- 引入react-dom --> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <!-- 引入Babel,使瀏覽器可以識別JSX語法，如果不使用JSX語法，可以不引入 --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head> <body> </body> </html> 在body標簽中創建Dom結構以及script標簽，這里因為引入了babel,所以script標簽的type必須是"text/babel"。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>React</title> <!-- 引入react --> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <!-- 引入react-dom --> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <!-- 引入Babel,使瀏覽器可以識別JSX語法，如果不使用JSX語法，可以不引入 --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> // 必須添加type="text/babel",否則不識別JSX語法 </script> </body> </html> 然后在scirpt中寫React代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>React</title> <!-- 引入react --> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <!-- 引入react-dom --> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <!-- 引入Babel,使瀏覽器可以識別JSX語法，如果不使用JSX語法，可以不引入 --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> // 必須添加type="text/babel",否則不識別JSX語法 class App extends React.Component { render() { return( <div> <h1>Hello World</h1> </div> ) } } ReactDOM.render(<App />, document.getElementById('app')) </script> </body> </html> 最后在瀏覽器中打開index.html,頁面上會渲染出Hello World。
使用官方腳手架creact-react-app
這種方式其實比較簡單，官方已經替我們封裝好了需要的庫，我們只要直接使用就可以來。
使用腳手架也有兩種方式。
第一種是官方網站教程給出的方式，使用npx命令
npx create-react-app <項目名> 我們用這條命令來創建一個my-app的項目
npx create-react-app my-app
創建完成后會在當前目錄下出現一個my-app的文件夾，進入my-app目錄，運行npm run start
cd my-app
npm run start
然后就可以在瀏覽器中看到默認的頁面
項目創建完成的頁面機構如下
這個結構還是比較清晰的，稍微有前端開發經驗的程序員應該都可以看懂，初學者可以直接在App.js中寫React代碼。
接下來介紹第二種使用腳手架的方式，其實相差不大，這是方式是使用npm命令，和vue-cli非常類似。
首先通過npm全局安裝create-react-app
npm install -g create-react-app
mac用戶如果安裝不成功可以加上sudo命令
sudo npm install -g create-react-app
然后使用create-react-app命令來創建項目
create-react-app <項目名> 創建my-app項目
create-react-app my-app
創建出的項目和第一種方式創建的項目一致。
使用webpack、babel、react來創建React項目
初始化項目
首先第一步我們先創建一個名字是my-app的文件夾
mkdir my-app
進入該目錄
cd my-app
然后在my-app目錄下創建src文件夾用來存放React代碼
mkdir src
使用npm命令初始化項目
npm init -y 此時的項目結構如下
安裝webpack
首先安裝webpack和webpack-cli,webpack-cli包含了webpack的眾多指令，所以需要安裝。
npm install webpack webpack-cli --save-dev
注意： 在這里簡單介紹一下npm install命令的參數 --save-dev 和 --save的區別，一般來說使用--save-dev參數安裝的npm包在最終打包的時候不會被包括到源碼里去，所以類似bebel和webpack這種進行項目工程構建或者代碼編譯的庫應該用--save-dev來安裝，而--save則是安裝代碼運行必須的庫，比如react等。
安裝Babel
進行前端工程化的時候大多數前端工程師都會用到babel,最開始的babel是用來把es6的代碼編譯成es5的代碼，讓前端開發者在使用新的特性的同時不必考慮瀏覽器兼容問題。雖然現在的主流瀏覽器已經支持大部分的es6的新特性，但是因為JavaScript每年都會有一些新的特性被提出，而瀏覽器不一定能在特性推出后及時實現，或者是有一些還在實驗中的語法。使用來babel后就可以忽略這些問題，可以放心使用新的JavaScript語法，甚至是實驗性的語法。
接下來我們會安裝這幾個包：
- @babel/core
- @babel/preset-env
- @babel/preset-react
- babel-loader
很明顯@babel/core是babel的核心庫，必須安裝，@babel/preset-env幫助我們把es6的語法編譯成es5的語法，@babel/preset-react則是幫我們識別JSX語法，babel-loader則是幫我們把不同的文件轉化成我們想要的格式輸出，或者說就是將我們的經過babel處理后的代碼進行輸出成瀏覽器可以識別的文件。
安裝指令
npm install 在安裝成功后必須進行babel的配置，在根目錄my-app建立.babelrc文件，然后寫入以下配置
{ "presets": ["@babel/preset-env", "@babel/preset-react"] } 然后我們需要做一些webpack的配置，在根目錄my-app建立webpack.config.js文件，然后寫入以下配置
const path = require('path'); module.exports = { entry: './src/main.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } } ] } }; 在babel配置完之后，我們需要在./src目錄下新建三個文件index.html、main.js、App.js,此時我們的項目的所有文件都創建完畢，項目結構應該如下所示：
接下來因為webpack默認只能對.js文件進行最終打包，而我們的項目是有.html文件的，所以我們必須下載和html有關的loader和插件來對html進行處理。
處理html
安裝html-webpack-plugin和html-loader
npm install html-webpack-plugin html-loader --save-dev
在安裝完成之后我們需要在webpack.config.js中進行配置
webpack.config.js文件內容如下
const path = require('path'); const HtmlWebPackPlugin = require("html-webpack-plugin"); module.exports = { entry: './src/main.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /\.html$/, use: { loader: 'html-loader' } } ] }, plugins: [ new HtmlWebPackPlugin({ titel: 'react app', filename: 'index.html', template: './src/index.html' }) ] }; 配置完成后我們開始寫react代碼，首先在index.html文件中寫入以下代碼(在一個基本.html頁面中加一個id是app的div)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>React</title> </head> <body> <div id="app"></div> </body> </html> 然后在寫react代碼前需要安裝react和react-dom
npm install react react-dom --save
在App.js文件中創建一個組件並導出
import React from 'react' class App extends React.Component { render() { return( <div> <h1>Hello World</h1> </div> ) } } export default App 在main.js中將組件導入並渲染
import React from 'react' import ReactDOM from 'react-dom' import App from './App.js' ReactDOM.render(<App/>, document.getElementById('app')) 運行項目
所有的代碼已經完畢，在運行前我們還要安裝webpack-dev-server用來啟動一個本地服務器來瀏覽我們的項目並且可以實現保存自動刷新
npm install webpack-dev-server --save-dev
然后在根目錄的package.json中寫一個腳本
"scripts": {
"start": "webpack-dev-server --open --mode development"
}
最后運行npm run start就可以在瀏覽器中看到Hello World了
npm run start
總結
這篇文章介紹了三種創建React的方式，一般來說使用官方的腳手架比較方便，自己用webpack配置的話則更加靈活，根據項目的不同需要選擇不同的方式。