React：使用 ReactJS 的完整初学者指南

您是否听说过 ReactJS 但不知道从哪里开始？ 您是否已经开始使用 ReactJS，但不确定如何在日常工作中使用它？ 本文将指导您学习和掌握 React JavaScript 库，这是当今开发人员使用的最流行的库。 我将向您确切展示如何开始使用 ReactJS 以及如何将其集成到您的工作流程中，以便您可以创建更多动态用户界面，而不必通过其他框架或库进行不必要的绕路。 让我们开始吧！

什么是 ReactJS？

React 是一个前端开发库，鼓励您构建可重用的组件。 如果您正在寻找一种创建用户界面的有效方法，那么 React 可能正是您所需要的。 使用 Vanilla JavaScript 或 jQuery 创建用户界面时，您的代码会很快变得非常复杂和笨拙。 通过使用 React 及其首选的基于组件的开发方法，您的代码将更易于重用和维护。

事实上，一旦你构建了一些组件，你团队中的其他开发人员就可以相对容易地加入并贡献代码，而无需任何 React 经验（或知识）！

为您推荐：优化 React Native App 性能的 5 个有价值的技巧。

为什么使用 ReactJS？

首先，当谈到 JavaScript 框架时，你有一个选择。 那么，你为什么会选择 React？ 好吧，对于初学者来说，当涉及到帮助开发人员创建易于最终用户理解和参与的大型应用程序时。

对于到目前为止只使用 jQuery 或 Vanilla JavaScript 的开发人员来说，学习如何使用新技术可能会令人沮丧。 在某些情况下，开发人员可能需要数百行代码才能创建一个简单的模态框或导航栏。 因为 React 使用虚拟 DOM 而不是每次状态发生变化时都编写和重写真实的 DOM 元素（在 Angular 中经常这样做），所以使用 React 可以通过减少代码行来节省宝贵的时间，同时还可以使您的应用程序比以前更快前。

在浏览器中安装

在浏览器中使用 React 之前，您需要先安装它。 幸运的是，由于 npm 和 Browserify，这是一个简单的过程。 使用 Node 或其他服务器端环境？ 您也可以为此使用 npm 和 Browserify。 安装完所有内容后，使用您喜欢的文本编辑器创建一个 HTML 文件。 否则，使用像 Create-React-App 这样的样板生成器为您创建一个已经设置了所有这些东西的基本入门项目。

将 App.js 转换为使用 ReactJS

我们所有的代码目前都在一个名为 App.js 的文件中。 但这使得测试变得困难。 所以，让我们把它分成多个文件。 我们将从将一个组件从用 ES6 编写成用 JSX 编写开始。 如果我们将所有 React 组件保存在一个目录中（你应该这样做），这是最简单的。 因此，让我们创建一个空的 src/components 目录并将 App.js 移入其中：mv app/App.js src/components/app-react.js。 然后将其重命名为 app-react.js。

要使用 React 而不仅仅是 ES6，请更改 use strict； 在文件顶部使用 babel； 您还需要通过 npm install –save babel-CLI babel-preset-es2015 babel-preset-react 安装 Babel，这将使 Babel 编译您的新 JSX 语法。

使用我们的示例应用程序开始构建

有很多方法可以开始使用 React，但我们最喜欢的方法之一是构建一个简单的待办事项列表应用程序。 为了让您快速行动并避免许多常见错误，我们构建了一个示例应用程序，您只需在其中交换后端代码和前端组件。 它配备了您需要的一切——包括图像——以确保它看起来和它一样好用。

不想自己编码？ 没问题！ 您实际上可以按照这些简单的步骤复制我们所有的组件。 将它们复制到项目中后，只需修改它们即可满足您的目的！ 这是你的选择！ 在此处查看所有三个入门选项。

使用组件的基本示例

如果您查看任何 Web 应用程序，您会注意到的第一件事就是每个元素都是独立的。 在一个典型的页面上，有不同的页眉、页脚、徽标和按钮。 但是，在使用 React.js 时，您可以使用单个 HTML 元素来表示所有组件，而不是为页面上的每个组件使用多个 HTML 元素。 这听起来可能违反直觉； 毕竟，这不是我们多年来一直在做的事情吗？

您可能喜欢： Facebook JavaScript 引擎 (Hermes) 提升 Android 上的 React Native。

JSX 语法介绍

JSX 不是像 JavaScript 或 TypeScript 这样的编程语言，而是一种设计为 JavaScript 扩展的语法。 因此，对于新开发人员来说，了解它的工作原理以及可以在何处使用它非常重要。 JSX 代码的编写方式看起来与 HTML 非常相似，这使得 JSX 代码成为同时学习两种语言的新开发人员的重要第一步。 有关 JSX 的独特之处以及如何轻松掌握它的更多信息，请阅读我们完整的 ReactJS 教程！

要开始构建您的第一个 React 项目，请在终端中输入 mkdir react_tutorial 来创建一个新目录。 完成运行后，通过键入 cd react_tutorial 导航到新创建的目录。 然后打开您的终端并通过键入 node -v 启动 Node.js。

如果您成功安装了 Node，您应该会在 Node 旁边看到 v10.x。 如果没有，如果您使用的是 macOS 或 Linux，请尝试使用 nvm install 10。 如果这也不起作用，那么谷歌应该能够帮助找出那里出了什么问题！ 一旦 Node 正确安装了 10+ 版本，我们就可以继续从头开始创建我们的项目了！

静态 vs 动态 vs PureComponent

在使用现代 JavaScript 构建 Web 应用程序时，您可以通过三个主要选项来创建 UI 组件。 这些包括静态 HTML（react-markup）、动态 AJAX 请求（react-data）和重用现有的 DOM 元素（react-pure）。 每种方法都有自己的优点，可以根据您的具体用例以不同方式应用。

例如，如果您知道某些元素将始终可用，那么您可以将它们放在静态 HTML 标记中。 但是，如果您需要从可能尚不存在的数据库中获取内容，使用 react-data 是更好的选择。 在决定哪种组件创建方法最适合您的项目时，重要的是要考虑应用程序每个部分的稳定性和永久性。

ReactJS 组件中的生命周期方法

您可以在组件中使用一些生命周期方法来控制组件生命周期的不同部分。 componentWillMount() 方法在第一次渲染组件之前立即被调用。 在其中，您可以添加组件所需的任何初始化，例如使用 localStorage 保存信息。 componentDidMount() 方法也会在组件挂载和渲染后立即调用。 在这里，您可以添加应该在组件完全初始化后运行的代码（例如，创建新的网络请求）。

在组件中处理状态

Reacts 处理状态管理的方式有些独特。 要理解为什么我们必须首先考虑大多数框架如何处理状态。

传统上，开发人员会认为组件的状态存储在自身内部。 这会导致很多问题。 如果一个组件想要更新另一个组件的状态，它需要一个对该另一个组件的引用（props）才能这样做。 如果您希望您的状态对象或数组在组件之间保持同步，您需要某种所有组件都可以访问的集中式数据存储或事件发射器。

虽然对于只有两个或三个不同状态的小型应用程序中的组件来说可能足够简单，但是当您的应用程序具有数十种不同状态时会发生什么？ 你如何管理它们？

将数据从父组件传递到子组件

有两种方法可以将数据从父组件传递到子组件：通过 props 或状态。 通过 props 传递数据对于为组件定义变量很有用，例如定义数组中有多少项。 另一方面，如果你想传入大对象（这可能会降低你的应用程序的速度）或定义你想从子组件中调用的函数，通过状态传递数据会很有用。 让我们回顾一下这两种方法，看看什么时候适合在我们的代码中使用它们！

您可能还喜欢： React JS 在 Headless WordPress 中提供了哪些改进？

结论

当您聘请 ReactJS 开发人员时，请确保您选择的自由职业者在使用 JavaScript、CSS、HTML 和 Node.js 方面经验超过 5 年。 重要的是，您的开发人员可以通过提供示例项目和设计与您的特定要求相关的项目来展示他们的专业知识。 这将帮助他们轻松了解您的业务目标。

任何专家在开始任何工作之前总是会先问问题。 因此，在使用 React 框架构建网站时，聘请专家在适当的时候提出问题是必须的。 ReactJS 开发人员的平均招聘成本在每小时 40-100 美元之间。 但专家收费高于正常水平。 因此，在为使用 ReactJS 开发框架建立网站制定预算时，请记住这一点。

 本文由 Tagline Infotech LLP 的 Rahul Kalsariya 撰写。