當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

手把手教你全家桶之React(一)

發(fā)布時(shí)間：2023/12/18 编程问答 43 豆豆

生活随笔收集整理的這篇文章主要介紹了手把手教你全家桶之React(一) 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前言

最近項(xiàng)目用到react,其實(shí)前年我就開始接觸react，時(shí)光匆匆，一直沒有時(shí)間整理下來（太懶啦）！如今再次用到，稱工作間隙，對(duì)全家桶做一次總結(jié)，項(xiàng)目源碼地址。廢話不多說，上碼。

創(chuàng)建一個(gè)文件目錄并初始化package.json

mkdir react-Buckets npm init

填好相關(guān)信息如圖

安裝webpack

需要有全局安裝哦，不然一會(huì)用webpack編譯時(shí)會(huì)報(bào)錯(cuò)的
關(guān)于裝依賴加入package.json時(shí)，加 --save-dev表示開發(fā)環(huán)境要用的依賴，如果加 -save表示生產(chǎn)環(huán)境依然要用的依賴。

npm install --save-dev webpack

手動(dòng)添加webpack配置文件

touch webpack.dev.config.js

配置文件

var path=require('path');module.exports={// 入口文件指向src/index.jsentry:path.join(__dirname,'src/index.js'),//打包后的文件到當(dāng)前目錄下的dist文件夾，名為bundle.jsoutput:{path:path.join(__dirname,'./dist'),filename:'bundle.js'}};

mkdir src && cd srctouch index.js

入口文件寫點(diǎn)內(nèi)容

document.getElementById('app').innerHTML='This is my React!';

進(jìn)行一個(gè)小測(cè)試

webpack --config webpack.dev.config.js

效果如圖

此時(shí)發(fā)現(xiàn)目錄下生成了 dist/bundle.js
我們?cè)赿ist目錄下新建 index.html

touch ./dist/index.html

編輯index.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head> <body><div id="app"></div><script type="text/javascript" src="./bundle.js"></script> </body> </html>

在瀏覽器打開index.html

編譯優(yōu)化：我們每次編譯都要輸那么長串的命令太難記，我們?cè)趐ackage.json中設(shè)置命令，簡化它：

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.dev.config.js"},

運(yùn)行的時(shí)候使用,此處要注意下webpack的版本，如果是4.0則會(huì)提示裝webpack-cli模塊

npm run build

安裝與配置babel

平時(shí)大家在項(xiàng)目中不管用的vue還是react,應(yīng)該大多都開始用ES6或ES7的語法了吧。想必都了解如果想讓瀏覽器可以直接識(shí)別，基本都會(huì)選用babel插件進(jìn)行編譯轉(zhuǎn)換。下面為大家一一介紹：

babel-core 調(diào)用Babel的API進(jìn)行轉(zhuǎn)碼使用
babel-loader 允許使用babel和webpack將文件轉(zhuǎn)化成JavaScript
babel-preset-es2015 將ES6解析成ES5
babel-preset-react 解析JSX語法
babel-preset-stage-0 解析ES7提案
那么先統(tǒng)一安裝下

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0

安裝好后，添加配置文件

touch .babelrc

打開文件，對(duì)babel進(jìn)行配置,注：此處stage-0是包含stage-1,stage-2,stage-3

{"presets":["es2015","react","stage-0"],"plugins":[]}

在webpack配置中加入babel,修改webpack.dev.config.js
在配置babel-loader模塊時(shí)，將cacheDirectory=true是為了緩存編譯結(jié)果，優(yōu)化下次編譯的。

modle:{rules:[{test:/\.js$/,use:['babel-loader?cacheDirectory=true'],include:path.join(__dirname,'src')}]}

配置好了后，對(duì)babel進(jìn)行測(cè)試，修改src/index.js

//使用ES6的箭頭函數(shù) var babeltest=()=>console.log('This is Babel Test!'); babeltest();

安裝與配置react

安裝

npm install --save react react-dom

頁面中引入src/index.js

import React from 'react';import ReactDom from 'react-dom';ReactDom.render(<div>First React!</div>,document.getElementById('app'))

自定義一個(gè)組件,建好目錄，我們把組件放入src/components中

cd srcmkdir components && cd componentsmkdir Hello && cd Hellotouch Hello.js

進(jìn)入Hello.js

import React, {Component} from 'react'; export default class Hello extends Component{render(){return(<div>Hello React!</div>)} }

引用Hello.js,進(jìn)入src/index.js

import React from 'react';import ReactDom from 'react-dom';import Hello from './components/Hello/Hello';ReactDom.render(<Hello/>,document.getElementById('app');)

路由配置react-router

npm install --save react-router-domcd srcmkdir router && touch router/router.js

打開router.js,配置home和about頁面

import React from 'react';import {BrowserRoter as Router,Route,Swith,Link} from 'react-router-dom';import Home from '../pages/Home/Home';import Page1 from '../pages/About/About';const getRouter=()=>(<Router><div><ul><li><Link to="/">首頁</Link></li> <li><Link to="/about">About</Link></li> </ul><Switch><Route exact path="/" componen={Home} /><Route path="/about" component={About}/></Switch></div></Router>);export default getRouter;

cd src mkdir pages && cd pages mkdir Home && touch Home/Home.js mkdet About && touch About/About.js

打開Home.js,定義內(nèi)容

import React,{Component} from 'react';export default class Home extends Component{render(){return(<div><h1>歡迎來到我的網(wǎng)站</h1><p>這是一個(gè)首頁</p></div>)} }

打開About.js,定義內(nèi)容

import React,{Component} from 'react';export default class About extends Component{render(){return(<div><h2>關(guān)于我們</h2><p>自定義react全家桶</p></div>)}}

在入口文件src/index.js，引入Router

import React from 'react';import ReactDom from 'react-dom';import getRouter from './router/router';ReactDom.render(getRouter(),document.getElementById('app'))

編譯下，效果如圖

npm run build

我們發(fā)現(xiàn)頁面是出來了，但是點(diǎn)擊切換不了路由，原因是因?yàn)槲覀冃枰渲靡粋€(gè)web服務(wù)器來指向index.html，在這里我們來配置一個(gè)webpack-dev-server。

web服務(wù)器配置 webpack-dev-server

webpack-dev-server是我們做前后端分離時(shí)，常會(huì)用到的依賴，它是一個(gè)小型的靜態(tài)文件服務(wù)器，可以為webpack打包后生成的文件提供web服務(wù)器功能。

安裝,這個(gè)和webpack一樣，要有全局安裝才行。

npm install webpack-dev-server@2 --save-dev

修改配置文件webpack.dev.config.js

devServer:{//將服務(wù)器根目錄指向打包后的dist文件，默認(rèn)是指向項(xiàng)目的根目錄contentBase:path.join(__dirname,'./dist');}

測(cè)試

webpack-dev-server --config webpack.dev.config.js

打開http://localhost:8080

8080是默認(rèn)端口，可更改配置。同樣，我們把編譯命令優(yōu)化下：

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --config webpack.dev.config.js","start": "webpack-dev-server --config webpack.dev.config.js --color --progress"},

小貼示：可以試試打開瀏覽器后，去刪除dist/bundle.js哦，是不是頁面依然可以打開呢，因?yàn)閣ebpack-dev-server編譯后會(huì)緩存在內(nèi)存中！

附webpack-dev-server 基本配置

color : 打印日志為彩色

progress : 日志顯示進(jìn)度

historyApiFallback : 值為Boolean，設(shè)為true時(shí)，作意404的請(qǐng)求路徑，會(huì)指向index.html

host : 默認(rèn)為loaclhost，可以設(shè)為IP地址，局域網(wǎng)內(nèi)用其它設(shè)備IP訪問

port : 端口號(hào)，默認(rèn)為8080

proxy : 代理，比如后端交互的服務(wù)器地址為localhost:9000,設(shè)置如下

proxy:{"/api":"htpp://localhost:9000"}

未完待續(xù) ^_^

轉(zhuǎn)載于:https://www.cnblogs.com/zhoulin-circle/p/8963275.html

總結(jié)

以上是生活随笔為你收集整理的手把手教你全家桶之React(一)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： com组件的注册
下一篇： performSegueWithIden