前言 如果我们从零开始用webpack + es6来结合react开发前端应用，那势必会在各种webpack配置中消耗大量精力，于是便有了各种脚手架，create-react-app就是其中之一。 对于css modules，在react中，通常用它来避免预料之外样式规则相互覆盖以及实现其他功能。 配置弹出配置文件 如果直接使用create-react-app搭建一个项目，所有的配置文件都被隐藏了，整个目录就先这样 所以，第一步是将所有的配置文件弹出，在根目录运行以下代码...
前言笔者最近在学习使用react，提到react就绕不过去redux。redux是一个状态管理架构，被广泛用于react项目中，但是redux并不是专为react而生，两者还需要react-redux建立一座桥梁。同时，redux架构规定只能发送同步action，要想发送异步action就需要结合中间件如redux-thunk、redux-saga等，所以说要想搞定redux还真是不容易啊，光名词就这么多。笔者以前也接触过一点vuex，vuex对笔者这样的菜鸡相对友好，但是vuex是和vue配套的，...
本文介绍了React组件内事件传参实现tab切换的示例代码，分享给大家，具体如下： 组件内默认onClick事件触发函数actionClick, 是不带参数的,不带参数的写法: 如onClick= { actionItem }带参数的写法, onClick = { this.activateButton.bind(this, 0) }下面是一个向组件内函数传递参数的小例子 需求: 在页面的底部, 有四个按钮, 负责切换内容, 当按钮被点击时, 变为激活状态, 其余按钮恢复到未激活状态分析: 我们首先要创建点击事件的...
自己动手实现一个react-redux之前试过自己动手实现一个redux，这篇blog主要记录动手实现一个react-redux的过程。 这个react-redux还有一点点小瑕疵，我以一个计数器作为例子来实现的。 这是目录结构:这里的connect.js文件就是react-redux。 ├─component │ connect.js │ counter.js │ └─storeindex.jsindex.js： import React from "react"; import ReactDom,{render} from "react-dom"; import Couter from "./componen...
虽然只是一个简单的功能，还是记录一下比较好。页面上有很多个li，要实现点击到哪个就哪个高亮。当年用jq的时候，也挺简单的，就是选中的元素给addClass，然后它的兄弟元素removeClass,再写个active的样式就搞定了。那现在用react要实现类似的操作，我想到的就是用一个currentIndex,通过判断currentIndex在哪个元素实现切换。先上一下效果图：代码：class Category extends React.Component {constructor(props) {super(props)this...
React Native日期时间选择组件：react-native-datepicker，支持安卓和IOS双平台，支持单独选择日期、单独选择时间和选择日期和时间，支持自定义日期格式。 效果图安装方法 npm install react-native-datepicker --save示例代码 <Text style={styles.instructions}>time: {this.state.time}</Text><DatePickerstyle={{width: 200}}date={this.state.datetime}mode="datetime"format="YYYY-MM-DD HH:mm"confirmBtnText="确定"cancelB...
前言：此文需要有一定react，redux基础，具体学习资料请科学上网。 使用create-react-app脚手架 具体基础配置请参考 配合antd组件实现的管理系统demo,线上地址 开发前反思 1. 按需加载 webpack的 import 动态加载的模块的函数，import(参数)，参数为模块地址。 注意： import 后会返回一个promise对象。 import(/components/chart).then(mud => {dosomething(mod) }); 本demo构建了异步加载组件Bundle,具体代码请见 class Bundle e...
本文介绍了react-native 圆弧拖动进度条实现的示例代码，分享给大家，具体如下： 先上效果图因为需求需要实现这个效果图 非原生实现， 难点1：绘制 使用svg难点2：点击事件的处理难点3：封装由于绘制需要是使用svg 此处自行百度 按照svg以及api 教学 视图代码块render() {return (<View pointerEvents={box-only}//事件处理{...this._panResponder.panHandlers}>//实际圆环{this._renderCircleSvg()}// 计算中心距离<Viewstyle={{p...
本文介绍了使用react实现手机号的数据同步显示功能的示例代码，分享给大家，具体如下：要求如下 输入框输入内容数据长度大于0，展示出预览信息光标离开关闭预览信息预览信息每隔4位插入一个特殊字符_,输入内容不变限制长度为13位只允许输入数字（0-9）// Zinput.js import React, {Component } from react; import ./Zinput.css// NOTE: 获取焦点事件 原生onFocus 即可 // NOTE: 离开焦点事件 原生onBlur即可 // NOTE: 输入框数据过...
React Native悬浮按钮组件：react-native-action-button，纯JS组件，支持安卓和IOS双平台，支持设置子按钮，支持自定义位置和样式和图标。效果图安装方法npm i react-native-action-button --save react-native link react-native-vector-icons因为用到了react-native-vector-icons图标组件，需要做下link。如果你项目中已经使用了react-native-vector-icons，那就不需要这步了。 示例代码<View style={styles.container}><Text st...
虽然一直有做 react 相关的优化，按需加载、dll 分离、服务端渲染，但是从来没有从路由代码分割这一块入手过，昨天在本地开发时没有测试成功，今天又搞了下，已经部署到线上环境了，今天就这个记录一下。 修改配置开发环境：webpack@v3 、react-router@v4安装依赖：$ yarn add babel-plugin-syntax-dynamic-import -dev修改 .babelrc 文件：在 plugins 中添加 "syntax-dynamic-import"改造项目代码安装依赖：$ yarn add react-load...
本文介绍了React Native使用fetch实现图片上传的示例代码，分享给大家，具体如下：普通网络请求参数是JSON对象 图片上传的请求参数使用的是formData对象 使用fetch上传图片代码封装如下： let common_url = http://192.168.1.1:8080/; //服务器地址 let token = ; //用户登陆后返回的token /** * 使用fetch实现图片上传* @param {string} url 接口地址* @param {JSON} params body的请求参数* @return 返回Promise */ function up...
React Native 截屏组件：react-native-view-shot，可以截取当前屏幕或者按照当前页面的组件来选择截取，如当前页面有一个图片组件，一个View组件，可以选择截取图片组件或者View组件。支持iOS和安卓。 安装方法 npm install react-native-view-shot react-native link react-native-view-shot使用示例 captureScreen() 截屏方法 截取当前屏幕，跟系统自带的截图一致，只会截取当前屏幕显示的页面内容。如果是ScrollView，那么未显示...
我们在项目中经常会用到HTTP请求来访问网络，HTTP(HTTPS)请求通常分为"GET"、"PUT"、"POST"、"DELETE"，如果不指定默认为GET请求。 在项目中我们常用到的一般为GET和POST两种请求方式，针对带参数的表单提交这类的请求，我们通常会使用POST的请求方式。 为了发出HTTP请求，我们需要使用到 React Native 提供的 Fetch API 来进行实现。要从任意地址获取内容的话，只需简单地将网址作为参数传递给fetch方法即可（fetch这个词本身也就...
不论是React还是React-native，facebook官方都推荐使用ES6的语法，没在项目中使用过的话，突然转换过来会遇到一些问题，如果还没有时间系统的学习下ES6那么注意一些常见的写法暂时也就够用的，这会给我们的开发带来很大的便捷，你会体验到ES6语法的无比简洁。下面给大家介绍es6在react中的应用，具体内容如下所示： import React,{Component} from react; class RepeatArrayextends Component{constructor() { super();}render(){...