README.md

React

React is a JavaScript library for building user interfaces.

学习指南

• [网站]官方
• [网站]Build your own React
• [网站]A DIY guide to build your own React

React学习路线图

相关库

• Redux
  • https://redux-toolkit.js.org/
• Route
  • https://reactrouter.com/en/main

推荐资料

• [网站]Ant Design of React

• [网站]create-react-app

• [网站]react-developer-roadmap

• [网站]A DIY guide to build your own React

• [网站]实现一个 mini 版本的 react

• [网站]build-your-own-react

• [网站]UmiJS

• [网站]reactjs-interview-questions

• [视频]React入门应该是这样的！！！

学习步骤

知识点

• React 开发环境，渲染两次的问题

  • Concurrent mode renders components twice with different identities #17786
  • [译]我的 React 组件会渲染两次，我快疯了

• React唯一key问题

  • 列表 & Key
  • 参考示例：

    {
        records &&
        records.map((item: any, index: any) =>
          <li key={index} className="record_detail">
            {renderDetail(item, index)}
          </li>
        )
    }

• useEffect

  • React useEffect Hooks

    useEffect(() => {
      //Runs on every render
    });

    useEffect(() => {
      //Runs only on the first render
    }, []);

    useEffect(() => {
      //Runs on the first render
      //And any time any dependency value changes
    }, [prop, state]);

功能实战

用户权限

• [五星]使用context hooks实现用户认证和访问控制
  • Authentication with React.js

React和VUE对比

参考文献

1. redux全局状态管理学习路线之一 : redux&react-redux
2. webpack-dev-server简单参数配置
3. webpack
4. 解决react router路由不生效，首页正常，其他路由均报错：'Cannot GET / ' 问题
5. AntD 组件总览
6. react-router-dom使用指南（最新V6.0.1）
7. how could I fix this mistake of routes in react
8. react+antd从头搭建管理后台
9. react-redux-with-hooks-demo
10. redux-thunk
11. [推荐]如何从零开始创建React项目（三种方式）
12. CSS 架构之 BEM
13. BEM