REACT - 技术教程文章
VSCode 安装 React 项目
1 下载nodejs 安装 (此时npm 和 node环境都已经装好)2 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org3 安装git 3 创建一个放置项目的目录，右键选择 Git Bash Here 打开git 输入： npm install -g create-react-app 4 安装完 create-react-app 之后 继续输入 create-react-app my-app6 cd 项目名 下面继续执行 npm start 检测当前项目是否创建成功 正常情况下当输入命令之后 会直接打开默认...
《深入浅出React和Redux》(1) - React基础【代码】
create-react-appReact技术依赖的技术栈比较多，比如，转译JavaScript代码需要使用Babel，模块打包工具要使用Webpack，定制build过程需要grunt或者gulp。create-react-app命令可以免去配置这些技术栈的麻烦，自动生成一个基本的react-app模版项目，让开发者可以基于这个模版快速开始React应用的开发。 首先要安装create-react-app命令：npm install --global create-react-app 然后就可以创建了：create-react-app <app-name> 组件...
react解决roadhog buildDll 【转】【图】
本地删了 node module 目录，重新安装的时候，提示找了找，可如下解决-------转自： https://www.cnblogs.com/huhanhaha/p/7605722.html 这个问题和react版本问题有关，解决办法npm run build:dll原文：http://www.cnblogs.com/jshare/p/7873717.html
谈谈APP架构选型：React Native还是HBuilder
原文链接导读：最近公司的一款新产品APP要进行研发，老大的意思想用H5来做混合APP以达到高效敏捷开发的目的。我自然就开始进行各种技术选型的调研，这里重点想说的是我最后挑选出的2款hybrid app开发技术方案：RN(react native)，HBuilder。React Native是大名鼎鼎的Facebook的开源技术框架，而HBuilder是国内的H5工具开发公 司DCLOUD的产品。我自己先总结下吧：这两个技术框架在开发效率上基本上可以媲美WEB开发的速度，RN强调的是...
SAP UI5 Web Component for React的图标和图片处理【图】
这个React应用左上角的react图标，以及右上角的小人图标，是如何显示出来的？把图片放到React应用的public文件夹下：在React应用的ShellBar组件里，将图片名称赋给对应的logo和profile属性即可：运行时的实现：要获取更多Jerry的原创文章，请关注公众号"汪子熙":原文：https://www.cnblogs.com/sap-jerry/p/12303005.html
React对比Vue（发现一个神奇的地方在对数组进行增加删除的时候)【图】
@1===》发现一个神奇的地方在对数组进行增加删除的时候 react中一个输入框点击enter键，然后数组push，然后渲染<input ref=‘valInput‘ onKeyUp={this.sureEnter}></input>还必须拆开来写这么写是不对的必须拆开一步一步来写,日了狗了，删除也是 *********************************************************************************************************************************************************@2===》封装公共方法...
配置react+webpack+es6中的一些教训【代码】
1.要用es6,因为目前浏览器的支持情况，那么肯定需要插件将e6的代码转换成es5，我用的是babel-loader，事实证明使用6.x版本似乎是不行的，我换成5.3.2之后就成功了。2.webpack.config.js配置文件中，配置loader的时候，我从网上博客中copy的loader: ‘babel-loader!jsx-loader?harmony‘ 不知道是语法错误还是本身不通，编译时会报错改成仅用babel-loader 错误解决 有空整理一下配置步骤发出来。原文：http://www.cnblogs.com/t...
react状态管理器之mobx【代码】
react有几种状态管理器，今天先来整理一下mobx状态管理器，首先了解一下什么是mobx 1、mobx成员: observable action 可以干嘛： MobX 的理念是通过观察者模式对数据做出追踪处理，在对可观察属性作出变更或者引用的时候，触发其依赖的监听函数；整体的store注入机制采用react提供的context来进行传递 怎么用: 定义类 @observable 装饰store类的成员，为被观察者 @action 实例方法, 修改状态，同步异步都修改，不...
React.js 新手教程【图】
正如你能从标题猜到的，这篇文章的目标是给那些有很少编程经验的读者的。比如，像我这样的人：因为迄今为止，我才探索了编程世界6个月。所以，这将是一篇新手村教程！ 你只需要拥有对 HTML 和 CSS 的理解，以及基本的 JavaScript（JS）知识就能看懂本文。注意：在接下来的例子中，我们将会利用 ES6 提供的新能力，来简化写 JS 代码的过程。然而，你也能完全使用 ES5 来写 React。预计阅读时间9分钟什么是 React ？React 是一个 JS ...
React Context【图】
【React Context】1、Why Not To Use Context The vast majority of applications do not need to use context. 大多数应用不需要使用context。 If you want your application to be stable, don‘t use context. It is an experimental API and it is likely to break in future releases of React. context是一个Experimental API，在未来可能会失效。 It is far more likely that Redux is the right solution t...
react 随笔3【代码】
1、ref的3种使用方式 1）字符串的方式 2）回调函数（推荐） 3）React.createRef() (react16.3新提供的方式)1、字符串的方式 class DOM extends React.Component{constructor(props){super(props);this.myRef = React.creatRef() //React.creatRef()方法 }func = () =>{//console.log(this.refs.demoInput.value) //字符串的方法//console.log(this.textInput.value) //回调函数的方法console.log(this.myRef...
源码分析-react2-根节点渲染【代码】【图】
//FiberNode{alternate : ‘通过该属性和后面的切片进行比较‘,child : ‘改切片的子切片‘,firstEffect : ‘当前要加入的切片‘,stateNode : ‘当前切片的基本信息‘ } // Fiber对象 原文：http://www.cnblogs.com/jiebba/p/8011965.html
ReactNative: 使用AppState的API获取App的状态【代码】
一、简介App在运行的整个过程中，它会有不同的运行状态，例如激活失活状态、前后台进入和离开状态等。开发者可以根据App的不同状态选择合适的时机完成需要的工作。ReactNative中提供了AppState这个API来告知App的状态，它还可以通知状态的改变、甚至用于消息通知的推送等。 二、APIAppState提供了一个属性来获取当前App的状态。//App的当前状态 AppState.currentStateAppState提供了两个静态方法分别用来添加和移除事件监听//添加事...
Node升级 启动RN报错：react-native启动时红屏报错：Unable to load script.Make sure you're either running a metro server or that【代码】【图】
1、 项目中在android/app/src/main/创建文件夹 assets 2、项目中执行命令 1、 项目中在android/app/src/main/创建文件夹 assets 2、项目中执行命令react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res 重点就是 如果启动还报错 解决办法:修改node_modules\metro-config\src\defau...
react的类型检查PropTypes自React v15.5起已弃用，请使用prop-types【代码】
最近使用React的类型检查PropTypes时，遇到错误：TypeError: Cannot read property ‘array‘ of undefined看了下自己的React版本： "react": "^16.2.0",google搜了下，原来：react的类型检查PropTypes自React v15.5起已弃用，请使用prop-types使用方法参考：https://doc.react-china.org/docs/typechecking-with-proptypes.html import PropTypes from ‘prop-types‘;MyComponent.propTypes = {// 你可以将属性声明为以下 JS ...
注册IRP_MJ_SHUTDOWN事件 基于ReactOS0303
系统关闭时，会向注册SHUTDOWN事件的设备驱动发送IRP_MJ_SHUTDOWN事件。NTSTATUS STDCALL NtShutdownSystem(IN SHUTDOWN_ACTION Action) {if (Action > ShutdownPowerOff)return STATUS_INVALID_PARAMETER;Status = PsCreateSystemThread(&ThreadHandle,THREAD_ALL_ACCESS,NULL,NULL,NULL,ShutdownThreadMain,(PVOID)Action); }VOID STDCALL ShutdownThreadMain(PVOID Context) {IoShutdownRegisteredDevices(); }VOID NTAPI IoShu...
React图片预览组件，支持缩放、旋转、上一张下一张功能【代码】【图】
1、功能需求：由于项目业务需要一个图片预览的功能，又不想引入太多组件依赖，所以决定自己编写一套，实现了图片放大缩小、旋转、查看下一张或上一张图片功能，如图1.0截图所示。2、外部资源：这里的icon图标采用的是 iconfont 里面的图标，自己可以自行寻找自己喜欢的图标代替，或者使用默认的图标，默认的图标css地址为https://at.alicdn.com/t/font_1966765_c473t2y8dvr.css3、功能说明：该组件支持鼠标滚轮放大缩小及esc关闭功...
echars配置案例-reactnative【代码】【图】
option = {backgroundColor:‘#fff‘,grid: {left: ‘3%‘,right: ‘4%‘,top:20,bottom: ‘6%‘,containLabel: true},xAxis: {type: ‘category‘,boundaryGap: true,data: ["06-25", "06-26", "06-27", "06-28", "06-29", "06-30", "07-01"],//轴上文字 axisLabel: {interval: 0,textStyle: {fontSize: 12,color: ‘#898989‘}},//轴上刻度标签 splitLine: {show: false},//轴上的ke axisLine: {show...
2019JAVA最新课程-React从入门到实战（新）
1.准备工作 可以在yunp.top网站看webpack，node/npm，cnpm的相关使用视频教程 react有两种使用方式，一是在现有网站中添加；二是创建一个全新的 官网创建全新一个react app步骤 1.npx create-react-app my-app 2.cd my-app 3.npm start （待定，熟悉react项目里的文件作用与架构）2.JSX语法 原文：https://www.cnblogs.com/cascle/p/12090686.html
06/react路由【代码】
01-Context-<div id=‘root‘></div><script src="./react.js"></script><script src="./react-dom.js"></script><script src="./babel.min.js"></script><script type="text/babel">//context作用避免每一层手动传props class App extends React.Component{render() {return(<div><div>)}}ReactDOM.render(<App />,document.getElementById(‘root‘))</script>02-react-router-<!--v4的react Router插件，react-router-dom单...
React Native 之极光推送jpush-react-native 手把手配置【代码】【图】
这是 react native 配置极光推送使用的组件，比较常用https://github.com/jpush/jpush-react-native 先把组件地址贴出来，方便大家使用参考。如果这个大家不能配置成功，欢迎大家一起入坑交流，有问题联系 QQ379038610（添加备注说明原因） 不扯没用的，还要洗洗睡觉，直接把自己配置iOS极光的步骤给大家贴出来 1，首先大家项目环境，签名证书什么都配置完毕，开始集成推送的前提下 在项目当前目录执行： npm instal...
函数响应式编程及ReactiveObjC学习笔记 (二)【代码】
之前我们初步认识了RAC的设计思路跟实现方式, 现在我们再来看看如果使用它以及它能帮我们做什么One of the major advantages of RAC is that it provides a single, unified approach to dealing with asynchronous behaviors, including delegate methods, callback blocks, target-action mechanisms, notifications, and KVO.官方是这样说的, RAC为我们提供了简单便捷实现代理 / block回调 / 事件 / 通知 / KVO的方式 我们先看R...
React Native开发之npm start加速【代码】【图】
在Windows下好不容易安装好React Native环境之后，运行npm start，结果就是无限被等待，快的话160秒（将近3分钟啊。。。。）而Mac下因为有watchman所以是飞一样的速度，1秒不到，一般几十到几百毫秒。此处一千一万只草泥飞在胸中奔腾… 所幸找到一个解决方案了，能让npm start也飞起来（500毫秒左右），操作步骤如下：1、安装watchman，在Windows下暂时处于alpha版本但是可以使用，是一个zip包 https://facebook.github.io/watchma...
React的性能优化【代码】【图】
React的更新流程如下，我们可以有两种优化角度1、props/state变化--->render函数变化这个阶段，减少render的执行次数2、新旧DOM树进行diff--->计算出差异进行更新，减少差异的内容 一、减少render的执行次数1、类式组件(1) shouldComponentUpdate 当props或者state更新时，render函数就会重新执行，此时我们可以通过生命周期 shouldComponentUpdate来控制是否需要render重新执行，当不写这个生命周期时，React内部决定render是...
Facebook React Native 初探【图】
这周末参加了UPYUN的移动沙龙，就提到了React Native,今天就写一篇教程。首先要配置环境，如果没有就执行下面的工作。1.安装Homebrew打开终端ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"2.安装nodebrew install node3.安装brew install watchman4.安装brew install flow5.执行npm install -g react-native-cli6.现在cd到你工程所处的文件位置－－AwesomeProject这个就是你要创建的...
React项目（垃圾分类后台管理）【图】
1.项目搭建1.项目初始化 npm install create-react-app -g //全局安装脚手架 create-react-app 项目名 //创建项目 2.antd npm install antd --save3.路由 npm install react-router-dom --saveantd测试 路由测试 路由分为两类：1.直接可访问的（登录页面、404页面...）2.需要登录后才能访问的（垃圾管理页面、用户信息页面....） 在入口文件中重新配置路由 或用结构赋值 当我们访问...
react简单学习路线（实用版）
学习一门新的技术之前有必要了解一下该技术在专业领域的评价，使用的领域，以及整体的学习路线，总之尽可能多的在入坑之前了解相关方面的信息。不要什么都不去查就直接学了，这个是很愚蠢的！！！！！首先来看一篇文章，它简单讲解了学习react的流程，确实很有帮助，看完之后再开始你的学习，这样会避免走很多的弯路。http://www.jianshu.com/p/ed55b366cd96 接下来可以去http://www.runoob.com/react/react-tutorial.html 这个地方...
Next.js+React聊天室|Next仿微信桌面端|next.js聊天实例【代码】【图】
一、项目介绍next-webchat 基于Next.js+React.js+Redux+Antd+RScroll+RLayer等技术构建的PC桌面端仿微信聊天项目。实现了消息/表情发送、图片/视频预览、拖拽/粘贴图片发送、红包/朋友圈等功能。二、技术实现技术框架：next.js+react.js+redux+react-reduxUI组件库：Antd (蚂蚁金服pc端react组件库)字体图标：阿里iconfont图标库弹窗组件：RLayer（基于react.js封装自定义弹窗）虚拟滚动：RScroll（基于react.js自定义美化滚动条）...
关于React的入门级安装和最浅显解释
春节临近，办公室里半片空位，半片浮嚣。想到将放假，屏幕上的代码也都变成了雀跃的小虫。无法专心了。终于还是强迫自己读了半篇文档，写了几坨程序。这次记录的是关于React，最浅显的内容。 ———— 我是望眼欲穿的分割线 ———— Step 1：npm init按照向导填写各个字段，最后生成package.json文件。容易出错的是：name的值不要和包包同名。比如我们后续需要使用npm安装几个包包：browserify react reactify ...则name值如果写作...
react和vue项目快速搭建
react项目快速搭建 1.安装node环境: 下载地址：https://nodejs.org/zh-cn/download/ 2.打开终端 3.安装yarn或者cnpm, 这里以cnpm 为例，输入命令行: npm install cnpm -g --registry=http://registry.npm.taobao.org 4.安装create-react-app，输入命令行： cnpm install -g create-react-app 说明：这里安装在全局中，安装一次就可以了。 5.创建react项目，输入命令行： create...