REACT - 技术教程文章
React-脚手架【代码】【图】
1. Node和NPM 版本 2. 脚手架在对React比较熟悉之前，为了避免陷入到开发工具的繁琐配置中，借助react官方提供的脚手架工具Create React App来搭建React应用npx create-react-app my-react创建一个react应用，根目录文件夹名为my-react.原文：https://www.cnblogs.com/pangkang/p/11594834.html
React（八）CSS【代码】
（1）内联样式注：样式要采用驼峰命令发，如果非要使用原生css样式写法，需加引号缺点：一些动画，伪类不能使用class App extends Component {constructor(props) {super(props);this.state = {date: new Date()};}render() {const styleCss = {header : {color: ‘red‘,backgroundColor: ‘#ccc‘,"padding-top": ‘20px‘,paddingBottom: ‘20px‘}}return (<div className="App"><p style={styleCss.header}>这是一段文字，哈哈...
React Hooks的常见应用及一些原理【代码】
## 函数组件目的：React团队希望，组件不要变成复杂的容器，最好只是数据流的管道，开发者可以根据需要组合管道。**完全不使用类就能写出一个全功能组件** React很早就支持函数组件 function Welcome(props) {return <h1>Hello, {props.name}</h1>; } 这种写法有重大限制，必须是纯函数，不能包含状态，也不支持生命周期方法，因此无法取代类。 ## HooksReact核心思想是将页面拆成一堆独立的、可复用的组件，并且用自上而下的数据流...
18 react-router【代码】
react-router: 它通过管理 URL，实现组件的切换和状态的变化，开发复杂的应用几乎肯定会用到。 用法：子路由也可以不写在Router组件里面，单独传入Router组件的routes属性。 组件有一个参数history，它的值hashHistory表示，路由的切换由URL的hash变化决定，即URL的#部分发生变化。举例来说，用户访问http://www.example.com/，实际会看到的是http://www.example.com/#/。<Router routes={routes} history={browserHistory}...
[Angular] Component architecture and Reactive Forms【代码】【图】
It it recommeded that when deals with form component, we can create a container component to hold state, and then create a stateless component to enpower the form.For example:In the example has two components, one is container component ‘meal.component.ts‘, another is statless component ‘meal-form.component.ts‘. For the container component, it talks to service:import {Component} from ‘@angula...
Akka Stream文档翻译：Quick Start Guide: Reactive Tweets【代码】
Quick Start Guide: Reactive Tweets快速入门指南： Reactive Tweets(reactive tweets 大概可以理解为“响应式推文”，在此可以测试下GFW是否还在正常工作 Twitter)A typical use case for stream processing is consuming a live stream of data that we want to extract or aggregate some other data from. In this example we‘ll consider consuming a stream of tweets and extracting information concerning Akka from the...
基于webpack的react的环境项目搭建
安装node js npm config set registry ‘http://registry.npm.taobao.org‘npm config list 可以查看配置npm install webpack -g 全局安装webpacknpm install webpack --save-dev 对单个项目进行webpack的安装；mkdir react-webpack 创建目录；cd react-webpack 切换到该目录下npm init 自定义创建package.jsonnpm init -yes 可以创建默认的package.json3.添加依赖包级插件npm install webpack --save-devnpm install react react-...
使用create-react-app创建应用并执行npm start时出现events.js:183 throw er的解决方法【代码】
events.js:183 throw er; // Unhandled ‘error‘ event。。。ENOSPC。。。解决方法：命令行执行如下内容，避免ENOSPC错误：echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
【react hooks】--初渲染和更新阶段【代码】
hook组件初渲染hooks组件在初次渲染时，解析组件类型，判断是Function还是class类型，然后执行对应类型的处理方法判断到当前是Function类型组件后，首先在当前组件，也就是fiberNode上进行hook的创建和挂载，将所有的hook api都挂载到全局变量dispatcher上顺序执行当前组件，每遇到一个hook api都通过next将它连接到当前fiberNode的hook链表上hooks api 挂载在初始渲染时，currentDispatcher为空，就会先将所有hook api挂载到当前f...
react redux【图】
第一次用 紧张 慌我每次使用新技术都特别慌 又激动又心慌注意点 createStore 只能有一个 需要 subscribe 才能触发 先上两点 原文：https://www.cnblogs.com/qingcui277/p/12337360.html
React@16.13.1配合antd UI使用，自定义主题【代码】【图】
本文建议使用yarn进行环境搭建和后续项目启动之类的安装yarnnpm -g install yarn // -g代表全局安装接下来，使用yarn进行安装// 初始化项目 create-react-app imooc // 添加antdyarn add antd // 使用react-app-rewired customize-cra就不用暴露webpack等配置文件 yarn add react-app-rewired customize-cra -D // 安装less相关 yarn add less less-loader babel-plugin-import -D修改一下package.json里面 “scripts”，且需要添...
react native 安装指南
React Native基于node.js的Model环境，使用React的UI环境，的一套跨平台方案。现实方案可能是，基于node.js的Model环境，基于各个平台的UI环境。ios 环境安装1.安装nvmhttps://github.com/creationix/nvm#installation2.安装nodenvm install 5.3.0nvm alias default node3.安装 watchmanbrew install watchman4.安装 flow（js静态检查）brew install flow5. npm install -g react-native-clireact native 的命令行工具6.创建工程re...
原创 - react + TS + d3.js 实现曲线图 报错问题解决【代码】
react + TS + d3.js 实现曲线图 报错问题解决1. 结构1.1 整体结构// lemon import React, { useRef, useState, useEffect, useReducer } from "react"; import * as d3 from "d3"; interface Data {} const SimpleLine: React.FC = () => { const ref = useRef<SVGSVGElement>(null); useEffect(() => {}); return ( <> <svg ref={ref}></svg> </> ); }; export { SimpleLine }; 1.2 SimpleLine函数组...
【react】--------------flux-------------【劉】【图】
一、什么是Flux Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰。 二、flux的基本概念 (1) 、Flux由4部分组成 1、View：视图层 2、Action(动作)：视图发出的消息(比如mouseClick) 3、Dispatcher( 派发器 ) ：用来接收Action、执行回调函数 4、Store(数据层)：用来存放应用的状态，一旦发生改动，就提醒View更新页面 (2)、Flux的流程 1、...
React-2-基础知识【代码】
一、变量state和变量修改setStatestate修改后，页面也会跟着响应，更新state需要使用setState。// 初始化statethis.state = {count: 0 } // 更新statethis.setState({count: this.state.count + 1 })注意：1.setState是异步的，同一个生命周期里会批量操作更新state，这会导致一个问题，在某个生命阶段，我们setState了某个值，但是在这个阶段我们再去获取到的其实还是原本的值，只有在生命周期结束后才会真正更新完成。解决办法：...
前端知识 | React Native Animated动画浅谈【图】
在移动开发中，动画能有效的提高用户体验。在 React Native 中，也有相应的 API 供我们做动画。这里着重说一下 Animated 动画库，它可以让我们非常简便的去实现各式各样的动画和交互方式，而且具备很高的性能。Animated 目前只封装了四个可以动画化的组件：View、Text、Image、ScrollView，不过你也可以用 Animated.createAnimatedComponent() 来封装你自己的组件。 话不多说，我们来举个栗子：步骤拆解1、创建 Animated.Value，设...
React-Apollo-Prisma-Graphql【代码】
create-react-app: https://facebook.github.io/create-react-app/docs/getting-started Apollo:https://www.graphql.college/building-a-github-client-with-react-apollo/ Prisma:https://www.prisma.io/docs/ 首先，在创建客户端之前，跟着Prisma教程起一个server，我这里的server地址：localhost:4000。然后，跟着create-react-app创建一个react项目，启动。 接着，在react项目中安装依赖：npm install apollo...
react纯前端不依赖于打包工具的代码【代码】
####react最基础的语法和不依赖环境的纯前端免编译代码参照：http://www.ruanyifeng.com/blog/2015/03/react.html 注意事项：1.必须放倒服务器上，在文件系统上无法运行 login.html<!doctype html><head><meta charset="utf-8"><script src="https://npmcdn.com/react@15.3.1/dist/react-with-addons.min.js"></script><script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script><script src="https://np...
Reactjs逐渐加深理解【代码】
Reactjs React.render(参数1，参数2)使用：作用：将标签内容插入到页面中目标Dom节点中说明：参数1：html存在的标签对（可以含内容），比如<span>这是标签内容</span>，也可以是已经通过React.createClass创建好的组件（其实可以理解为标签），如果创建的组件名为Zujian1,那么这里的参数1就需要写成标签的形式，<Zujian1></Zujian1> （注意组件名首字母都必须是大写，下面会将怎么创建）参数2：页面Dom目标，即这个第一个参数所指的...
React 添加装饰器依赖【代码】
安装依赖 yarn add @babel/plugin-proposal-decorators修改package.json文件中的babel依赖 "babel": {"plugins": [["@babel/plugin-proposal-decorators",{"legacy": true}]],"presets": ["react-app"]}重启项目原文：https://www.cnblogs.com/adolphRe/p/13158791.html
简述react、redux、react-redux、redux-saga、dva之间的关系
【react】定位：React 是一个用于构建用户界面的JavaScript库。特点：它采用声明范式来描述应用，建立虚拟dom，支持JSX语法，通过react构建组件，能够很好的去复用代码；缺点：react抽离了dom，使我们构建页面变得简单，但是对于一个大型复杂应用来说，只有dom层的便捷是不够的，如何组织、管理应用的代码，如何在组件件进行有效通信，这些它都没有解决；因此，它还需要一个前端架构才能应对大型应用；【redux】定位：它是将flux和...
React 60s倒计时【代码】
this.state = {btnText: ‘获取验证码‘,timer: 5,discodeBtn: false,clearInterval: false } let siv = setInterval(() => {this.setState({ timer: (timer--), btnText: timer, discodeBtn: true }, () => {if (timer === 0) {clearInterval(siv);this.setState({ btnText: ‘重新发送‘, discodeBtn: false })}}); }, 1000); 原文：https://www.cnblogs.com/hcxwd/p/9188878.html
react 使用react-router-dom 在Route对象上component 参数接收的是一个方法而非一个对象【代码】
其实对于jsx语法 一直觉的它有点清晰都不是很好，js和html混在一起有点不伦不类的样子，以下是我在使用react中遇到的一个很奇葩的事情假定你定义了一个component Mine 1 import React from ‘react‘;2 3class Mine extends React.Component {4 constructor(peops) {5 super();6 }7 8 render() {9 console.log(‘mine‘, this); 10return ( 11 <div> 12 <div className=‘hea...
React hooks实践【代码】
前言最近要对旧的项目进行重构，统一使用全新的react技术栈。同时，我们也决定尝试使用React hooks来进行开发，但是，由于React hooks崇尚的是使用(也只能使用)function component的形式来进行开发，而不是class component，因此，整个开发方式也会与之前产生比较大的差异。所以，我这里就积累了下实际项目中遇到的问题以及思考，看下能不能帮助大家少走弯路。正文接下来就直接进入正文。我会将项目中遇到的问题一一列举出来，并且...
React-基础总结【代码】【图】
使用1、 // js文件，第一部引入React（大写，不然保错） import React from ‘react‘ // 创建数组 const arrList = Array.from({length:60},(_item,index)=>index) const arr = arrList.map(item => <div key={item}>{`${item}秒是${item%2==0?‘偶数‘:‘奇数‘}`}</div>) const ele = <div>{arr}</div> export default ele // index中的代码 // 引入 import React from ‘react‘ import {render} from ‘react-dom‘ // impor...
ReactNative: 将自定义的ReactNative组件制作成第三方库的详细流程(制作-->发布)【代码】【图】
一、简介在讲本篇博文之前，需要你熟知怎么自定义ReactNative组件，然后才好学习将自定义的ReactNative组件制作成第三方库。本文中的自定义的ReactNative组件LoginManager API 源自上篇文章，所以需要先看一下上篇博文。言归正传，ReactNative的确提供了一个非常便捷的方式来扩展Native模块。如果要把模块做成第三方组件的话，还有一些工作要做：首先以一个静态库工程来编译模块代码，提供JavaScript的封装，最后创建Package.json来...
react 引入图片【代码】【图】
react 不支持img直接引入<img src="../../images/img.png" />第一种:使用import ** from ‘ ......‘ 引入import React from ‘react‘; import img from ‘../../images/img.png‘export default class Demo1 extends React.Component {constructor(props) {super(props)this.state = {}}render() {return (<div>引入图片<img src={img} /></div>)} } 第二种:使用require引入import React from ‘react‘;export default class...
MVVM模式下如何使用ReactiveCocoa响应链式编程<一>
前一阵子公司要求项目从新架构，但又只给不到一个月的时间，这显然是不可能的。但从新架构又是在所难免的，和同事商定后决定一部分交互逻辑比较少的界面先使用MVVM架构，然后慢慢修改。下面整理了一下这次重构的遇到的问题，并希望能给大家一些帮助。1.ReactiveCocoa的使用要使用MVVM模式编程收下选择一个框架，当然不仅仅是ReactiveCocoa这一个框架，这里就不多说。当然我也没用过别的，如果哪位看官用过可以多多指教。接下来我就...
react类方法的绑定
首先我们需要明白什么是单向数据流？你通过onClick触发一个动作，再通过函数/类方法修改组件的state，最后通过render()方法再次运行来更新界面 class App extends Component{}不能完成this的自绑定，所以采用以下方式官方推荐的方法this.onClickMe = this.onClickMe.bind(this);有参数时：onClick={()=>{this.onClickMe(1)}}无参数时：onClick={this.onClickMe}箭头函数类方法onClickMe= () => { console.log(this);}通过箭头函...
解决umi项目引入React无智能提示，报错“React”指 UMD 全局，但当前文件是模块。请考虑改为添加导入。ts(2686)的问题。【图】
问题：正常写tsx组件，必须要引入React模块，但是有时不知为何不导入，也不会报错。而有的项目必须强制引入，不引入还会报错，困扰了很久，现在已经解决，记录一下。经过比较后发现，在tsconfig.json文件中有如下设置。1.打开tsconfig.json文件。 2.将jsx对应改为react。 3.改为react后，会检查所有tsx或者jsx文件，没有引入React的会自动提示。原文：https://www.cnblogs.com/tigerK/p/14902074.html