ReactJS入门

React

React

React是 Facebook 的产品，它是一个非常灵活高效的 JavaScript 库，用于构建交互式用户界面。React 构成了 Web 应用程序的视图层，也就是技术上的前端。这使得创建具有可重用组件、状态管理、DOM 渲染等诸多关键特性的 Web 应用程序变得更加容易，这些特性将在后文详细介绍。React 主要用于构建单页 Web 应用程序 (SPA)。在本文中，我们将了解 React 库的基础知识以及它如此受欢迎的原因。

特征

• 成分

ReactJS 使用组件，组件是独立且可重用的代码块。换句话说，组件是独立运行的函数，每个组件都管理着自己的状态。在构建大型应用程序时，将各个元素块拆分成一个个独立的模块，使得 Web 应用程序的构建变得更加容易。

• 虚拟 DOM

每当原始 DOM 发生任何变化时，整个应用程序都会在虚拟 DOM 上重新渲染。系统会检查原始 DOM 和虚拟 DOM 之间的差异，并仅更新原始 DOM 中的差异部分。这提高了 React 应用程序的速度，因为无需刷新页面即可看到更改。

• 声明式

使用 React 设计任何视图都非常简单，而且它们都能管理自己的状态。React 会确保将正确的组件渲染到 DOM 中，这使得用户能够轻松地维护和调试代码。

• JSX

JSX 代表 Javascript XML，它是 Javascript 和 XML 的混合体。如前所述，React 由组件构成。这些组件包含 JavaScript 逻辑以及用于渲染到屏幕上的 HTML/XML。这些组件文件的扩展名为 .jsx。

• 表现

React 的速度快得惊人。它的虚拟 DOM 最大限度地减少了不必要的 DOM 重新渲染。此外，React 使用一种名为 Flux 的模式来实现单向绑定（单向数据流）。这使得组件是不可变的，从而提高了灵活性和效率。

为什么选择 React？

• 易于学习

与其他库或框架（例如 Angular 或 VueJS）相比，React 更容易学习和使用。只要掌握了 HTML、CSS 和 Javascript 的基础知识，就可以开始使用 React 了。

• 简单

React 非常易于使用。它拥有许多强大的扩展包，例如 webpack，用于运行其引擎。只需一些简单的 JSX 代码，即可在屏幕上独立渲染组件。当与 Redux、Material-UI、Materialize、GraphQL 等其他 JS 库结合使用时，React 将成为一款非常强大的工具。

• 开发者使用

与其他库相比，React 是最受欢迎的库。React 是开源的，在 GitHub 上拥有活跃的贡献者。该代码库本身拥有超过 15 万颗星，并被 380 万开发者使用。

• React Native

React 也可用于创建移动应用。这种 React 版本被称为 React Native。这展现了 React 强大的适应性。只要规划得当、执行到位，开发者就可以为 Android、iOS 和 Web 平台开发应用。

设置

React 的初始设置非常简单，如果该软件包已全局安装在您的系统中，则无需频繁设置。

在安装 React 之前，请确保您的系统已安装NodeJS和NPM （Node 包管理器）。

要安装 React，请运行以下命令：

npx create-react-app <your-app-name>

安装完成后，进入您的应用程序目录：

cd <your-app-name>

运行以查看您的默认应用程序：

npm start

结果

您可以在浏览器中看到一个漂亮的 React 应用。您可以随意修改 React src 文件夹中的文件，创建自己的 Web 或移动应用。

我希望这篇文章能为你的 React 开发之旅开启一个良好的开端。如有任何疑问，欢迎随时通过LinkedIn联系我。

谢谢你！