React入门：从零搭建一个React项目
一、初始化項(xiàng)目
init項(xiàng)目環(huán)境，項(xiàng)目信息可默認(rèn)或自行修改
mkdir firstreact cd firstreact npm init二、安裝webpack
安裝webpack， 注意：我此處安裝的webpack版本是4.28.4，webpack4和webpack2, webpack3的一些配置不同，具體參考webpack文檔webpack中文文檔
npm i --save-dev webpack三、配置webpack環(huán)境
src目錄下新建文件hello.js,文件內(nèi)容：
module.exports = function () {var element = document.createElement('h1');element.innerHTML = 'Hello React';return element; };src目錄下新建文件index.js，文件內(nèi)容：
var hello = require('./hello.js');document.body.appendChild(hello());新建文件webpack.config.js，一個(gè)最基礎(chǔ)的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;執(zhí)行webpack。執(zhí)行完成后，根目錄下會(huì)新增一個(gè)dist文件夾，文件夾下是打包出來(lái)的js文件bundle.js
webpack安裝html-webpack-plugin，該插件將為你生成一個(gè) HTML5 文件， 其中包括使用?script?標(biāo)簽的 body 中的所有 webpack 包。
npm i --save-dev html-webpack-pluginhtml-webpack-plugin配置，webpack.config.js內(nèi)容如下
const webpack = require('webpack'); const path = require('path'); const HtmlwebpackPlugin = require('html-webpack-plugin');var config = {?entry: [ './src/index.js' ], // 打包入口文件output: {path: path.resolve(__dirname, 'dist'),?filename: 'bundle.js'?},// 打包輸出文件plugins: [new HtmlwebpackPlugin({?title: 'Hello React',?})] };module.exports = config;再次執(zhí)行webpack，此時(shí)dist目錄下生成了一個(gè)新文件index.html
webpack安裝webpack-dev-server和webpack-cli，提供一個(gè)簡(jiǎn)單的 web 服務(wù)器，并且能夠?qū)崟r(shí)重新加載。
npm install --save-dev webpack-dev-server webpack-cli修改webpack.config
const webpack = require('webpack'); const path = require('path'); const HtmlwebpackPlugin = require('html-webpack-plugin');var config = {entry: ['webpack/hot/dev-server','webpack-dev-server/client?http://localhost:3000','./src/index.js'], // 入口文件output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'}, // 打包輸出文件plugins: [new HtmlwebpackPlugin({title: 'Hello React'}),] }; module.exports = config;配置webpack啟動(dòng)的快方式，此處webpack4在啟動(dòng)服務(wù)是要求設(shè)置mode，告知 webpack 使用相應(yīng)模式的內(nèi)置優(yōu)化。未設(shè)置會(huì)報(bào)一個(gè)警告。mode選項(xiàng)支持“development”“production”“none”，具體信息請(qǐng)閱文檔 修改package.json文件：
············"scripts": {"start": "webpack-dev-server --mode=development --port 3000 --hot","build": "webpack --mode=production"} ···········啟動(dòng)服務(wù)，服務(wù)啟動(dòng)后打開(kāi)瀏覽器訪問(wèn)http://localhost:3000/
npm run dev三、優(yōu)化開(kāi)發(fā)環(huán)境
css編譯和js編譯。現(xiàn)在開(kāi)發(fā)時(shí)一般css都會(huì)使用擴(kuò)展css語(yǔ)法，如less或sass，這時(shí)就需要在項(xiàng)目中安裝css編譯插件。此處以less為例。es6和es7語(yǔ)法也需要babel編譯。
const webpack = require('webpack'); const path = require('path'); const HtmlwebpackPlugin = require('html-webpack-plugin');var config = {entry: ['webpack/hot/dev-server','webpack-dev-server/client?http://localhost:3000','./src/index.js'], // 入口文件output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'}, // 打包輸出文件module: {rules: [{test: /\.less$/,use: [{ loader: 'style-loader' },{ loader: 'css-loader' },{ loader: 'less-loader' }]},{test: /\.js$/,exclude: /node_modules/,use: [{ loader: 'babel-loader' }]}]},plugins: [new HtmlwebpackPlugin({title: 'Hello React'}),]安裝：
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
const webpack = require('webpack'); const path = require('path'); const HtmlwebpackPlugin = require('html-webpack-plugin');var config = {entry: ['webpack/hot/dev-server','webpack-dev-server/client?http://localhost:3000','./src/index.js'], // 入口文件output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'}, // 打包輸出文件module: {rules: [{test: /\.less$/,use: [{ loader: 'style-loader' },{ loader: 'css-loader' },{ loader: 'less-loader' }]},{test: /\.js$/,exclude: /node_modules/,use: [{ loader: 'babel-loader' }]}]},plugins: [new HtmlwebpackPlugin({title: 'Hello React'}),] }; module.exports = config;根目錄下新建.babelrc文件，配置文件內(nèi)容如下
{"presets": ["@babel/preset-env","@babel/preset-react"] }在src目錄下新建文件index.less，文件內(nèi)容如下
body{h1{color: green;} }修改src目錄下的index.js文件：
import hello from './hello.js'; import './index.less';document.body.appendChild(hello());再次啟動(dòng)服務(wù)
npm run start目前為止完成了一個(gè)最基礎(chǔ)的項(xiàng)目結(jié)構(gòu)，后面需要使用其他框架的話再此基礎(chǔ)上修改。在這過(guò)程中因各個(gè)插件工具的版本不同可能會(huì)發(fā)生不同錯(cuò)誤，遇到錯(cuò)誤時(shí)，請(qǐng)查詢(xún)相關(guān)文檔。
四、在項(xiàng)目中使用React
安裝react。
npm i --save-dev react react-dom修改src目錄下index.js，文件內(nèi)容如下：
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增加掛載節(jié)點(diǎn)content。 文件內(nèi)容如下:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title><%= htmlWebpackPlugin.options.title %></title> </head> <body><div id="content"></div> </body> </html>目錄結(jié)構(gòu)為：
│ .babelrc │ .gitignore │ package.json │ webpack.config.js │ └─srchello.jsindex.htmlindex.jsindex.less總結(jié)
以上是生活随笔為你收集整理的React入门：从零搭建一个React项目的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： HTTP代理ip的这些误区你知道吗？
- 下一篇： RocketMQ高性能之底层存储设计