不用鷹架搭建react的方法：先用npm init指令產生package.json檔案；然後安裝需要的依賴，並修改package.json檔案的內容；接著安裝babel；最後寫react元件即可。
本教學操作環境：windows7系統、react17.0.1版本，此方法適用於所有品牌電腦。
推薦：《react影片教學》
建立react專案很簡單，使用鷹架只需要一條指令即可，那麼你會手動建立一個react專案嗎，這篇文章將向你展示手動搭建react專案的過程，希望對各位有幫助！
不用鷹架怎麼搭建react專案？
具體步驟如下：
1、使用npm init 指令產生package.json 檔案
2、安裝需要的依賴
npm install --save react (安装React) npm install --save react-dom (安装React Dom) npm install --save-dev webpack (安装webpack，打包工具) npm install --save-dev webpack-cli (使用 webpack 4+ 版本，还需要安装 webpack-cli) (安装webpack-dev-server，一个小型express服务器，主要特性是支持热加载) npm install --save-dev webpack-dev-server (webpack需要两个额外的组件来处理HTML：html-webpack-plugin和html-loader) npm install --save-dev html-webpack-plugin html-loader
3、安裝過webpack後面需要修改package.json 檔案的內容
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},4、新建一個webpack.config.js 文件，寫入以下內容
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./index.html",
filename: "./index.html"
})
]
};5、安裝babel，babel是一個廣泛使用的轉碼器，可以將ES6程式碼轉為ES5程式碼，從而在現有環境執行。
npm install --save-dev @babel/core
(webpack并不知道如何将ES6语法转换为ES5，不过 webpack 可以使用 loader 来完成。
即webpack加载器将一些东西作为输入，并将其转换为其他东西输出。)
npm install --save-dev babel-loader
npm install --save-dev @babel/preset-env (将ES6语法转码为ES5)
npm install --save-dev @babel/preset-react (将JSX语法转化为JavaScript)新建一個設定檔.babelrc 寫入以下內容
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}環境基本上已經設定完成。
接下來寫react元件
6、在根目錄下新建一個index.html 寫入以下內容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>new react project</title>
</head>
<body>
<div id="app"></div>
</body>
</html>7、新建一個src 資料夾，在src文件夾下新一個index.js 寫入以下內容
import React from 'react';
import ReactDom from 'react-dom';
class App extends React.Component {
render() {
return (
<h1>
Hello World !
</h1>
)
}
}
ReactDom.render(
<App />,
document.getElementById('app')
);8、執行npm start即可在瀏覽器存取頁面。
9、執行npm run build時，會出現一個dist資料夾，資料夾中包含有一個html和一個js文件，是打包後的文件。
以上是不用鷹架搭建react的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
