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

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

清单/先决条件

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

1. HTML、CSS、JavaScript

如果您是经验丰富的开发人员，请跳过此部分，对于初学者，这里有_一个_快速介绍。 

  • 每个前端开发人员都从这三件事开始他们的旅程。这些是前端 Web 开发的基础，它们共同创建一个功能齐全的 Web 应用程序/网站。
  • 将人体视为网站或 Web 应用程序。
  • HTML可以被视为主体的结构或“骨架”，它告诉我们必须从哪里来。
  • CSS定义了“Skin, Flesh”的样式，告诉了一个特定的片段应该是什么样子，它的颜色、高度、宽度等应该是什么，
  • 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’关键字的概念，这对很多开发人员来说是相当混乱的。与此同时，了解什么是Call、Apply 和Bind方法（用于将“this”关键字绑定/连接到对象）。

3. NodeJS 基础知识和代码编辑器

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

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

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

学习 ReactJS

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

  • 组件架构（已经讨论过）。
  • **状态：**基本上“状态”包含同步变量。如果您更改状态变量的值，那么更改会立即反映在使用该特定变量的所有位置。
  • **Props：**就像在函数或方法中传递的参数一样。在 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 克隆

Webpack： Webpack 是 Javascript 中的模块捆绑器，可帮助您将依赖项维护为项目的静态文件，因此开发人员不必这样做。Webpack 还带有加载器。加载程序有助于围绕您的项目运行特定任务。观看视频Webpack 教程并在Webpack 官方文档中阅读相关内容。

**服务器渲染：**学习这个概念将帮助您在服务器中创建组件并在浏览器中将其渲染为 HTML，当所有 JavaScript 模块都下载到浏览器中时，React 就开始了。它是 React 最酷的特性之一，它可以与任何后端技术一起使用。从Tyler McGinnis 的链接 React 服务器渲染中理解这个概念。

**Redux：**在复杂的应用程序中，您必须跨组件管理状态。Redux 是一个 javascript 库，解决了这个问题并帮助您维护应用程序状态。在 Redux 中，您将所有状态存储在一个源中。通过链接Introduction to React-Redux和React Redux Tutorial for Beginners以更好的方式理解这个概念。

这就是从一开始就学习 React 的路线图。我们希望这会有所帮助！！！