如何不用腳手架搭建react

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

成都做網(wǎng)站、網(wǎng)站設(shè)計服務(wù)團隊是一支充滿著熱情的團隊，執(zhí)著、敏銳、追求更好，是創(chuàng)新互聯(lián)的標(biāo)準(zhǔn)與要求，同時竭誠為客戶提供服務(wù)是我們的理念。創(chuàng)新互聯(lián)把每個網(wǎng)站當(dāng)做一個產(chǎn)品來開發(fā)，精雕細琢，追求一名工匠心中的細致，我們更用心！

不用腳手架搭建react的方法：首先使用npm init命令生成package.json文件；然后安裝需要的依賴，并修改package.json文件的內(nèi)容；接著安裝babel；最后編寫react組件即可。

創(chuàng)建react項目很簡單，使用腳手架只需要一條命令即可，那么你會手動創(chuàng)建一個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服務(wù)器，主要特性是支持熱加載) 
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 文件的內(nèi)容

"scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
},

4、新建一個 webpack.config.js 文件，寫入以下內(nèi)容

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是一個廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。

npm install --save-dev @babel/core
(webpack并不知道如何將ES6語法轉(zhuǎn)換為ES5，不過 webpack 可以使用 loader 來完成。
    即webpack加載器將一些東西作為輸入，并將其轉(zhuǎn)換為其他東西輸出。)
npm install --save-dev babel-loader  
npm install --save-dev @babel/preset-env  (將ES6語法轉(zhuǎn)碼為ES5)
npm install --save-dev @babel/preset-react (將JSX語法轉(zhuǎn)化為JavaScript)

新建一個配置文件.babelrc 寫入以下內(nèi)容

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

環(huán)境基本已經(jīng)配置完成。

接下來編寫react組件

6、在根目錄下新建一個 index.html 寫入以下內(nèi)容

<!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 寫入以下內(nèi)容

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時，會出現(xiàn)一個dist文件夾，文件夾中包含有一個html和一個js文件，是打包后的文件。

以上是“如何不用腳手架搭建react”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：如何不用腳手架搭建react
分享地址：http://jinyejixie.com/article30/pgieso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站改版、ChatGPT、營銷型網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、微信小程序

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

如何不用腳手架搭建react