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