REACT - 技术教程文章
react小记【代码】
组件间发通知可以使用observer.pub，其他组件在componentDidMount中observer.sub。在新的react中已经不再使用ref，取而代之的onRef={(node) => this.xxx = node}然后使用this.xxx调用方法。组件间共享数据可以使用redux原文：https://www.cnblogs.com/sunala/p/12576505.html
Vue报错:Property or method "XXX" is not defined on the instance but referenced during render. Make sure that this property is reactive...【图】
在Vue中定义方法或者属性时，因为粗心疏忽可以能会报该错误[Vue warn]: Property or method "search" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.属性或方法“search”不是在实例上定义的，而是在呈现期间引用的。通过初始化该属性，确保该属性是反应性的，无论是在data选...
socket, TCP, select,epoll，Reactor模式
1.TCP流程： 服务端： 客户端: 创建socket---create_socket 创建socket 绑定ip和端口 -- bind 开启监听---listen 调用connect 尝试连接服务器 监听后，调用accept（）与客户端 send / recv 收发数据 ...
react -- 计时器
var SetIntervalMixin = { componentWillMount: function(){ this.intervals = []; }, setInterval: function(){ this.intervals.push(setInterval.apply(null, arguments)); }, componentWillUnmount: function(){ this.intervals.forEach(clearInterval); } }; var TickTock = React.createClass({ mixins: [SetIntervalMixin], getInitialState: function(){ return { seconds: 0 } }, compo...
react入门【图】
一、ReactJS简介React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。ReactJS官网地址：http://facebook.github.io/react/Gi...
前端导出excel文件（react）
前端导出excel（安装xlsx）demo 地址https://sheetjs.com/demo/manifest.html案列1. 将页面的table 元素 变成excel文件并下载import XLSX from "xlsx"createElsx(){ // 获取表格的dom元素 var elt = document.getElementsByTagName(‘table‘)[0]; console.log(elt) // 将表格的dom 元素转化为 excel工作薄 var wb = XLSX.utils.table_to_book(elt, {sheet:"Sheet JS"}); // 将工作薄导出为excel文件 XLSX.wr...
如何使用SAP UI5 web Component的React框架的柱状图和折线图【图】
导入柱状图和折线图：import { BarChart, LineChart } from "@ui5/webcomponents-react-charts"；在自定义的React Component里，为图标创建数据集和数据标签对应的JavaScript数组：最后在React 自定义组件里，直接为LineChart和BarChart这两个标签页维护刚才创建好的JavaScript数组：最后的效果，折线图：柱状图：不出意外，还是通过canvas实现的：要获取更多Jerry的原创文章，请关注公众号"汪子熙":原文：https://www.cnblogs.com...
ReactNative之坑：停在gradle一直出点【代码】【图】
问题：初次安装好React Native 环境后，运行项目，会停留在下载 gradle 的界面一直出点原因：下载gradle一直不成功解决方案：可以根据提示的版本信息，手动下载，放在目录中，修改配置文件，重新启动运行下载地址：http://www.androiddevtools.cn/放置目录：~\HelloProject\android\gradle\wrapper配置文件：~/HelloProject/android/gradle/wrapper/gradle-wrapper.properties修改示例： 1 distributionBase=GRADLE_USER_HOME2 dis...
React 系列教程 1：实现 Animate.css 官网效果【代码】
前言这是 React 系列教程的第一篇，我们将用 React 实现 Animate.css 官网的效果。对于 Animate.css 官网效果是一个非常简单的例子，原代码使用 jQuery 编写，就是添加类与删除类的操作。这对于学习 React 来说是一个非常简易的例子，但是我并不会在教程中介绍相关的前置知识，比如 JSX、ES6 等，对于小白来说可能还会有一些困惑的地方，所以还要了解一下 React 相关的基础知识。虽然 React 有很多值得深究的知识，但这个系列教程并...
React初识【代码】
简介概念一个用于构建用户界面的javascript库特点声明式编程、组件化开发、多平台适配优势由facebook更新和维护，是前端的先驱者，总是在引领整个前端的潮流使用依赖开发react项目必须依赖3个库： react:包含react所必须的核心代码 react-dom:react渲染在不同平台所需要的核心代码 babel:将jsx转成React代码的工具Hello React!<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" co...
React(v16.8) Hooks 简析【代码】【图】
动机在组件之间复用状态逻辑很难,providers，consumers，高阶组件，render props等可以将横切关注点(如校验，日志，异常等)与核心业务逻辑分离开，但是使用过程中也会带来扩展性限制，ref传值问题，“嵌套地狱”等问题;Hook提供一种简单直接的代码复用方式，可以使开发者在无需修改组件结构的情况下复用状态逻辑复杂组件生命周期常常包含一些不相关的逻辑，相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个...
React可以渲染html标签 或React组件【图】
React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。既渲染html标签需要使用小写字母开头的标签名而渲染本地React组件需要使用大写字母开头的标签名注意:由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。 原文：http://www.cnblogs.com/yaomengli/p/7851218.html
解决React 的<img >src使用require的方式图片显示不出来，展示的是[object Module]的问题【图】
代码： <div className="bigPic"> <img src={require(‘../../images/bg.png‘)} /></div> 此时的图片显示不出来 解决方法一、 再导入的图片后加.default即可 <img src={require(‘../../images/bg.png‘).default} />解决方法二、 import imgUrl from ‘../../images/bg.png‘; <img src={imgUrl} /> 原因： 首先 webpack 支持 CommonJS、AMD 和 ES6模块打包。当我们用 单文件写组件时，在 script 标签内使...
子传父(react)【图】
子组件传入父组件的方法，在子组件中调用 原文：https://www.cnblogs.com/dsy886/p/12117180.html
react JSX下包（2）【图】
用法二写需要下包，下完包接着配置 原文：https://www.cnblogs.com/yanghai/p/14384782.html
react项目中使用antd【代码】
1.antd官网：https://ant.design/docs/react/introduce-cn2、React中使用Antd1、安装antd npm install antd --save / yarn add antd / cnpm install antd --save2、在您的react项目的css文件中引入 Antd的css@import ‘~antd/dist/antd.css‘;3、看文档使用：如使用Button： 1、在对应的组件中引入Antd import { Button } from ‘antd‘;2、<Button type="primary">Primary</Button>3、React中使用Antd高级配置...
在项目中怎么使用react【代码】
怎么使用react在网页中引入reactnpm下载后在项目中引入react在网页中引入reactaddReact.html<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="../js/react.min.js"></script><script src="../js/react-dom.min.js"></script><script src="../js/babel.js"></script></head><body><div id="example"></div></body><script type="text/babel" >ReactDOM.render(<h1>hello,react</h1>,document.getEle...
[React] Style a React component with styled-components【代码】
In this lesson, we remove the mapping between a React component and the styles applied to it via classnames. We write our styles directly within the component, in a real CSS syntax, with the full power of JavaScript. Old:import React, { Component } from "react"; import "./App.css";/* ======================= *//* ===== sample data ===== *//* ======================= */ const people = [{ name: "Anna"...
reactjs入门到实战（一）---- jxs详解【代码】【图】
》》》如何转换 JSX transformer Babel 官网：http://babeljs.io/ 里面有一个可以看转换的测试器，es6什么的也可以应用：注意：jsx要用大写 class 、for 、style 、onChange 是不能用的关键词。style使用颜色的时候用 style = {{color:‘red‘,fontSize:20}} 》》》例子二：var Hello = React.createClass({render:function(){return(<span> Hello {this.props.name }!</span>);}});var props = {};props.name = "ch...
js、vue、react实现图片的上传【代码】
使用图片选择组件，选取图片后会获取一个file let param = new FormData();param.append("img", e.file, e.file.name); //第一个参数为后端接收的路径，第二个参数为图片选择插件获取的file文件，第三个为图片文件的路径 传给后端即可原文：https://www.cnblogs.com/uimeigui/p/12755190.html
React绑定事件this指向问题--改变state中的值【代码】
/*** 报错：* Cannot read property 'setState' of undefined* 原因： this指向不一致。btnAddCount中的this 和render中的this* 解决方法：* 方式一： 使用箭头函数 () => { } 箭头函数可以改变this指向，即谁调用，this指向谁* 方式二： 绑定函数时，添加 ‘ .bind(this)’ onClick={this.btnSubCount.bind(this)* * 在 React 里面，要将类的原型方法通过 props 传给子组件，传统写法需要 bind(this)，否则方...
ReactiveX 学习笔记（24）使用 RxCpp + C++ REST SDK 调用 REST API【代码】
JSON : PlaceholderJSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站。 以下使用 Task API/Rx.NET + Json.NET 调用该网站的 REST API，获取字符串以及 JSON 数据。GET /posts/1GET /postsPOST /postsPUT /posts/1DELETE /posts/1所有 GET API 都返回JSON数据，格式（JSON-Schema）如下：{"type":"object","properties": {"userId": {"type" : "integer"},"id": {"type" : "integer"},"...
在windows上搭建react-native的android环境
参考文档：http://facebook.github.io/react-native/docs/getting-started.htmlhttp://reactnative.cn/docs/0.27/android-setup.html#content安装环境推荐chocolatey，非常方便快速需注意的点：nodejs版本需要4.0.0以上模拟器Genymotion比Android studio好用很多，基本不需要配置。相对来说不方便之处在于不同版本的安卓机器需要逐个下载。但是个人觉得还是Genymotion好用些。添加模拟器的时候可能遇到的错误参见http://www.cnblog...
chrome浏览器安装react-devtools插件【图】
1.进入https://github.com/facebook/react-devtools 在自述文件中可以看到如下图提示 扩展的v3的源代码可以在v3分支中找到 2.进入https://github.com/facebook/react-devtools/tree/v3 下载解压文件3.进入react-devtools-3文件夹 运行 npm install 命令4.运行 npm run build:extension:chrome命令 出现如下图5.在chrome浏览器扩展程序中点击加载已解压文件 选择react-devtools-3\shells\chrome\build\unpacked 文件夹即可出现如下图...
从零开始搭建一个react项目【代码】【图】
欢迎加入qq群：36952712如果只是想试试 React，那么建议使用 create-react-app来创建一个react项目。快速开始 因为 create-react-app 和 vue-cli 不一样，create-react-app将webpack的相关配置直接封装好了，所以自定制化程度不高，所以考虑手动构建一个 React项目代码下载准备工作安装node环境。配置cnpm(看个人需求)。准备一个空的文件夹react-demo。初始化工程从这里开始新建一个react工程1. 初始化工程目录1 cd react-demo 2 n...
React 学习推荐
推荐学习一、React 入门实例教程 作者： 阮一峰http://www.ruanyifeng.com/blog/2015/03/react.html原文：http://www.cnblogs.com/qshting/p/5534892.html
React+Webpack+Webstorm开发环境搭建【代码】【图】
需要安装的软件node.jsnpm包管理Webstorm由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npmnodejs(包含npm)安装在默认路径C:\Program Files\nodejs比较好，也不是很大Webstrom安装完成后，在打开的 License Activation 窗口中选择 License server。在输入框输入网址：http://idea.iteblog.com/key.php最后点击 Activate 构建项目和安装依赖包使用webstorm新建一个空白项目打开控制台，在控制台里输入npm init 命令来初始...
react：Hook简介【图】
1，hook 采用了js的闭包特性，可以在函数内 调用state。2，useState 运用的是数组结构的方式定义变量。 原文：https://www.cnblogs.com/maoli-demo/p/14098205.html
react使用代理解决跨域问题【图】
在package.json中配置 然后出现 解决方案： 在package.json中查看react-scripts的版本号 ，版本太高了不支持，把node_modules/react-scripts删除了 重新安装 npm i react-scripts@1.1.1 原文：https://www.cnblogs.com/guanpingping/p/10344197.html
航遇项目react踩坑【代码】【图】
1.iconfont应用: a.正常用法如下<span className=‘iconfont‘ > iconfont的代码，例如: </span> b.react不能动态渲染iconfont标签,需如下处理,icon为形参<i dangerouslySetInnerHTML={{__html: icon}} className={‘iconfont‘} /> c.引入项目中：需要在项目中复制iconfont的地址代码,类似如下的地址，官网生成@font-face {font-family: ‘iconfont‘; /* project id 413196 */src: url(‘//at.alicdn.com/t/fo...