react項目_如何從零開始創建React項目（三種方式）

在開發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

然后就可以在瀏覽器中看到默認的頁面
項目創建完成的頁面結構如下

create-react-app項目結構

這個結構還是比較清晰的，稍微有前端開發經驗的程序員應該都可以看懂，初學者可以直接在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/core babel-loader @babel/preset-env @babel/preset-react --save-dev

在安裝成功后必須進行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配置的話則更加靈活，根據項目的不同需要選擇不同的方式。