React Index

React 技术栈

Web基础

• Web文档
• Web实践
  • FreeCodeCamp 英文网
  • FreeCodeCamp 中文网

培训

• JavaScript 全栈工程师培训教程
• React 技术栈系列教程

官网

• React 官网
• React 中文 ※

示例

• ReactCoolStarter
• 基于 react, redux 最佳实践构建的 2048

App

• 网络应用清单

工具

1. 包管理器
   • npm en | npm cn npm cn2 npm 模块安装机制简介 ※
   • yarn en | yarn en
2. 构建器
   • webpack en | webpack cn ※ 打包实战 | 轻松入门React和Webpack
   • browserify en | browserify cn
3. 编译器
   • babel en | babel cn ※ Babel 入门教程
4. React 开发者工具
5. 静态类型检查器
   • Flow en Flow cn #
   • Flow 的使用入门
   • Flow - JS静态类型检查工具
   • 为什么在JavaScript中使用静态类型？ (Flow中的静态类型)
   • 强类型 JavaScript 的解决方案
6. Prettier # 编码风格
7. ESLint en | ESLint cn | ESLint 实战 # 检查警告
8. Storybook # 组件预览
9. SW Precache Webpack Plugin
   • 离线指南
   • ServiceWorker

技术

• react router en | react router cn ※
  • React Router 4 简易入门
  • 初探 React Router 4.0
  • React Router v4 版本 完全指北
  • React Router 使用教程
  • 不依赖服务端实现 react-router 的 browserHistory
• react bootstrap en | react bootstrap cn ※
• redux en | redux cn ※
  • Redux 入门教程（一）：基本用法
  • Redux 入门教程（二）：中间件与异步操作
  • Redux 入门教程（三）：React-Redux 的用法
  • react-router-redux中文文档
  • Redux DevTools
• Middleware(中间件)
  • Redux Logger
  • redux-thunk
  • redux-promise
• Sass en | Sass cn | Sassmeister SASS用法指南 ※

• Immutable.js en | Immutable.js cn ※
• Moment.js en | Moment.js cn ※

• Underscore.js en | Underscore.js cn | Lodash en | Lodash cn ※ Ramda.js

  • 函数式编程入门教程
  • Ramda 函数库参考教程
  • Pointfree 编程风格指南
  • Thunk 函数的含义和用法
  • Reduce 和 Transduce 的含义

• Jest en | Jest cn | Jsdom | Enzyme | Chai | Sinon.js | EnzymeMatchers

  • React 测试入门教程
  • React 应用下的单元测试

• Travis CI

  • 持续集成服务 Travis CI 教程
  • 6 simple steps to automatically test and deploy your JavaScript app to GitHub Pages
• ​

相关

1. CDN
   • CDN基础
   • CDN详解
   • 也许是史上最全的一次CDN详解
2. XSS(跨站脚本攻击)
3. Npm Scripts 使用指南
4. 搞清楚React项目中支持的Polyfills.
5. Prettier 统一团队的代码风格
6. React 如何国际化 ?

FAQ

1. 什么是声明式编程?

   以声明式编写UI，可以让你的代码更加可靠，且方便调试

2. JavaScript Bind 问题

   https://www.ibm.com/developerworks/cn/web/1207_wangqf_jsthis/index.html

   https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/

3. 如果您需要根据内容动态更新页面标题，可以使用浏览器的document.title API。对于要从React组件更改标题的更复杂的场景，可以使用React Helmet(一个第三方库)。

4. 熟悉使用Visual Studio Code

5. Visual Studio Code 集成 Chrome 插件.

6. Flow是一种静态类型的检查器，可以帮助您编写更少错误的代码。如果您是这个概念的新手，请参阅JavaScript中使用静态类型的介绍 。

7. .env 文件的特定设置 分别代表含义 ?

8. 在开发中使用HTTPS

9. ​

10. 如何确保 ?　请记住，代理仅在开发中有效 (使用 npm start)，并且由您来确保像 /api/todos 这样的URL指向生产中的正确的东西。您不必使用 /api 前缀。任何无法识别的没有 text/html 接收标头的请求，将被重定向到指定的 proxy.

11. 什么是服务器渲染? React如何支持服务器渲染?

12. 什么是预渲染成静态HTML文件?

13. HTML5 history API (pushState, replaceState, popState)

14. <Switch> 对于转场动画也非常适用

15. ​

16. Access-Control-Allow-Origin
    Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.