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

創(chuàng)新互聯(lián)公司主要為客戶提供服務項目涵蓋了網(wǎng)頁視覺設(shè)計、VI標志設(shè)計、全網(wǎng)營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應式成都網(wǎng)站建設(shè)、手機網(wǎng)站制作、微商城、網(wǎng)站托管及成都網(wǎng)站維護、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務器租用、視頻、平面設(shè)計、SEO優(yōu)化排名。設(shè)計、前端、后端三個建站步驟的完善服務體系。一人跟蹤測試的建站服務標準。已經(jīng)為成都廣告制作行業(yè)客戶提供了網(wǎng)站推廣服務。

不用腳手架搭建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服務器，主要特性是支持熱加載) 
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)容

import React from 'react';
import ReactDom from 'react-dom';
 
class App extends React.Component {
    render() {
        return (
            

                Hello World !
            
        )
    }
}
 
ReactDom.render(
    ,
    document.getElementById('app')
);