react做h5 例子_从零搭建 React 开发 H5 模板
项目创建
创建项目文件夹
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 (
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 (
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 (
)
}
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 (
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 (
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 (
)
}
}
欢迎关注公众号,大家一起共同交流和进步。
react做h5 例子_从零搭建 React 开发 H5 模板相关推荐
- react安装_超全面详细一条龙教程!从零搭建React项目全家桶(上篇)
React是近几年来前端项目开发非常火的一个框架,其背景是Facebook团队的技术支持,市场占有率也很高.很多初学者纠结一开始是学react还是vue.个人觉得,有时间的话,最好两个都掌握一下.从学 ...
- 从零搭建React全家桶框架教程
从零搭建React全家桶框架教程 源码地址:https://github.com/brickspert/react-family 欢迎star 提问反馈:blog 原文地址:https://githu ...
- 2023新春版:看这篇大宝典就够了!从零搭建React项目全家桶
React是近年来前端开发领域非常热门的技术框架,其背景是Facebook团队的技术支持,在全球的前端开发市场上占有率很高.结合React丰富的社区资源,可以让项目开发如虎添翼.虽然React的学习门 ...
- 一台新电脑从零搭建iOS开发环境
拿到一台新电脑从零搭建iOS开发环境,对于我们这些开发老鸟来说,可能并不陌生. 但实操时,要安装哪些东西可能到用到时才能想到.一些软件的下载命令.网址还要一个个搜索.这篇文章就是解决这个问题.从零搭建 ...
- react做h5 例子_使用React写一个网站的心得体会
网站是毕业设计的作品,开发这个网站的目的主要用于记录一些笔记,以及聚合一些资讯信息,也算自己在网络世界中的一块静地吧,可以在这里一些技术上想法的实践. 网站最初前端使用vue开发,在前段时间由于项目的 ...
- python h5开发_从零搭建移动H5开发项目实战
从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代,前端技术无疑统治了大多数用户的交互界面!而在移动为王的今天,NA开发在早期占领了大多数用户的交互界面,后来逐渐的前端H5开发找到了自己的 ...
- 吃透这套架构演化图_从零搭建Web网站也不难!
摘要: 前言 工作也有几多年了,无论是身边遇到的还是耳间闻到的,多多少少也积攒了自己的一些经验和思考,当然,博主并没有太多接触高大上的分布式架构实践,相对比较零碎,随时补充.俗话说得好,冰冻三尺非一日 ...
- react启动命令_十分钟搭建React开发环境
React是facebook开源的js库,主要用于构建UI,它采用声明式的设计,通过虚拟dom,提高程序执行效率,并且实现了UI的响应式更新,目前react在前端项目中有着广泛的应用,本文主要讲解如何 ...
- 自己搭服务器 做购物网站成本,从零搭建一个购物网站,实操经验
对于很多不懂代码不懂技术的人来说,想要搭建自己的购物网站非常的困难.难道不懂计算机基础,不会写代码就真的不能进行购物网站开发了吗?事实上并非如此.接下来HiShop小编就跟大家分享一下,如何从零搭建一 ...
- 从零搭建react + webpack项目
初始化项目 mkdir my-react cd my-react npm init 安装 webpack npm install webpack webpack-cli --save-dev 最简单的 ...
最新文章
- javaSE基础知识 1.5整数类型
- TCP/IP协议分析
- c语言信号灯作用,交通信号灯对交通领域的作用与影响
- LwIP 之三 操作系统隔离接口 sys_arch
- eclipse将java工程转换为java动态web工程(工程转换均可参照)
- 通过Java反编译揭开一些问题的真相
- SVM基本思想及入门学习(转载+自己解释为什么minL(w)变成minmaxL(a,w))
- 人工智能秘史(三):为什么图灵希望AI犯错?
- hive表定义(3种方式)
- 一些有用的SQL Server函数
- C#LeetCode刷题之#169-求众数(Majority Element)
- 「代码随想录」62.不同路径【动态规划】详解!
- CS游戏控制台命令大全(来自网络)
- Python语言程序设计(嵩天老师版)第二周代码解析
- 曲奇云盘资源搜索引擎_曲奇云盘下载-曲奇云盘资源共享群组下载_快啦网
- win7家庭版和旗舰版区别_Windows系统的家庭版、专业版、旗舰版,都有什么区别?...
- 邮件中的抄送和密送的区别
- 【python绘图】seaborn(sns)的主题风格
- 技术篇(二)Demo示例——Bundle打包和加载
- win10计算机属性管理打不开,win10无法打开设置应用的两种解决方法【图文】