您好,登錄后才能下訂單哦!
小編給大家分享一下如何不用腳手架搭建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”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。