📌  相关文章
📜  如何学习 ReactJS：初学者完整指南

📅  最后修改于: 2021-10-19 05:36:17             🧑  作者: Mango

每个前端开发人员和 Web 开发人员都知道在多个地方编写相同的代码是多么令人沮丧和痛苦。如果他们需要在多个页面上添加一个按钮，他们将被迫执行大量代码。使用其他框架的开发人员即使在制作频繁更改的组件时也面临着对大多数代码进行返工的挑战。开发人员需要一个框架或库，让他们能够分解复杂的组件并重用代码以更快地完成他们的项目。在这里 React 出现并解决了这个问题。

How-To-Learn-ReactJS-A-Complete-Guide-For-Beginners

React 是最流行的用于构建用户界面的 JavaScript 库。它快速、灵活，并且还有一个强大的在线社区，可以随时为您提供帮助。 React 最酷的地方是它基于组件，您可以将复杂的代码分解为单独的部分，即组件，这有助于开发人员以更好的方式组织他们的代码。许多公司正在转向 React，这就是大多数初学者和有经验的开发人员也扩展他们学习这个库的知识的原因。
学习这个库是一项艰巨的任务。您观看了很多教程，并尝试获得最好的材料来学习这个库，但是如果您不知道正确的路径或逐步学习它的过程，它可能会变得不知所措。我们将讨论开始使用 React 的路线图以及进入 React 的基本先决条件（清单）。让我们开始吧…

清单/先决条件

  1. HTML、CSS 和 JavaScript 的基本知识。
  2. Javascript 的一些 ES6 特性，例如
    • 让和常量
    • 箭头函数
    • 类和“this”关键字
  3. NodeJS 和代码编辑器的基础知识

1. HTML、CSS、JavaScript

如果您是经验丰富的开发人员，请跳过本节，对于初学者，这里是快速介绍。

  • 每个前端开发人员都从这三件事开始他们的旅程。这些是前端 Web 开发基础的基本基础，它们共同创建功能齐全的 Web 应用程序/网站。
  • 将人体视为网站或网络应用程序。
  • HTML可以被认为是身体的结构或“骨架”，它告诉我们必须要从哪里来。
  • CSS定义了“皮肤，肉体”的样式，告诉特定段应该是什么样子，它的颜色、高度、宽度等，
  • JavaScript定义了功能，它是“大脑”的一部分，它告诉每个部分做什么。

2. JavaScript 的 ES6 特性

ES6 是 JavaScript 的版本，有很多 ES6 的特性。要开始使用 React，您需要了解箭头函数、Let 和 Const、Class 和“this”关键字。
箭头函数：箭头函数允许您为函数编写更短的语法。它使您的代码干净且更具可读性。检查下面的代码片段…

javascript
// Old method
function greet()
{
    console.log('GeeksforGeeks');
}
var greet1 = function(){
    console.log('GeeksforGeeks');
}
//ES6 method
var greet2 = () => {
    console.log('GeeksforGeeks');
}

Let和Const ：您将使用 ‘let’ 和 ‘const’ 而不是 ‘var’ 关键字。两者都不同于var，简单来说……

  • Let定义了一个局部变量，将它们的范围限制在声明它们的块中。
  • Const定义了一个不能改变其值的常量变量。

类和“this”关键字：您必须学习 ES6 中的面向对象编程概念，例如类、方法、对象。您可能已经在其他语言（如 C++ 或Java了解了这些概念。从 ES6 中阅读此内容 |类并按照此视频教程了解这一点。
如果我们谈论 ‘this’ 关键字，那么它表示正在执行的当前对象。确保您清除了“this”关键字的概念，这对许多开发人员来说非常令人困惑。同时了解什么是调用、应用和绑定方法（用于将“this”关键字绑定/连接到对象）。

3. NodeJS 基础和代码编辑器

了解 NodeJS 基础知识对于使用 ReactJS 很重要。简单来说，NodeJS 是 javascript 的执行环境。很多人认为它是一种编程语言，这是不正确的。每个浏览器都有嵌入到浏览器中的 JavaScript 引擎，例如，Chrome 有一个 V8 引擎，Mozilla Firefox 有 SpiderMonkey。您不能在浏览器之外执行任何操作，例如文件操作、操作系统操作、网络操作等等，因此 Node 应运而生。 Node 允许您在浏览器之外执行所有这些操作。它嵌入了 chrome 的 V8 引擎。
现在你可能对 NodeJs 已经很熟悉了，所以让我们来讨论一下学习 React 必须知道的 Node 的所有特性。

  • NPM（节点包管理器）： NPM 是一个包管理器，用于将节点模块和包安装到您的项目中，就像Python 的PIP 一样。
  • 导入和导出关键字。
    • 导入：在项目中使用 NPM 安装 Node 模块后，您必须使用“import”关键字才能使用该模块。
    • 导出：当你创建一个模块/组件并且你只需要返回一部分，而不是所有的方法和变量时，使用这个关键字。

阅读文章 ReactJS |导入和导出以获得有关此主题的更多帮助。您可以使用任何代码编辑器来处理 React。许多 Web 开发人员大多更喜欢 Visual Studio Code — VS CODE —（强烈推荐）、Sublime Text 或 Atom。

学习 ReactJS

基础：以上我们讨论的所有内容都是 ReactJS 的先决条件。现在，一旦您了解了上述所有内容，就可以开始使用 React。首先了解 React 的基本概念。我们将在这里为您提供一个概览。
React 是 Facebook 开发的用于构建交互式用户界面的 Javascript 库。它遵循基于组件的架构，这意味着您将整个 UI 部分划分为可重用的组件，所有组件都是单独制作的，最后安装到一个父组件中，然后渲染。下面是一些需要在 ReactJS 中学习的重要主题……

  • 组件架构（已经讨论过）。
  • 状态：基本上“状态”保存同步变量。如果您更改状态变量的值，则更改会立即反映在使用该特定变量的所有位置。
  • 道具：就像在函数或方法中传递的参数一样。在 React 中，道具（参数）作为输入参数传递到 HTML 标签中。
  • 功能组件，类组件。
  • React 中的样式（CSS）。
  • 了解如何使用 React 应用程序连接到 API。

阅读教程 ReactJS | GeeksforGeeks，React 官方教程和观看视频 ReactJS 教程。一旦您对 React 有了基本的了解，您就可以开始构建一些基本项目，例如……

  • 简单的待办事项应用
  • 简单的计算器应用
  • 建立购物车
  • 使用 GitHub API 显示 GitHub 的用户统计信息

React Router： React 路由将帮助您了解路由在 React 应用程序中的工作原理。如何加载特定页面的内容或如何使用 React Router 重定向到特定页面。例如，要从“主页”页面重定向到“博客”页面，您必须设置路由，使其只能显示“博客”页面的内容。从视频 React Router for Beginners 和 React Router 中了解这一点。一旦你了解了 React Router，你就可以制作一些项目，比如一个简单的 CURD 应用程序或Hacker News clone
Webpack： Webpack 是 Javascript 中的模块捆绑器，可帮助您将依赖项作为项目的静态文件进行维护，因此开发人员不必这样做。 Webpack 还带有加载器。加载器有助于围绕您的项目运行特定任务。观看视频 Webpack 教程并在 Webpack 官方文档中阅读相关内容。
服务器渲染：学习这个概念将帮助你在服务器中创建组件并在浏览器中将其渲染为 HTML，当所有 JavaScript 模块都下载到浏览器中时，React 就会上台。它是 React 最酷的特性之一，它可以与任何后端技术一起使用。从 Tyler McGinnis 的链接 React 服务器渲染中理解这个概念。
Redux：在复杂的应用程序中，您必须跨组件管理状态。 Redux 是一个 javascript 库，解决了这个问题，它可以帮助您维护应用程序状态。在 Redux 中，您将所有状态存储在一个源中。从链接 React-Redux 介绍和 React Redux 初学者教程中更好地理解这个概念。
这就是从一开始就学习 React 的路线图。我们希望这是有帮助的！！！