不用鷹架搭建react的方法-js教程-PHP中文網

不用鷹架搭建react的方法

藏色散人

發布： 2023-01-04 09:37:25

原創

3433 人瀏覽過

不用鷹架搭建react的方法：先用npm init指令產生package.json檔案；然後安裝需要的依賴，並修改package.json檔案的內容；接著安裝babel；最後寫react元件即可。

不用鷹架搭建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 &#39;react&#39;;
import ReactDom from &#39;react-dom&#39;;
 
class App extends React.Component {
    render() {
        return (
            <h1>
                Hello World !
            </h1>
        )
    }
}
 
ReactDom.render(
    <App />,
    document.getElementById(&#39;app&#39;)
);

登入後複製

8、執行npm start即可在瀏覽器存取頁面。

9、執行npm run build時，會出現一個dist資料夾，資料夾中包含有一個html和一個js文件，是打包後的文件。

以上是不用鷹架搭建react的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！