STEP 1：设置开发环境 与 Yeoman 的所有交互都是通过命令行。Mac 系统使用 terminal.app，Linux 系统使用 shell，windows 系统可以使用 cmder/Powe
如果你想写的组件只包含一个 render 方法，并且不包含 state，那么使用函数组件就会更简单。我们不需要定义一个继承于 React.Component 的类，我们可以定义一个函数，这个函数接收 props 作为参数，然后返回需要渲染的元素。
本文分为三部分，首先介绍 React 的工作流，让读者对 React 组件更新流程有宏观的认识。然后列出笔者总结的一系列优化技巧，并为稍复杂的优化技巧准备了 CodeSandbox 源码，以便读者实操体验。最后分享笔者使用 React Profiler 的一点心得，帮助读者更快定位性能瓶颈。
React是个很受欢迎的前端框架。今天我们探索下React开发者应该注意的七个点。
关于React生态系统的一系列令人敬畏的事情。 React React一般资源 React社区 React在线游乐场 React教程 React通用教程 React钩子 React和TypeScrip
作者: Eric Elliott 译：Adamhe 原文: 《Top JavaScript Frameworks & Topics to Learn in 2017》 JavaScript 的普及导致
当应用程序在开发模式下运行时，React 将自动检查咱们在组件上设置的所有 props，以确保它们具有正确的数据类型。对于不正确的类型，开发模式下会在控制台中生成警告消息，而在生产模式中由于性能影响而禁用它。强制的 props 用 isRequired定义的。
为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件.
接上篇。上篇中给出了代码框架，没有具体实现，这一篇会对上篇定义的几个组件进行分别介绍和完善：
在 React 的世界里”一切都是组件“， 组件可以映射作函数式编程中的函数，React 的组件和函数一样的灵活的特性不仅仅可以用于绘制 UI，还可以用于封装业务状态和逻辑，或者非展示相关的副作用, 再通过组合方式组成复杂的应用. 本文尝试解释用 React 组件的思维来处理常见的业务开发场景.
在 React 的学习过程中，有一个大 boss 拦路虎。他不仅概念多，理解起来困难，使用起来也很麻烦，他给 React 学习者带来了巨大的痛苦。因此他臭名昭著。有许多前端开发者因为讨厌他而放弃了 React。但怪就怪在，很多大佬会觉得这个方案非常厉害。
内容来源：2018 年 3 月 11 日，CODING 资深前端工程师杨臻在“【上海站】CODING 技术小馆-前端工程师的自我修养”进行《那些年我们一起踩过的坑——WebIDE 前端札记》演讲分享。
在编程领域，Angular 和 React 对于前端开发人员来说是目前最流行的两款 JavaScript 框架。
路由匹配是通过比较 <Route> 的 path 属性和当前地址的 pathname 来实现的。当一个 <Route> 匹配成功时，它将渲染其内容，当它不匹配时就会渲染 null。没有路径的 <Route> 将始终被匹配。
整个应用的state被存储在一棵object tree中，并且这个object tree只存在于唯一一个store中。
可以看到 useState 返回的是一个数组，那么为什么是返回数组而不是返回对象呢？
花了两周时间,我的微信小程序终于开发完了(平时上班,基本上都是业余时间开发的). 下面来介绍一下项目的功能以及结构. 用到的技术栈 vue2+weui+es6;要看项目 记得切换到dev分支上;
花了两周时间,我的微信小程序终于开发完了(平时上班,基本上都是业余时间开发的). 下面来介绍一下项目的功能以及结构. 用到的技术栈 vue2+weui+es6;要看项目 记得切换到dev分支上; 这是一款辅助记忆单词的微信小程序,项目调用了百度翻译api,这样可以获取百度翻译的数据.
要创建带有函数的组件，您只需编写一个返回 JSX 或 null 的 JavaScript 函数。需要注意的重要一点是，React 要求你的函数名称以大写字母开头。
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。它可以用在 react、angular、vue 等项目中, 但与 react 配合使用更加方便一些。
前端应用的状态管理日益复杂。随着大前端时代的到来，前端愈来愈注重处理逻辑，而不只是专注 UI 层面的改进，而以 React 为代表的前端框架的出现，大大简化了我们编写 UI 界面的复杂度。虽然 React 提供了 State 机制实现状态管理，也有诸如“状态提升”等开发约定，但是这些方案只适用于小型应用，当你的前端应用有多达 10 个以上页面时，如何让应用状态可控、让协作开发高效成为了亟待解决的问题，而 Redux 的出现正是为了解决这些问题而生的！Redux 提出的“数据的唯一真相来源”、单向数据流、“纯函数 Reducers” 大大简化了前端逻辑，使得我们能够以高效、便于协作的方式编写任意复杂的前端应用。本篇教程致力于用简短的文字讲透 Redux，在实战中掌握 Redux 的概念和精髓。
如果你是一名中级React开发人员，希望成为一名高级React开发人员，这篇文章就是为你准备的!
React 中最常见的问题之一是组件不必要地重新渲染。React 提供了两个方法，在这些情况下非常有用：
Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
该方法当props发生变化时执行，初始化render时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()来更新你的组件状态，旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的，并不会触发额外的render调用。
DvaJS： React and redux based, lightweight and elm-style framework.
useEffect会捕获props和state。所以即便在回调函数里，你拿到的还是初始的props和state。如果想得到“最新”的值，可以使用ref。
每个React组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如 <form>、<group>、 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果。01
完整高频题库仓库地址：https://github.com/hzfe/awesome-interview
应用中所有的state都以一个对象树的形式储存在一个单一的store中。唯一能改变state的办法是触发action，一个描述发生什么的对象。为了描述action如何改变state树，需要编写reducers。
（2）如果已经创建了 Create React App 项目，需要将 typescript 引入到已有项目中
在 React 诞生之初，Facebook 宣传这是一个用于前端开发的界面库。在大型应用中，如何处理好 React 组件通信和状态管理就显得非常重要。
我对 iOS 开发、手机开发、SwiftUI 开发经验有限，若有理解错误的部分欢迎指正。
本文简述了软件复杂度问题及应对策略：抽象和组合；展示了抽象和组合在函数式编程中的应用；并展示了Redux/React在解决前端状态管理的复杂度方面对上述理论的实践。这其中包括了一段有趣的Redux推导。 软件复杂度及其应对策略 软件复杂度 软件的首要技术使命是管理复杂度。——代码大全 在软件开发过程中，随着需求的变化和系统规模的增大，我们的项目不可避免地会趋于复杂。如何对软件复杂度及其增长速率进行有效控制，便成为一个日益突出的问题。下面介绍两种控制复杂度的有效策略。 对应策略 抽象 世界的复杂、多变和人
react的功能其实很单一，主要负责渲染的功能，现有的框架，比如angular是一个大而全的框架，用了angular几乎就不需要用其他工具辅助配合，但是react不一样，他只负责ui渲染，想要做好一个项目，往往需要其他库和工具的配合，比如用redux来管理数据，react-router管理路由，react已经全面拥抱es6，所以es6也得掌握，webpack就算是不会配置也要会用，要想提高性能，需要按需加载，immutable.js也得用上，还有单元测试。。。。
本篇要学的 列表 是不同数据类型的集合，它们是有序和可修改的(可变的)。列表可以为空，也可以有不同的数据类型项。
看到这个水果篮子的样子，大家应该可以明白它的功能：你可以做两件事 — 摘苹果和吃苹果。当你摘苹果时，应用会向后台发送ajax请求索取苹果，每个苹果有两个属性：编号和重量。当你吃苹果掉时，不用告诉后台，在前端偷偷吃掉就好啦~ 同时苹果篮子会显示当前的苹果量和已经吃掉的苹果量。好！那下面我们来开工！
英文原版 https://redux.js.org/ 中文 https://www.redux.org.cn/
Fiber 是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。React Fiber 的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新的并发原语。
大家好，我是前端西瓜哥。这次我们来看看虚拟列表是什么玩意，并用 React 来实现两种虚拟列表组件。
在前面的一文React进阶(2)-上手实践Redux-如何获取store的数据当中,已经知道组件怎么获取store的数据,并渲染到页面上,那么在该节当中揭示怎么更改store的数据,实现页面的更新
在前面的一文理解Redux中,已经知道了Redux的工作流程以及Redux的设计基本原则,它就是一个用于管理组件的公共数据状态的数据层框架,包括了Store,Reducer,React Component,Actions Creators四个部分
vscode是微软开发的的一款代码编辑器，就如官网上说的一样，vscode重新定义（redefined）了代码编辑器。当前市面上常用的轻型代码编辑器主要是：sublime，notepad++，editplus，atom这几种。比起notepad++、editplus，vscode集成了许多IDE才具有的功能，比起它们更像一个代码编辑器；比起sublime，vscode颜值更高，安装配置插件更为方便；比起atom，vscode启动速度更快，打开各种大文件不卡。可以说，vscode既拥有高自由度、又拥有高性能和高颜值，最关键的是，vscode还是一款免费并且有团队持续快速更新的代码编辑器。可以说，vscode是代码编辑器的首选。个人推荐编写前端代码时，代码编辑器选择vscode，IDE选择WebStorm。vscode安装插件只需要点击图片所示按钮，即可进入拓展，在搜索框中输入插件名点击安装后，等待安装好即可点击重新加载重启vscode使得插件生效。
作为一名Android开发者，我的感觉就是，一步一卡，卡的潇洒。 但是我还是要学react-native，不要问我为什么,因为我相信一门解决了原生app，开发周期长，开发成本高，升级代价大的语言一定
React是一个为数据提供渲染为HTML视图的开源JavaScript库。拥有虚拟DOM、组件化设计模式、声明式代码、单向数据流、使用JSX描述UI信息等特点。
2018 年我们写过一次 React 学习路线图（https://www.infoq.cn/article/AEkiVAiJf25LZmoUe_yc），两年过去了，又有哪些变化呢？
为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事。现如今 Angular 和 React 非常流行，并且最近出现的新贵 VueJS 同样博得了很多人的关注。更重要的是，这只是一些新起之秀。
如果你最近一直在尝试用 React 和 Redux 构建 dapp 前端，估计你已经意识到不能只专注于 dapp 做什么，为了使用 web3 组件和合约实例，以及从区块链同步数据，这些事情上，你已经在配置上花了大量时间。现在我告诉你，你来对地方了，Drizzle 库正好是你现在所需要的。我们来看看它是怎么工作的，怎么用它来构建 dapp 前端。
如果您尝试直接改变组件的状态，React 将无法得知它需要重新渲染组件。通过使用setState()方法，React 可以更新组件的UI。
领取专属 10元无门槛券
手把手带您无忧上云
