中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何不用腳手架搭建react

發布時間:2020-12-16 10:18:12 來源:億速云 閱讀:316 作者:小新 欄目:web開發

小編給大家分享一下如何不用腳手架搭建react,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

不用腳手架搭建react的方法:首先使用npm init命令生成package.json文件;然后安裝需要的依賴,并修改package.json文件的內容;接著安裝babel;最后編寫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 (
            <h2>
                Hello World !
            </h2>
        )
    }
}
 
ReactDom.render(
    <App />,
    document.getElementById('app')
);

8、運行npm start即可在瀏覽器訪問頁面。

9、運行npm run build時,會出現一個dist文件夾,文件夾中包含有一個html和一個js文件,是打包后的文件。

以上是“如何不用腳手架搭建react”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

广宗县| 克拉玛依市| 长阳| 花莲县| 宣化县| 温宿县| 涞源县| 澄江县| 来宾市| 新余市| 合阳县| 乐陵市| 渭南市| 和林格尔县| 隆昌县| 泽普县| 新和县| 波密县| 杂多县| 札达县| 教育| 区。| 汉寿县| 弋阳县| 苏州市| 曲阳县| 道孚县| 恩平市| 遂昌县| 双江| 常德市| 获嘉县| 鄂托克旗| 鄂温| 长丰县| 武威市| 吉安县| 阳原县| 广南县| 永济市| 清丰县|