[前端框架]react该如何学习？

如果是入门的话，除了官方文档之外，最好的入门教程当属于《React.js小书》，链接为，作者不仅教会你使用React，而且引导你思考React为什么如此设计。即使是js基础很薄弱的人，读完之后，React基本可以入门了。另外《React学习之道》也是一本很不错的入门教程，书中有较多的例子，跟随作者的思路，一步一步实现不同的功能，读完之后，就能用React写点简单的小项目了。有需要《React学习之道》PDF的朋友可私信我。

————————–2021-05-30—————————-

大家不用再私信我了，有需要的朋友请到网盘自取，记得点个赞哦，提取码：ntdw

分享一些我脑海中认为比较正确的学习路径：
先把 js 基础打好，基础不好的话或者觉得差不多就行的话，好歹把 es6 的东西看看，高频的就是箭头函数、class、解构运算符等语法看一下 react 官方文档中关于如何使用组件化思想分割页面的那篇教程，虽然内容比较简单，但其实大道至简，基本上所有特性基本上都是为达到这个目的而存在的搞清楚 prop 和 state 的区别，这一步可以通过阅读大量的文章去了解，也可以自己在实践中去“悟”，我建议后者，这样体会会更深一些参考官方文档写个 demo，简单的就写个 Counter，复杂的就写个 TodoList，注意，这里不要掺杂任何外部概念，比如什么函数式、context、状态管理什么的
完成上面四步我觉得基本就算入门了，后面就看情况边做项目边补知识点就好了，比如：
单页应用是离不开前端路由这个概念的，是不是给看看 react-router？（有时间的话，顺便把前端路由的原生实现看一看，然后再了解一下静态路由和动态路由的区别，基本路由的东西不用看了）这 state 父传子，子传孙，简直烦啊，好像听说有状态管理这么一回事儿？（redux 等各种框架走一波）作为一个程序员，每多写一行代码我都觉得对不起自己，如何能提高代码复用性以及抽象程度呢？（HOC 或者 render props 了解一下）组件从创建到挂载到销毁到底经历了哪几步？（生命周期了解一下）函数式好像比较火？最近 16.8 版本的 hooks 特性是什么？…（此处省略 1 万个字）
上面就是我个人学习任何新技术、新框架的固有套路，就是先入门，再实践，然后在实践中带着问题，边踩坑，边总结，边学习，然后就没有然后了。

本着打好基础，快速上手，实用第一的思想，下文总结了一些平时开发常用的基础操作，适合入门参照。最好的学习资料还请移步 官方文档，期待同学们更精彩的分享。如有不当之处，请予指正。
类组件
React.Component 的性能优化版本。如果 props/state 没有改变，不会重新render。
类组件API默认值默认prop值默认state值获取props属性
用 this.props 来访问传递给组件的属性。
传递children透传函数式组件
函数组件没有state，它们的props将作为第一个参数传递给函数。
HookuseStateuseEffect
默认情况下，React在每次render后执行effect——包括第一次render。
Hooks APIuseState(initialState)useEffect(()=>{ … })useContext(MyContext)useReducer(reducer, initialArg, init)useCallback(()=>{ … })useMemo(()=>{ … })useRef(initialValue)useImperativeHandle(ref, ()=>{ … })useLayoutEffect 与useEffect相同，但它在所有DOM突变后同步触发useDebugValue(value) 在React DevTools中显示自定义钩子标签DOMrefEvents生命周期 LifecycleReact16新的生命周期弃用了componentWillMount、componentWillReceiveProps，componentWillUpdate新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数（componentWillMount、componentWillReceiveProps，componentWillUpdate）新增了对错误的处理（componentDidCatch）挂载阶段
在constructor()上初始化state状态；

在componentDidMount()上添加DOM事件处理程序、计时器等，然后在componentWillUnmount()上删除它们。
更新阶段
当父类更改属性和. setstate()时调用，这些在初始渲染时不被调用。
JSX 一些写法样式条件判断短路判断InnerHTMLList 遍历展示属性验证
非强制

…

更多python、java学习面试资料，可添加阿里妹官微(alimei6）备注【阿里技术】，还有更多阿里社招、校招、最新科技技术资讯、各类技术训练营学习名额和独家电子书可以领取。

React 官方
官网地址：React – A JavaScript library for building user interfacesGithub地址：设计思想
学习React之前，我们先了解一下它的设计思想，它与如今其他热门的前端框架有什么不同？它能为我们的开发解决哪些痛点？
React 设计思想React的设计哲学 – 简单之美颠覆式前端UI开发框架:React初学者入门文章
可以结合一些简单demo去看文章，例如你在看阮一峰的React 入门实例教程时，可结合他写的入门demo，或官方给的demo。当然你也要边学习边自己去写一些简单demo，去改改别人写的一些React 项目。一定要多动手。
React 入门实例教程-阮一峰：建议先看demo一看就懂的ReactJs入门教程（精华版）React 教程-菜鸟教程：安装那节好像有点错React 入门，5个常用DEMO展示如何学习React给新手的 React&Webpack 上手教程ReactJS 傻瓜教程React 最简单的入门应用项目入门 demo官方入门 demo：可结合官方的入门文档入门 demo-阮一峰：结合入门文章模仿知乎界面的一个简单React demo：结合 ReactJS中文基础视频教程-爱酷入门视频教程
一定要边看边写，不要囫囵吞枣的看一遍就好了。
React入门-慕课网ReactJS中文基础视频教程-爱酷ReactJS中文视频教程React教程- 汇智网入门实战视频
了解React开发流程，作者的编码思路，写作规范。
React实战–打造画廊应用（上）React实战–打造画廊应用（下）ReactJS中文基础视频教程构建实时聊天应用开发文档
开发其实不用详细去全看，在你做项目时，遇到不懂的就去查看一下文档，我认为这样效率更高一点。当然你有时间也可以一步步去阅读。
官方文档中文文档学习网站
在学习中我们会遇到 一些问题，可以去社区或一些网站寻找答案，下面推荐一些好的React 社区和学习网站。
React中文社区React 中文索引React知识库A quick start to Reactstack overflow知乎 React 话题segmentfault React 话题React技术栈
React是一款非常优秀的前端框架，你要发挥它完全的性能，你就要结合其他一些技术，例如webpack、redux、react-router等。
React 技术栈系列教程百度母婴技术团队—基于Reactjs实现webappBuilding a React Universal Blog AppReact为啥非得使用immutable.jsReact Server Side Rendering 解决 SPA 应用的 SEO 问题webpack官方文档Webpack 中文指南webpack一小时快速入门使用webpack轻松构建你的第一个react开发框架react-routerReact Router 中文文档React Router 官方 demoRedux官网Redux 中文文档Redux 官方 demoRedux 莞式教程Redux 视频教程redux 大法好Flux 傻瓜教程react+redux渲染性能优化原理React开发社区React 开源项目
介绍一些国内外比较好的 React 开源项目。

国内：
阿里的 React 组件库Ant Design简易留言板react-zhihuReact的扫雷游戏在线聊天室使用React技术栈开发SPA阔论留言评论React版cnode社区
国外：
RelaxSoundReduxGatsbyisomorphic500NuclearMailPicardReact ColorSentryreact-hnPerseus

想要学习React，可以按照以下几个步骤：
了解React的基础概念，例如：组件、虚拟DOM、JSX等学习React的基本语法，包括如何创建组件、渲染组件、处理时间等；学习React的数据流管理，包括如何使用props和state管理组件的数据了解React的生命周期方法，学会如何使用生命周期方法进行更复杂的组件管理；学习React与其他技术栈的整合，例如：Redux，React Router等的结合使用使用：通过独立项目或者练习等方式练习React开发。一、React相关课程分享
React 是时下最流行的前端框架之一，是很多大厂的首选前端开发框架！历经数月精心研发，内容包括：React 脚手架、JSX、函数组件、类组件、受控组件、组件通讯、Context、组件生命周期、高阶组等等技术。
黑马程序员前端React视频教程，react零基础入门原理详解到好客租房项目实战二、什么是React
React是一个用于构建用户界面的javaScript库， 起源于Facebook内部项目，后续在13年开源了出来。
特点：
声明式：你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI。

基于组件：组件是React最重要的内容，组件表示页面中的部分内容

学习一次，随处使用：使用React可以开发web应用，使用React可以开发移动端，可以开发VR应用。
三、React的基本使用React的安装
npm i react react-dom
react 包是核心，提供创建元素，组件等功能react-dom 包提供DOM相关功能React的使用
– 引入react和react-dom的两个js文件

– 创建React元素

-渲染到页面
四、React脚手架react脚手架意义
– 脚手架是开发现代Web应用的必备

– 充分利用 Webpack，Babel，ESLint等工具辅助项目开发

– 零配置，无需手动配置繁琐的工具即可使用

– 关注业务，而不是工具配置
使用React脚手架初始化项目初始化项目，命令： npx create-react-app my-pronpx 目的：提升包内提供的命令行工具的使用体验原来：先安装脚手架包，再使用这个包中提供的命令现在：无需安装脚手架包，就可以直接使用这个包提供的命令create-react-app 这个是脚手架名称 不能随意更改my-pro 自己定义的项目名称启动项目，在项目根目录执行命令： npm start
yarn命令简介
yarn 是Facebook发布的包管理器，可以看做是npm的替代品，功能与npm相同yarn具有快速，可靠和安全的特点初始化新项目：yarn init安装包： yarn add 包名称安装项目依赖： yarn脚手架中使用React
导入react和react-dom两个包

创建元素

渲染到页面

更多内容欢迎关注 @黑马程序员前端 ，相关React笔记内容持续更新ing…
前端学习路线图概览：
新手入门： HTML5+CSS3+实战项目 → 移动web

JavaScript阶段： JavaScript基础 → JavaScript核心Web APIs → 数据交互 & 异步编程Ajax\\Git

VUE开发： 框架前置课Nodejs&es6 → Vue2+Vue3全套

React + 微信小程序： React → TypeScript → 微信小程序
黑马程序员前端：2023年Web前端开发学习路线图

相关前端教程: React教程 | Vue2.0教程 | Vue3.0教程