[前端框架]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教程

作者:唐伯虎点蚊香,如若转载,请注明出处:https://www.web176.com/news/frontend/24409.html

(0)
打赏 支付宝 支付宝 微信 微信
唐伯虎点蚊香的头像唐伯虎点蚊香
上一篇 2023年7月5日
下一篇 2023年7月5日

相关推荐