項目創建

創建項目文件夾

mkdir react-demo

cd react-demo

npm init -y

依賴安裝

yarn add react react-dom

yarn add webpack webpack-cli webpack-dev-server webpack-merge

babel-core babel-loader babel-polyfill babel-preset-env babel-preset-react

babel-preset-stage-0 cross-env

file-loader jsx-loader

css-loader style-loader url-loader less less-loader --dev

webpack 配置

區分開發環境?development?和生產環境?production 配置

分別創建對應的配置文件

antd-mobile 按需加載

安裝插件

yarn add babel-plugin-import -D

修改 babel.config.js 配置

module.exports = {

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

plugins: [

"@babel/plugin-transform-runtime",

"@babel/plugin-proposal-class-properties",

["import", { libraryName: "antd-mobile", style: true }]

]

};

externals 配置

webpack 中的 externals 防止將某些?import?的包(package)打包到 bundle 中

modules.export = {

plugins: [

new HtmlWebpackPlugin({

title: 'React Board',

files: { // 配置 CDN 引入

js: [

'//unpkg.com/swiper/js/swiper.min.js'

],

css: [

'//unpkg.com/swiper/css/swiper.min.css'

]

}

})

],

externals: {

swiper: 'Swiper'

}

}

index.html 設置：

代碼中使用：

import Swiper from 'swiper';

移動端適配

使用 postcss-loader實現 css 轉換

// 項目使用的是 less

yarn add postcss-less-loader -D

webpack.base.js 配置

{

test: /\.(css|less)$/,

use: [

'style-loader',

'css-loader',

'less-loader',

'postcss-less-loader'

]

}

有兩種轉換方案：

postcss-px-to-viewport

選用該插件對所有的 px 轉換成 vw 視窗尺寸

yarn add postcss-px-to-viewport -D

項目根目錄下建立?postcss.config.js

module.exports = {

plugins: {

"postcss-px-to-viewport": {

viewportWidth: 375, // 視窗的寬度，對應的是我們設計稿的寬度，Iphone6的一般是375 (xx/375*100vw)

viewportHeight: 667, // 視窗的高度，Iphone6的一般是667

unitPrecision: 3, // 指定`px`轉換為視窗單位值的小數位數(很多時候無法整除)

viewportUnit: "vw", // 指定需要轉換成的視窗單位，建議使用vw

selectorBlackList: ['.ignore', '.hairlines'],// 指定不轉換為視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個通用的類名

minPixelValue: 1, // 小于或等于`1px`不轉換為視窗單位，你也可以設置為你想要的值

mediaQuery: false, // 允許在媒體查詢中轉換`px`

exclude: /(node_module)/i // 忽略 UI 組件庫

}

}

}

postcss-plugin-px2rem

這個插件是對所有 px 轉換成 rem 尺寸單位

yarn add postcss-plugin-px2rem -D

postcss.config.js?配置：

module.exports = {

plugins: {

"postcss-plugin-px2rem": {

rootValue: 16,// 配合 rem.js 使用 750 的設計稿

unitPrecision: 5,

mediaQuery: true,

exclude: /(node_module)/i,

selectorBlackList: ['html', 'mp-', 'calendar', 'iconfont'], // 在 rem.js 全局作用下，排除指定的文件的影響

propBlackList: ['border'] // 過濾屬性

}

}

}

需要新建 rem.js 或者直接下載?lib-flexible

const viewportWidth = 750

// 基準大小

const baseSize = 32

// 設置 rem 函數

function setRem() {

// 當前頁面寬度相對于 750 寬的縮放比例，可根據自己需要修改。

const scale = document.documentElement.clientWidth / viewportWidth

// 設置頁面根節點字體大小

document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'

}

// 初始化

setRem()

// 改變窗口大小時重新設置 rem

window.onresize = function () { setRem() }

在入口文件引入:

// App.js

import './utils/rem'

// import "./utils/flexible.js"

EsLint 配置

安裝 eslint 插件

yarn add eslint eslint-plugin-import babel-eslint eslint-plugin-react-hooks -D

根目錄下新建?.eslintrc.js?配置文件

module.exports = {

parser: "babel-eslint",

plugins: [

"react-hooks"

],

rules: {

"react-hooks/rules-of-hooks": "error", // 檢查 Hook 的規則

"react-hooks/exhaustive-deps": "error" // 檢查 effect 的依賴

}

}

React 路由

yarn add react-router-dom react-router-config

使用 react-router-config 來簡化路由配置

新建 routes.js 文件

import Home from "@/pages/Home"

import Me from "@/pages/Me"

import Test from "@/pages/Test"

console.log(typeof process.env.API)

const routes = [

{

path: "/home",

exact: true,

component: Home

},

{

path: "/me",

exact: true,

component: Me

},

{

path: "/test",

exact: true,

component: Test

}

];

export default routes;

根文件 App.js 中引入路由：

import { renderRoutes } from 'react-router-config'

import routes from './routes'

import { HashRouter as Router } from 'react-router-dom'

import Layouts from "./components/Layouts";

function App() {

return (

{renderRoutes(routes)}

)

}

ReactDOM.render(, document.getElementById('root'))

Hooks 開發

Hook 是什么？

Hook 是一個特殊的函數，它可以讓你“鉤入” React 的特性。Hook 只能再 Function Component 里面聲明。

useState

返回一個狀態和一個可以修改狀態的函數?setter

import React, { useState } from 'react';

import { Button } from "antd-mobile";

function User() {

const [user, setUser] = useState('Mondo')

return (

{user}

setUser('imondo.cn')}>改變 State

)

}

useEffect

替代?Class Component中?componentDidMount、componentDidUpdate、componentWillUnmount?等部分生命周期

import React, { useState, useEffect } from 'react';

function User() {

const [user, setUser] = useState('Mondo')

useEffect(() => {

setTimeout(() => {

setUser("js.imondo.cn")

}, 2000)

}, [user]) // 僅在 user 更改時更新

return (

{user}

setUser('imondo.cn')}>改變 State

)

}

useContext

接收一個 context 對象并返回該 context 的當前值。當前的 context 值由上層組件中距離當前組件最近的 的 value prop 決定。當組件上層最近的 更新時，該 Hook 會觸發重渲染。

可用于組件間值傳遞

import React, { useContext } from 'react';

const theme = {

color: "red"

}

const UserContext = React.createContext(theme);

function User() {

...

return (

)

}

function Child() {

const theme = useContext(UserContext);

return (

context

)

}

useMemo

使用格式：useMemo(() => fn, deps)

把“創建”函數和依賴項數組作為參數傳入?useMemo，它僅會在某個依賴項改變時才重新計算 memoized 值。這種優化有助于避免在每次渲染時都進行高開銷的計算。可以當作 vue 中的計算屬性

import React, { useState, useMemo } from 'react';

import { Button } from "antd-mobile";

function User() {

const [user, setUser] = useState(1)

/* 緩存計算屬性 */

const data = useMemo(() => ({

users: (user + 1)

}), [user]);

const onChangeUser = (e) => {

setUser(+e.target.value);

}

return (

{data.users}

setUser(user + 1)}>改變 State

)

}

useReducer

使用格式：const [state, dispatch] = useReducer(reducer, initialArg, init)

它是 useState 的替代方案，在一些場景使用：

state 邏輯較復雜且包含多個子值

下一個 state 依賴于之前的 state

最重要的其實它的寫法和 redux差不多

import React, { useReducer } from "react";

import { Button } from "antd-mobile";

let initCount = 0;

function reducer(state = initCount, action) {

switch (action) {

case "increment":

state++

return state

case "decrement":

state--

return state

default:

throw new Error();

}

}

function User() {

const [count, disaptch] = useReducer(reducer, initCount)

return (

useReducer計數器{count}

disaptch("decrement")}>減

disaptch("increment")}>加

)

}

useRef

返回一個可變的 ref 對象，其?.current?屬性被初始化為傳入的參數

如果想要訪問子組件內的 ref 對象，子組件需要用 class 聲明組件。

import React, { useState, useMemo, useRef } from 'react';

function Parent() {

let [count, setCount] = useState(0)

const childRef = useRef(null)

const childClick = (val) => {

childRef.current.setState({

num: 2

});

}

return (

組件傳值

向子組件傳值

);

}

class Child1 extends React.Component {

constructor() {

super(...arguments);

this.state = {

num: 1

}

}

render() {

const { num } = this.state;

return (

ref 組件{num}

)

}

}

歡迎關注公眾號，大家一起共同交流和進步。

總結

以上是生活随笔為你收集整理的react做h5 例子_从零搭建 React 开发 H5 模板的全部內容，希望文章能夠幫你解決所遇到的問題。

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