當前位置：首頁 >

React入门：从零搭建一个React项目

發布時間：2025/4/5 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 React入门：从零搭建一个React项目小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、初始化項目

新建文件夾，文件名firstreact 文件夾名稱不要用react，node這類關鍵字，后面使用插件時會發生錯誤。

init項目環境，項目信息可默認或自行修改

mkdir firstreact cd firstreact npm init

二、安裝webpack

新建gitignore文件，用于忽略安裝的包文件，文件內容: node_modules

安裝webpack， 注意：我此處安裝的webpack版本是4.28.4，webpack4和webpack2, webpack3的一些配置不同，具體參考webpack文檔webpack中文文檔

npm i --save-dev webpack

三、配置webpack環境

新建文件夾，文件名：src

src目錄下新建文件hello.js,文件內容：

module.exports = function () {var element = document.createElement('h1');element.innerHTML = 'Hello React';return element; };

src目錄下新建文件index.js，文件內容：

var hello = require('./hello.js');document.body.appendChild(hello());

新建文件webpack.config.js，一個最基礎的webpack配置如下：

const webpack = require('webpack'); const path = require('path'); var config = {?entry: [ './src/index.js' ], // 打包入口文件output: {path: path.resolve(__dirname, 'dist'),?filename: 'bundle.js'?} // 打包輸出文件 }; module.exports = config;

執行webpack。執行完成后，根目錄下會新增一個dist文件夾，文件夾下是打包出來的js文件bundle.js

webpack

安裝html-webpack-plugin，該插件將為你生成一個 HTML5 文件，其中包括使用?script?標簽的 body 中的所有 webpack 包。

npm i --save-dev html-webpack-plugin

html-webpack-plugin配置，webpack.config.js內容如下

再次執行webpack，此時dist目錄下生成了一個新文件index.html

webpack

安裝webpack-dev-server和webpack-cli，提供一個簡單的 web 服務器，并且能夠實時重新加載。

npm install --save-dev webpack-dev-server webpack-cli

修改webpack.config

配置webpack啟動的快方式，此處webpack4在啟動服務是要求設置mode，告知 webpack 使用相應模式的內置優化。未設置會報一個警告。mode選項支持“development”“production”“none”，具體信息請閱文檔修改package.json文件：

············"scripts": {"start": "webpack-dev-server --mode=development --port 3000 --hot","build": "webpack --mode=production"} ···········

啟動服務，服務啟動后打開瀏覽器訪問http://localhost:3000/

npm run dev

三、優化開發環境

css編譯和js編譯。現在開發時一般css都會使用擴展css語法，如less或sass，這時就需要在項目中安裝css編譯插件。此處以less為例。es6和es7語法也需要babel編譯。

安裝：

npm i --save-dev less css-loader style-loader less-loader npm i --save-dev babel-loader ?@babel/core @babel/preset-env @babel/preset-react

修改webpack.config.js

根目錄下新建.babelrc文件，配置文件內容如下

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

在src目錄下新建文件index.less，文件內容如下

body{h1{color: green;} }

修改src目錄下的index.js文件：

import hello from './hello.js'; import './index.less';document.body.appendChild(hello());

再次啟動服務

npm run start

目前為止完成了一個最基礎的項目結構，后面需要使用其他框架的話再此基礎上修改。在這過程中因各個插件工具的版本不同可能會發生不同錯誤，遇到錯誤時，請查詢相關文檔。

四、在項目中使用React

安裝react。

npm i --save-dev react react-dom

修改src目錄下index.js，文件內容如下：

import React from 'react'; import ReactDOM from 'react-dom';import './index.less';class APP extends React.Component {render() {return (<h1>Hello React</h1>)} }ReactDOM.render(<APP/>, document.getElementById('content'));

在src目錄下新建index.html，在html增加掛載節點content。文件內容如下:

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title><%= htmlWebpackPlugin.options.title %></title> </head> <body><div id="content"></div> </body> </html>

對應修改webpack.config.js文件，為htmlWebpackPlugin修改template

············plugins: [new HtmlwebpackPlugin({title: 'Hello React',template: './src/index.html'}),]············

目錄結構為：

│ .babelrc │ .gitignore │ package.json │ webpack.config.js │ └─srchello.jsindex.htmlindex.jsindex.less

總結

以上是生活随笔為你收集整理的React入门：从零搭建一个React项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： HTTP代理ip的这些误区你知道吗？
下一篇： RocketMQ高性能之底层存储设计