2021 年如何学习 ReactJS？
原文:https://www.geeksforgeeks.org/how-to-learn-reactjs-in-2021/
npx 创建-反应-app myapp
npm 启动
npm 运行构建
npm 安装
以上的命令你不都很熟悉吗？
如果是的话，那么你可能正在研究 React，或者你可能已经开始研究这个惊人的 JavaScript 库了。如果你是一个热情的开发人员，那么你肯定会意识到这个 JavaScript 框架的流行，你可能也会尝试学习这个库。
现在让我们谈谈已经在这个行业中工作的开发人员，他们正在从事这个项目的一些前端工作。当你被要求在多个地方写同一行代码时，你有什么感觉？当你被要求在多个页面上添加同一个按钮时，你有什么感觉？
我们知道，在软件开发中，做重复的任务是令人沮丧的，开发人员总是寻找一些框架或方法来节省他们宝贵的时间。图中出现了“反应”。
这个流行的令人惊叹的 JavaScript 库不仅帮助开发人员构建了一个令人印象深刻的应用程序，还帮助他们在更短的时间内构建前端页面。React 是基于组件的，这是这个库最酷的特性。您可以将复杂的代码分解成独立的部分，即组件。这些组件有助于以更好的方式组织代码。
如果你没有朝着这个图书馆迈出正确的一步，学习这个图书馆并不容易。React 中有很多概念，学习这个库可能会让你不知所措。了解这个库中正确的东西对于成为一个按需的 React Developer 非常重要。今天在这个博客中，我们将列出成为一名熟练的 React Developer 所需的关键技能。
1.学习HTMLCSS和 JavaScript 的基础知识
在你跳到这个库之前，你的核心概念应该很强。如果你是一个有经验的开发人员，那么你只需要修改概念。
如果我们谈论初学者，那么大多数时候他们会犯错误，他们会直接跳到这个库。后来他们不理解这个概念，一直在努力理解这个库。此外，你的面试官会先检查一下基本概念，然后再做出反应。
了解网站的基本构件。HTML、CSS 和 JavaScript 是如何工作的。React 语法和该库的大多数概念主要基于这三个构建块。如果这些基础对您来说是清楚的，那么您在构建应用程序时就不会遇到任何问题。用这三个积木自己创造一些东西。
React 继承了 JavaScript 的大部分特性。两者是相互联系的，所以有一个坚实的 JavaScript 概念基础是很好的。让我们讨论 React 所需的 JavaScript 的一些基本概念。
- 变量、对象、数组、函数和类。
- 常见的数组方法，如。map()，。filter()，。减少()
- ES6 功能如箭头功能、let、const。了解“this”关键字、调用、应用和绑定方法。
- 异步 JavaScript 的概念，如承诺、回调、异步/等待。
- 了解 DOM(文档对象模型)是如何工作的。如何创建、选择和更新 HTML 元素及其属性。
2.节点基础、导入和导出关键字
作为一名 React 开发人员，您将运行大量的 NPM 脚本/命令，因此，一旦对基础(HTML、CSS 和 JavaScript)有了清晰的认识，就要理解 NodeJS 的基础。
- NPM(节点包管理器):你应该了解 NPM(节点包管理器)。NPM 用于安装节点模块和包。了解如何使用基本命令/脚本来安装软件包和模块。
- 导入关键字:您必须在 React 项目中使用导入关键字才能使用已安装的 Node 模块。
- 导出关键字: 创建模块/组件时使用这个关键字，只需要返回一部分，而不是所有的方法和变量。
3.学习反应基础
一旦上述概念清晰，并且您对 JavaScript 变得有信心，请跳到反应基础。学习反应的核心概念。React 基于基于组件的体系结构。您必须将完整的用户界面或 JSX 划分为可重用的组件。
您将为不同的任务创建不同的组件，这些组件将安装到父组件中。该父组件将呈现给用户。
现在的问题是…在 ReactJS 中你应该学习的核心概念是什么。让我们讨论一下…
- 您将在 ReactJS 中使用 JSX 语法。JSX 的语法与超文本标记语言有些相似，但是请记住它不同于普通的超文本标记语言。
- 学习渲染 JSX 元素。根据条件显示和隐藏元素。
- 学习反应堆中的国家概念？它是如何工作的？基本上，状态保存同步变量，状态值的改变将反映在整个应用程序中，无论它在哪里使用。了解如何在状态中存储和更新数据。
- 在反应中，你将使用道具(嘿！到底是什么？)。我们知道这对你来说可能是个新词。基本上，道具就像传递给函数或方法的参数。知道什么时候用，怎么用。您将使用道具作为 HTML 标签的输入参数。
- 功能组件、类组件，以及这两者之间的区别。
- 就像在 JavaScript 中一样，您将在 React 中处理事件。了解如何处理一些常见事件，如 onClick、onChange 和 onSubmit(您将在按钮、输入和表单中使用这些事件)。
教程 ReactJS GeeksforGeeks 和 React 官方教程将帮助你了解 ReactJS 的一切。在理解了 ReactJS 之后，构建一些基本的项目来更好地理解概念。
- 简单的全应用程序
- 简单计算器应用
- 制作购物车
- 使用 GitHub API 显示 GitHub 的用户统计数据。
4.反应路由器
大部分框架都是基于路由的概念 ( 嘿！到底是什么？ )。无论是电商网站、教育网站，还是任何一种网站，你都会发现不同的页面，用途不同。现在有一个问题问你…
你会如何从“主页”页面重定向到“博客”页面？您需要在您的应用程序中设置路由来达到这个目的。React 开发者使用名为 react-router-dom 的第三方库为不同页面创建链接，加载不同页面、、和的内容重定向到其他页面。
下面是 react-router-dom 的一些常见特性，您应该知道如何使用您的应用程序。
- 如何使用、、组件。
- 如何使用组件和 useHistory()钩子进行导航。
- 使用路径道具创建动态路线，即并使用 useParams()钩子获取路径值。
- 反应路由器中<重定向/ >的工作原理。
5.反作用钩
因此，您已经完成了基本的构建模块和反应基础。现在是时候学习 React Hooks 了。这个新特性是在 React 版本中添加的。在反应钩子的帮助下，你可以不用类来编写反应特性。React hooks 允许您编写更少的代码，这使得您的应用程序更加高效、简单和强大。
您将主要学习反应挂钩的 5 个核心概念。这五个核心概念如下:
- 使用状态:在你的 React 应用程序中，大部分时间你都会使用这个概念来存储和管理数据。
- 使用效果:您将在像 HTTP 请求和使用浏览器应用编程接口的操作中使用这个概念。
- useRef: 这将用于引用 JSX 元素。
- 使用上下文:React Hooks 的这个属性将被用来访问来自 React Context 的数据，以便在组件之间轻松共享数据(而不是传递道具)
- user educer:React hooks 中的这个概念将用于跨多个组件存储和管理数据。
我们只讨论了 5 个对学习很重要的钩子。有 5 个以上的钩子，但在你的学习阶段最初并不需要。随着你的进步，你会在你的应用程序中遇到问题，你会慢慢学习更多的钩子。
6。L 赚到与 React 应用程序中的 API 一起工作的钱
我们知道 React 是一个构建用户界面的前端库。用户与应用程序的前端部分交互，从那里访问数据，或者从一个页面导航到另一个页面。
React 与应用程序的后端代码交互。我们从应用程序的后端部分获取数据，我们执行诸如身份验证、向用户显示项目、搜索、用户注册等操作。
主要有两种方法来处理来自后端的数据。最常见和标准的方式是使用REST API。另一个也是更新的是GraphQL APIT4。在您的工作中、您将会遇到必须同时使用这两个 API 的问题。了解如何使用 React 处理两种API。
7。反应中的造型
在开发的大部分时间里、我们使用普通的 CSS 给我们的应用程序赋予样式。但是在 React 中，大多数开发人员使用组件库来简化样式。有很多组件库可以使用，但是 React 中最流行的是材质 UI 。
您也可以使用实用类库来设置元素的样式。流行的实用类库是顺风 CSS 。作为一名开发人员，你会遇到这两种情况。所以熟悉这两种类型的库是很好的。
8.网页包
Webpack 是 JavaScript 中的一个模块捆绑器，它帮助您将依赖关系作为项目的静态文件来维护。Webpack 还附带了加载器。加载器帮助您围绕项目运行特定任务。
9. Redux
在您的 React 应用程序中，您必须管理状态。一旦您的应用程序开始增长，它将成为一个复杂的应用程序，您将不得不跨组件管理状态。Redux 是一个强大的 JavaScript 库，它解决了这个问题，并有助于维护应用程序的状态。在 Redux 中，您将所有状态存储在一个源中。
最终想法
我们讨论了在 React 中应该学习的主要概念。一旦你开始在某个反应项目上工作，你将会遇到许多问题、和。根据问题的不同，你必须在中搜索高效的解决方案。
你会被介绍到不同的库或者包中根据问题做出反应。慢慢的你会随着这个应用深入，在 React 中你会成为一个高手。希望这有帮助。
版权属于：月萌API www.moonapi.com，转载请注明出处
