REACT - 技术教程文章
React—Native开发之原生模块向JavaScript发送事件【图】
首先，由RN中文网关于原生模块（Android）的介绍可以看到，RN前端与原生模块之间通信，主要有三种方法： （1）使用回调函数Callback，它提供了一个函数来把返回值传回给JavaScript。（2）使用Promise来实现。（3）原生模块向JavaScript发送事件。其中，在我的博客React-Native开发之原生模块封装（Android)升级版 较为详细的阐述了如何使用回调函数Callback来将数据传向JavaScript 端。 但是有一个比较难以解决的问题是： ...
react-router
路由配置 react 中路由的配置其实和vue基本上是一样的，首先引入需要的依赖模块 例如：import { Router, Route, BrowserHistory, Link } from ‘react-router‘ render(( <Router history={BrowserHistory} <IndexRoute component={Login}/> <Route path="/" component={App}> <Route path="about" component={About} /> <Route path="...
前端两大框架 vue 和 react 的区别
1. 设计思想 vue： vue的官网介绍说vue是一种渐进式框架，采用自底向上增量开发的设计； react： 采用函数式编程，推崇纯组件，数据不可变，单向数据流；2. 编写语法 vue： 采用单文件组件格式，保留了html，css，js分离的写法； react： 通过jsx渲染模板，html，css全部写入js中；3. 构建工具 vue： 提供cli脚手架，可以非常容易的创建项目并进行配置； react： 使用creat-react-app，有局限行，不能完成某些配...
从零配置webpack(react+less+typescript+mobx)【代码】
本文目标从零搭建出一套支持react+less+typescript+mobx的webpack配置 最简化webpack配置 首页要初始化yarn和安装webpack的依赖 yarn init -y yarn add webpack webpack-cli -D 根目录下新建webpack.config.js文件，内容如下 const path = require(‘path‘);module.exports = {mode: ‘development‘,// 入口 这里应用程序开始执行entry: path.resolve(__dirname, ‘src/index.tsx‘),// 出口 output: {// 输出文件的目标路径...
工作方向转变—— React Native For Android【图】
既然选择了北漂，如果不玩命，就被命运玩。最近，Fackbook将自己的著名的框架React Native，宣称支持了Android了。根据公司和朋友的推荐，个人机会在2015年的剩下时间用来研究使用此框架，来完成自己的业务。希望了解熟此框架的大神给予我多多指点。为什么要使用此框架？下面引入自新闻报道开源已是大势所趋，连习惯专有化的巨头也发现了它的力量。Facebook 是其中最积极之一，近几年陆续开源的项目已有 30 多个。刚刚社交巨头又在...
包建强的培训课程（14）：Android与ReactNative
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css); yle> v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} <![endif]-->l>Normal0f...
React-Native 十：版本升级
更新版本的React Native将会让你访问更多的APIs， 这样我们可以去使用更多的APIs,视图Views，以及开发者工具以及其他一些好用的东西。浏览版本更新日志就会发现整体FB官方开发进度还是非常紧张的，这样就很容易导致旧版本会出现不能用的情况，后期可能会出现不可预料的情况，这边建议大家尽量更新最新正式版本。我们大家都知道一个React Native项目使用Android项目,iOS项目和JavaScript项目三部分进行组成的，而且三者都关联打包在...
[Redux] Generating Containers with connect() from React Redux (AddTodo)【代码】
Code to be refacted:const AddTodo = (props, { store }) => {let input;return (<div><input ref={node => {input = node;}} /><button onClick={() => {store.dispatch({type: ‘ADD_TODO‘,id: nextTodoId++,text: input.value})input.value = ‘‘;}}>Add Todo</button></div>); }; AddTodo.contextTypes = {store: React.PropTypes.object }; Instead of passing:const AddTodo = (props, { store }) => {We can only pass ‘...
react 子组件访问父组件的方法
回调函数（推荐） 地址：https://ourcodeworld.com/articles/read/409/how-to-update-parent-state-from-child-component-in-react获得父组件的实例（不推荐）var parent = this._reactInternalInstance._currentElement._owner._instance; 地址：https://stackoverflow.com/questions/34257665/is-there-any-way-to-access-the-parent-component-instance-in-react原文：https://www.cnblogs.com/cag2050/p/9068533.html
JavaScript之jsx&react【代码】
1.Virtual DOM 1.将网页所有内容映射到一颗树形结构的层级对象模型上，浏览器提供对dom的支持，用户可以是用脚本调用dom，api来动态修改dom节点，从而达到修改网页目的，这种修改是浏览器完成的，浏览器会根据dom的改变重新绘制改变的dom节点部分 2.修改dom重新绘制渲染的代价太高，前端框架为了提高效率，尽量减少dom的重绘，提出了Virtual DOm，所有的修改都是在Virutal DOM上进行的，通过比较算法，找出浏览器dom之间的差别，使...
React 懒加载组件【代码】
//组件第一次初始化的时候加载. import React, {PropTypes} from ‘react‘;//import AppComposer from ‘./views/App/AppComposer‘; //import LoginComposer from ‘./views/Login/LoginComposer‘; //import HomeComposer from ‘./views/Home/HomeComposer‘; //import WatchListComposer from ‘./views/WatchList/WatchListComposer‘; //import SystemLogComposer from ‘./views/SystemLog/SystemLogComposer‘; //import ...
ES6+React+Webpack初步构建项目流程【代码】【图】
当我们打算使用Webpack构建工具，React和ES6来开发项目的时候，构建这么一套自动化的项目的流程见下： 第一步：webpack是一个基于node的项目，我们使用命令行对webpack进行全局的安装npm install webpack –g。可以通过webpack –h来查看安装的版本信息。然后我们新建一个文件夹用来存放整个项目文件。为了可以在项目中使用webpack，我们需要将webpack安装到当前的项目依赖中，在新建的文件夹下输入：npm init（安装webpack依赖，...
React Native之获取通讯录信息并实现类通讯录列表(ios android)【代码】【图】
React Native之获取通讯录信息并实现类通讯录列表(ios android)一,需求分析 1,获取通讯录信息,筛选出通讯录里有多少好友在使用某个应用。 2,获取通讯录信息,实现类通讯录,可拨打电话 发短信等。二,技术介绍与配置 2.1 技术介绍 1,react-native-contacts地址:https://www.npmjs.com/package/react-native-contacts 2,下载安装：npm install react-native-contacts --save 3,自动链接：react-na...
react手动搭建
创建一个项目名：全局安装webpackcnpm install -g webpack-dev-server1.cnpm init 初始化2.cnpm i webpack webpack-dev-server -D3.cnpm install babel-loader babel-core babel-preset-env -D之后在项目下创建应有文件：static文件夹下的index.html，<div id="toor"></div> src文件夹，static静态文件夹，dist输出文件夹，webpack.config.js配置文件：const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);module.export ...
【React Native】某个页面禁用物理返回键【代码】
1、引入组件import {BackHandler,} from ‘react-native‘; 2、添加监听componentDidMount(): void {BackHandler.addEventListener(‘hardwareBackPress‘,this.onBackButtonPressAndroid);} 3、监听方法onBackButtonPressAndroid = () => {if (this.props.navigation.isFocused()) {if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {//最近2秒内按过back键，可以退出应用。returnfalse;}this.lastBack...
ReactNative-地图导航-iOS【代码】
需求描述项目中，要求接入导航功能，包括“百度map、高德map”。 方案分析原生开发角度分析从原生开发的角度分析的话，常规的思路可能是分别取百度、高德官网，下载对应的SDK然后集成到本地；创建对应的MapView，参照文档完成导航功能；MapView对外开放参数，由调用者传入，MapView内部利用参数，最终实现导航MapView提供【退出】操作也可以是这样分别取百度、高德官网，查看调起“百度地图APP、高德地图APP”的方法；创建MapViewT...
react懒加载组件--react-lazyload【代码】
安装：npm install react-lazyload --save-dev 使用：//引入 import LazyLoad from ‘react-lazyload‘;//render中使用 render(){<LazyLoad height={200}><img src="tiger.jpg" /></LazyLoad> } 原文：https://www.cnblogs.com/wuhairui/p/9197511.html
TCG开发日志（2）从零开始，ReactJS的Helloworld
ReactJS是今年很流行的前端框架，我以前做兼职的时候写过一个用PHP+Smarty+HTML+JQUERY的小网站，当时只是感觉JQuery是一个用起来很方便的库，但是React完全不同，所有的写法都变了，组件化的开发过程也很流畅，代码管理也方便。 那么当然先要安装React，在工程目录下：npm install react --savenpm install react-dom --save显然我要使用ES6，所以还有一套Babel，其中，比起服务端，特别需要添加这个插件：npm install babel-plug...
React中父子组件传值【代码】【图】
一.首先我们先来看父组件向子组件传值1.1 我们要明白父组件 --> 子组件 是通过props这个属性来传值的我们来看父组件的代码 1 import React from ‘react‘; 2 import Son1 from ‘./Son1‘;3class Father extends React.Component{4 constructor(){5 super();6 7 }8 render(){9return( 10 <React.Fragment> 11 {/* 我们在这里引入子组件 并声明一个属性str 给他传一个hello */} 12 ...
React、Redux、React-Redux学习【代码】
React 是什么用脚本进行DOM操作的代价很昂贵。有个贴切的比喻，把DOM和JavaScript各自想象为一个岛屿，它们之间用收费桥梁连接，js每次访问DOM，都要途径这座桥，并交纳“过桥费”,访问DOM的次数越多，费用也就越高。 因此，推荐的做法是尽量减少过桥的次数，努力待在ECMAScript岛上。因为这个原因react的虚拟dom就显得难能可贵了，它创造了虚拟dom并且将它们储存起来，每当状态发生变化的时候就会创造新的虚拟节点和以前的进行对比...
react-router 4.0的初探
react-router 升级4.0以后 出现了 ‘react-router-dom‘引入时要import {BrowserRouter, Route} from ‘react-router-dom‘;<Provider store={store} key="provider"> <BrowserRouter history={history} onUpdate={() => window.scrollTo(0, 0)}> <Root /> </BrowserRouter> </Provider>, document.getElementById(‘root‘)); root.js页<div> <Route path="/" component={Loader}/> ...
在Windows下搭建React Native Android开发环境【代码】【图】
安装JDK从Java官网下载JDK并安装。请注意选择x86还是x64版本。推荐将JDK的bin目录加入系统PATH环境变量。安装Android SDK可以单独安装Android SDK，也可以通过Eclipse ADT或者Android Studio一并安装。推荐使用Android Studio，以下说明会默认以Android Studio的方式说明。请注意选择x86还是x64版本。为了加速下载，推荐从AndroidDevTools下载。然后进入SDKManager(可通过Android Studio菜单Tools-Android-SDK Manager)，确保以下项...
聊聊React的路由React-Router、react-router-dom【代码】
关于二者的区别参见：https://github.com/mrdulin/blog/issues/42 直接使用react-router-dom好了，react-router-dom封装了react-router，也依赖react-router-dom BrowserRouter vs HashRouterimport { BrowserRouter as Router } from‘react-router-dom‘; // import { HashRouter as Router } from ‘react-router-dom‘;建议使用BrowserRouter, url类似http://127.0.0.1:8088/api/v1/test，HashRouter慢慢会被废弃，url类似h...
react 的核心思想 【声名式】Declarative 的理解
正如 react 官网首页里写的 它推崇 声明式编程，而非 命令式那怎么样的 方式 式 声名式的呢？举例我的理解：需求：打开一个 Modal例子1命令式： Modal.open(); // 翻译:命令 modal执行：打开声明式：<Modal open={true}> // 翻译:声明modal的状态为：打开例子1的理解应用：命令式 在react中，就等于，Modal的 父组件 需要 获取Modal并且 操作 Modal的open方法，这中方式式 极力反对 声明式 在react中，就等于，父组件 传递 props ...
【共享单车】—— React后台管理系统开发手记：项目准备【代码】
前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。一、项目概述 React全家桶React基础知识、生命周期Router 4.0 语法讲解Redux集成开发 AnD UI组件最实用基础组件AntD栅格系统ETable组件封装BaseForm组件封装表格内嵌单选、复选封装 公共机制封装Axios请求插件封装API封装错误拦截权限、菜单封装日期、金额、手机号封装....
react withRouter和connect 同时使用的案例【代码】
在react中，如果遇到redux的connect 和 一般组件跳转的withRouter 同时使用... import React from ‘react‘; import {connect} from ‘react-redux‘ import { withRouter } from "react-router-dom";class MyHeader extends Component {}const mapStateToProps=(state)=>{return {} };const mapDispatchToProps = (dispatch) => {return {}; }; //连环嵌套 export default connect(mapStateToProps, mapDispatchToProps)(withRo...
如何开发由Create-React-App 引导的应用（四）【代码】【图】
此文章是翻译How to develop apps bootstrapped with Create React App 官方文档系列文章如何开发由Create-React-App 引导的应用如何开发由Create-React-App 引导的应用（一）如何开发由Create-React-App 引导的应用（二）如何开发由Create-React-App 引导的应用（三）Advanced Configuration你可以通过在shell中设置环境变量或.env来调整各种开发和生产设置。VariableDevelopmentProductionUsageBROWSER默认情况下，Create React ...
初学Reactjs【代码】
Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.初学Reactjs 遇到了这个问题 该如何解决？ 花点时间 记录一下页面：<html> <head> <script src="/bundle.js"></script> </head> <body> </body> </html>js:/** @jsx React.DOM */ ‘use strict‘;var React = require(‘react‘);var App = React.createClass({ render() { return <h1>Yo</h1>; } });React.ren...
React【代码】
IntroductionVirtual Dom单向数据流Quick StartUsageHelloWorldSetup开发环境搭建WebpackProject Structure项目结构Integrated With AngularJSXTransferJavaScript Expressions属性表达式Boolean AttributesChild ExpressionsCommentsComponentsLifeCycleInitial RenderProps ChangeState ChangeComponent UnmountPropsgetDefaultPropsAttributeschildrenValidationStateProps与State对比Interactivity and Dynamic UIsReactfindDO...
react-router4.x【代码】
react-router的4.X版本的方法引入和网上常见教程有了一些区别，建议最好看官网文档Link的引入import { Link } from‘react-router-dom‘ <Link to="/about">About</Link>Router的引入import { Router } from ‘react-router‘ import createBrowserHistory from ‘history/createBrowserHistory‘const history = createBrowserHistory()<Router history={history}><App/> </Router> Route的引入import { BrowserRouter as Router,...