首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

2021年React学习路线图

React 核心库相对简单,但是只学这个库并不够,特别是创建复杂的网页应用时。 我从 2016 年开始用 React 开发,当任务变得越来越复杂时,我不得不学习其他辅助库,来实现这些功能。...建议你学习 React 之前,先用纯 HTML/CSS 和原生 JavaScript 写一个简单的网站。 2....基础入门 这一节,我会分享一些必须学习的知识,从而可以创建简单但有用的 React 应用,结尾推荐了我用过的学习资源。...当状态中的数据发生改变时,组件会再次渲染,来更新这些变更。你要理解这几个基础概念。 学习这些概念时,毫无疑问你将遇到条件渲染和从列表中渲染多个组件。此时,你应该创建一个简单的 React 应用。...编写测试很重要,根据我的经验,通常比编写实际代码更难。 您应该学习最流行的测试库,如 Jest 和 Enzyme,以及如何使用库(如 Sinon )模拟 API 调用。

7.6K21

“别更新了,学不动了” 之:全栈开发者 2019 应该学些什么?

但是,有一件事是肯定的:2019 年对全栈开发者的需求量很大。在本文中,我将向你概述一些趋势,你可以尝试根据这些趋势来确定你可能要投入的时间。 简单地说,全栈开发者就是可以构建完整应用程序的人。...现在,我可以使用 Angular 创建世界上最好的组件,并将它交给我的朋友,她将它用在她的 React 应用程序中!...你仍然需要学习 Redux,因为你可以从 Redux 中学到一些有用的计算机科学原理,如事件溯源和 CQRS。...你应该学会使用 Node.js 和 Express.js 来创建 API 服务器,在 2019 年,这两个框架的组合仍然会占主导地位。...以上是我的个人意见,不管怎样,学习新东西绝不是一个坏主意。

2.6K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    ReactJS和React-Native的主要区别在哪里

    在本文中,我将介绍作为ReactJS网页开发人员在学习使用React-Native并用其构建一些原生app时,此时我遇到它们间的主要差别。...它看似CSS,但却不是真正的CSS.这可能一开始会令人困惑,你可能会碰到一个问题,比如你想知道如何使用SASS来创建混合,或者如何覆盖要重用的组件的样式。...甚至可以使用伟大的Redux DevTools来检查Redux存储的状态。可是我最想要的一个功能是检查DOM,就像在网页上一样,本地检查器绝对没有那么好。...如果您想要进行一些改进或错误修复,代码推送是非常好的,但如果要添加全新功能,则不建议使用。 包装 我现在真的很喜欢使用React-Native。我使用它快一年了,能很快开发一个应用程序,准备好了!...React-Native周边社区非常大,不断增长,技术不会很快消失,我一定会推荐任何想要创建移动应用程序的Web开发人员忘记Cordova并尝试一下React-Native。 祝你使用它玩得开心!

    17K30

    Angular React Vue我应该选择什么?

    这似乎是对于关注分离的权衡 - 模板,脚本和样式在一个文件中,但在三个不同的有序部分中。这意味着你可以获得语法高亮,CSS 支持以及更容易使用预处理器(如 Jade 或 SCSS)。...如果你正在学习React,那么在你要使用 Redux 之前,你应该考虑学习纯粹的 React。你绝对应该阅读 Dan Abramov 的“你可能不需要 Redux”。...借助 React,你可以试试 react-native-renderer 来构建跨平台的 iOS 和 Android 应用程序,或者用 react-native 开发原生 app。...RealWorld 创建了一个真实世界的应用程序(中仿),他们已经准备好了 Angular(4+)和 React(带 Redux )的解决方案。Vue 的开发正在进行中。...的方法”:React 如果你喜欢真正干净的代码:Vue 如果你想要最平缓的学习曲线:Vue 如果你想要最轻量级的框架:Vue 如果你想在一个文件中分离关注点:Vue 如果你一个人工作,或者有一个小团队

    2.9K20

    回望过去,展望未来- 2024 React 生态一览表

    「如果大家对这些概念熟悉,可以直接忽略」 同时,由于阅读我文章的群体有很多,所以有些知识点可能「我视之若珍宝,尔视只如草芥,弃之如敝履」。以下知识点,请「酌情使用」。...Redux Toolkit Redux Toolkit[5] 是建立在 Redux 之上的全面状态管理库,Redux 是 React 应用程序中的状态管理库。...当然,还有recoil/jotai等,这里可以参考之前的React-全局状态管理的群魔乱舞 在上面的内容中,我们没有涉及Redux,其实我刚开始接触的就是Redux,但是在后面的使用中,慢慢的发现它的「...这类测试通常涉及到模拟用户在浏览器中的交互,如点击、输入等。 「覆盖率测试(Code Coverage):」 代码覆盖率测试用于衡量测试用例对源代码的覆盖程度。...这种Table的复杂程度,已经远远超出一般「组件库」中的Table的能力范围,想要实现相关的内容,我们可能利用原生from进行cell/row的数据拼接,简单的内容还是可以胜任的。

    74010

    Blazor资源大全,很棒的Blazor(2)

    但是,如果您需要构建原生客户端应用程序呢?Blazor正在扩展到Web以外的领域,通过使用Web技术和.NET的混合方式来支持构建原生客户端应用程序。...您将学习基础知识,包括如何使用XAML构建用户界面,如何使用MVVM和数据绑定简化开发,如何在页面之间导航,访问平台功能(如地理位置),优化数据集合,并为浅色和深色主题设置应用程序主题。...组件如何在其他SPA框架(如React或Angular)中使用(或反之),以及Blazor组件如何不仅用于Web项目,还与macOS、iOS、Android和Windows的原生应用程序共享(包括WPF...这些自定义元素为开发人员提供了一种创建自己的功能齐全的 DOM 元素的方法。在 Blazor 中,这允许将这些组件发布到其他 SPA 框架(如 Angular 或 React)。...我为什么为Blazor应用程序创建了另一个下载库的3个原因 - 2022年6月29日 - 我为什么为Blazor应用程序创建了另一个下载库的3个原因。

    83420

    猫头虎 分享:前端开放式跨端跨框架解决方案Taro 的简介、安装、用法详解入门教程

    兼容性强:支持多种前端框架,如 React、Vue,甚至可以和其他工具链结合使用。 2. 如何安装 Taro?️ 步骤一:安装 Taro 开发工具 首先,我们需要安装 Taro 的 CLI 工具。...确保安装完成后,你可以通过以下命令检查是否成功安装: taro -v 步骤二:初始化项目 使用 taro init 命令来创建一个 Taro 项目: taro init myApp 在这个过程中,你可以选择不同的框架...这对于复杂的应用程序非常重要。你可以很容易地将它们集成到你的 Taro 项目中。...以下是如何在项目中使用 Redux 的简单示例: import { createStore } from 'redux'; import { Provider } from 'react-redux';...A: Taro 使用的是标准的 CSS,但有些平台可能会有特定的样式要求。你可以使用 Taro 提供的样式处理工具 或者针对某些平台做特殊处理。 Q3: 我能否在 Taro 项目中使用第三方库?

    15910

    「前端架构」Grab的前端学习指南

    熟悉基本的命令行操作,熟悉源代码版本控制系统,如Git。 有网络开发经验。使用Ruby on Rails、Django、Express等框架构建了服务器端呈现的web应用程序。 了解网络是如何工作的。...JavaScript框架的创建是为了在DOM上提供更高层次的抽象,允许您将状态保存在内存中,而不是DOM中。使用框架还可以重用推荐的概念和构建应用程序的最佳实践。...毕竟,React只是一个视图层,它并没有规定如何在传统MVC模式中构建应用程序的其他层,比如模型和控制器。...Redux的创建者Dan Abramov非常仔细地为Redux编写了详细的文档,并为学习基本和高级Redux创建了全面的视频教程。它们是非常有用的学习资源。...开发经验——在开发过程中,我们花了很多精力来创建工具来帮助调试和检查应用程序,比如Redux DevTools。 您的应用程序可能必须处理异步调用,如发出远程API请求。

    7.5K20

    【React】211- 2019 React Redux 完全指南

    即使你打算同时使用它们,我还是强烈建议先脱离 Redux 学习纯粹的 React。理解 props,state 以及单向数据流,在学习 Redux 之前先学习 “React 编程思想”。...同时学习这两个肯定会把你搞晕。 如果你想要入门 React ,我整理了一个为期 5 天的免费课程,教授所有基础知识: 接下来的 5 天通过构建一些简单的应用来学习 React。...既然你读到这里,我认为你真想学习 Redux,我不会在这里比较 Redux 和 Context API 或者使用 Context 和使用 Reducer Hooks。...因此:作为我们从简单的 React 到 Redux 重构的第一步,我们要创建一个 store 来保持 state。...我整理了一个如何在 Redux 里做 Immutable 更新完全指南,包含更新 state 中对象和数组的七个通用模式。 安装 Immer 在 reducers 里面使用也是一种很好的方式。

    4.3K20

    2016 JavaScript 技术栈展望

    React React 可谓风头正盛一时无两: 组件化使应用程序更易于开发和维护 学习曲线平缓,核心 API 简洁清晰,易于学习 JSX 语法不落俗套,充分发挥了 JavaScript 的能量 天生适配...Redux 现在,我们已经具有了开发视图层的能力,接下来,我们需要使用其他工具管理应用程序中的状态和生命周期,在这里推荐的工具就是:Redux。...我非常钟爱 Mocha 的特性,如果你想要的只是最基础的功能,可以参考这篇文章了解一下 Tape。...除非你正在维护一个陈旧的项目或者用到的第三方库依赖了 jQuery,否则已经没有必要使用它了。 我喜欢让项目保持简洁,在代码中只使用 fetch 。...如果你的应用程序只有两三屏,那么就无需使用路由系统;如果你正在创建一个单页应用,那么甚至不需要 Redux,只需要 React 自己的 state 属性即可;如果你正在创建一个简单的 CRUD 程序,那么你就不需要使用

    2.1K40

    Medium网友开发了一款应用程序 让学习算法和数据结构变得更有趣

    我觉得我必须比其他人(他们有天生的数学能力)更努力地学习相同的概念。这个想法深深扎根在我的大脑中,我很确定我永远无法学习像“二叉搜索树”这样的东西,以及如何在精神上分析像“归并排序”这样的递归噩梦。...市面上有大量的应用程序,它们教授类似的技能,让你能够在浏览器中编写和运行代码。 为什么我做了这个 我开发这款应用的动机很简单:我想让学习变得更简单、更有趣。更重要的是,我为什么要学习这些特殊技能。...一旦我把它写下来,我就会编译学习资源并把它添加到应用程序中。现在,我可以在一个我自己构建的超级简单的工作空间中反复练习。这不是很酷吗! ?...它还使用了CodeMirror和React-Codemirror2来将一个编辑器嵌入到浏览器中(注意:原始版本的React-CodeMirror已经不再被维护,而且在新版本的反应中也没有很好地发挥作用)...因此,我选择了一种更简单的方法来保存进度,而不是实现数据库并请求用户登录。Redux在每个会话期间管理应用程序的状态,我使用localStorage来在会话中持久化代码。

    1.5K50

    Zustand:让React状态管理更简单、更高效

    接下来,我们将通过一个简单的计数器示例以及如何在状态中存储数组,来展示如何在React项目中使用Zustand。 1. 安装Zustand 首先,你需要在项目中安装Zustand。...访问存储的状态 当我们定义状态时,使用了set()方法来更新状态。如果我们想要从其他地方获取状态值,可以使用get()方法。...然而,Redux的一些特性,如冗长的代码、actions、reducers和中间件等概念的引入,对于新手来说可能会显得有些复杂,增加了应用程序的复杂度。...此外,Zustand的体积更小,仅为1KB,相比之下,Redux的体积约为7KB。 Redux示例 在Redux中,你需要创建一个store,并通过reducers来定义状态的更新逻辑。...dispatch来更新状态 }; Zustand示例 在Zustand中,你可以直接创建一个store并在其中定义状态和更新状态的函数。

    1.3K10

    8个写完以后就可以让你成为顶尖开发者的有趣应用程序

    这里有8个很棒的项目来训练你的编码肌肉!我们的目标是用你喜欢的技术堆栈构建每个应用程序。使用任何你想要的内容来保证没有任何冲突! Project #1: Trello Clone ?...如果您感兴趣的是如何构建它,我为它编写了一个教程(https://medium.com/react-native-training/bitcoin-ripple-ethereum-price-checker-with-react-native-redux-e9d076037092...一个应用程序?地址:http://todomvc.com/examples/react/#/。已经有多少人试过了?是的 ,我知道有很多。但是这不重要,最重要的是 我知道 如此受欢迎是有一个原因的。...待办事项应用程序是通过的非常好的方式来诠释基本原理。尝试使用最基本的JavaScript编写它,然后用你最喜爱的框架/库来构建它。 你将学到什么: 创建新任务。 验证领域。...理解本地应用程序和Web应用程序的工作方式会让你很容易从人群中脱颖而出。 你将学到什么: Web套接字(即时消息) 本地应用程序是如何工作的。 布局是如何在本地工作的。 本地应用程序的路由。

    2.6K10

    React Native推送通知:完整的操作指南

    在这篇文章中,我们将看到如何在React Native应用中创建和发送推送通知。 什么是推送通知? 推送通知是从应用程序发送到已安装该应用的用户的消息或警报。...演示:如何在 React Native 中设置推送通知 要在React Native应用程序中使用推送通知,我们首先需要注册应用程序以获取推送通知令牌。这个令牌是一个长字符串,可以唯一标识每个设备。...如果你访问Expo的文档,你会找到关于如何在许多语言中实现服务器上的推送通知的信息。 在这个教程中,我将使用一个Node.js服务器。...你可以查看这个GitHub仓库,这是我在这个教程中使用的服务器源代码。我们将访问服务器中的 utilities 目录,并在其中包含 Expo SDK。...我们还学习了如何在 React Native 应用程序中发送推送通知,方法是添加通知令牌,从服务器发送它们,并使用 Expo 通知 API 在用户设备上显示它们。

    1.4K10

    VueJS && ReactJS 如何?听听别人怎么说

    Vue是简单的,它具有很多从Angular1和react来的概念。你可以使用它来建立任何系统 - 只是把它包含到HTML文件中。 React更大,更复杂一点(例如在设置方面)。...它是通用的:有库允许您使用React来编写移动甚至桌面应用程序(尽管我还没有亲自尝试构建桌面应用程序)。...React很难,因为: 它使用了很多中间高级JS概念。像一个深入了解的对象,“this”关键词和一些功能的编程概念是必要的工作,React的效率(最后一个是更相关的如果你使用Redux)。...即使是这样的话,你仍然可以通过使用项目生成器,比如创建React应用程序来跳过所有配置并直接构建。 前端开发的问题是js生态系统可能非常不稳定,框架在不断变化。...其实我真的想用React,但Vue只是更平易近人,我不需要花费额外的时间学习React。 然而,真正的考验是几个月后,我去修改和添加更多的功能到我的简单调试UI中。

    1.2K50

    如何在 React 应用中使用 Hooks、Redux 等管理状态

    我们将了解简单的 useState hook,并学习更复杂的库,如 Redux。然后我们将查看最新可用的库,例如 Recoil 和 Zusand。...总结 React 中的状态是什么 在现代 React 中,我们使用函数组件构建我们的应用程序。...解决这个问题的一种方法是使用 React context,简单来说,这是一种创建包装组件的方法,该组件包装我们那些想要并且可以直接传递 props 的组件组,而且无需 “drill” 通过那些不是必须使用该状态的组件...在 Redux 中,store 是拥有所有应用程序状态信息的实体。多亏 Redux,我们能够从任何想要的组件中访问 store(就像使用 context 一样)。...不过,作为开发者,我们必须牢记,Redux 和其他库的创建是为了解决特定的状态管理问题,特别是在真正的大型、复杂和大量使用的应用程序中。

    8.5K20

    「首席架构师推荐」React生态系统大集合

    ClojureScript中的不可变数据库和Datalog查询引擎 immstruct - 不可变数据结构,具有基于组件的库(如React)中从上到下属性的历史记录 seamless-immutable...reactn - React,但内置全局状态管理 immer - 通过改变当前状态来创建下一个不可变状态 地图 react-googlemaps - 反映Google地图的界面 react-maps -...创建React Native App - 在没有构建配置的任何操作系统上创建React Native应用程序,包含或不包含Expo Snowflake - 使用Redux,Parse.com,Jest(...- 用于测试redux异步动作创建器和中间件的模拟存储 redux-immutable - 创建一个与Immutable.js状态一起使用的Redux combineReducers的等效函数 redux-react-i18n...- 一个简单的redux中间件,用于使用JSON Schema验证redux状态值和对象类型 redux-persist - 坚持并补充redux商店 Redux教程 在ES6中使用React和Redux

    12.4K30

    现代 React 开发必备的 13 个神库,路由、UI 组件库、拖拽、虚拟列表都齐了

    Hi,大家好我 ssh,成为一个现代的 React 开发者,不仅需要理解 React 的核心概念,还需要对整个 React 生态系统了如指掌。...所以今天和大家来分享一下这篇 13 Must Know Libraries for a React Developer,看看正在使用 React 开发的你,是不是都使用过这些流行的库了?...根据 Redux 的官方文档,Redux 是一个可预测的 JavaScript 应用程序状态容器。...可调试的 - 有自己的 DevTools,可以轻松跟踪应用程序状态的时间线。 灵活的 - Redux 可与任何 UI 层一起使用,并且有大量的插件来满足你的需求。...例如,构建一个使用 React Suite 的 UI、React Router 的路由、React Query 获取数据和 Recharts 渲染图表的 React 应用程序,这样才能最大化的提高学习效率

    3.8K30
    领券