A framework or library is just a set of tools that are created to solve a recurring problem more efficiently. Hence, there’s nothing that vanilla JS can’t solve which can be solved by using a framework like React, Angular or Vue. Most of the people jump into learning frameworks before learning enough JavaScript. It is not totally wrong but there’s just one problem. If one doesn’t have enough experience learning core JavaScript, he doesn’t know the benefits the particular framework/library provides nor the problem it tries to solve. So developers/programmers need to have a clear idea about what the framework is trying to provide and what is available in the language itself. Also, it is always a good thing to know what problems might have arisen if we had tried to solve the same problem with the basic language itself.

框架或库只是为更有效地解决重复出现的问题而创建的一组工具。因此，没有什么是普通 JS 无法解决的，可以通过使用 React、Angular 或 Vue 等框架来解决。大多数人在学习足够的 JavaScript 之前就开始学习框架。这并非完全错误，但只有一个问题。如果一个人没有足够的学习核心 JavaScript 的经验，他就不知道特定框架/库提供的好处，也不知道它试图解决的问题。因此，开发人员/程序员需要清楚地了解框架试图提供什么以及语言本身提供什么。此外，如果我们试图用基本语言本身解决同样的问题，知道可能会出现什么问题总是一件好事。

React JS

In this article, I will try to list out some of the core concepts that are necessary for learning a JavaScript library such as React.

Object-oriented programming and ES6 class keyword

Object-oriented programming principles play a vital role in react. Prior to React 16.08, all stateful components in React were created using class-based components and functional components were called stateless functional components. The newer addition of hooks allows us to create a state on functional components, but as it is a new feature added in the library, it might take time for adoption of this feature. Therefore it is important for the learners to learn about Object-oriented programming and the class keyword added in 2015 in the language. It is also necessary for people to know about prototypal inheritance, constructor functions and many more concepts such as inheritance and composition.

ReactJS

在本文中，我将尝试列出一些学习 React 等 JavaScript 库所必需的核心概念。

面向对象编程和 ES6 类关键字

面向对象的编程原则在反应中起着至关重要的作用。在 React 16.08 之前，React 中的所有有状态组件都是使用基于类的组件创建的，功能组件被称为无状态功能组件。新添加的钩子允许我们在功能组件上创建状态，但由于它是库中添加的新功能，因此采用此功能可能需要时间。因此学习者学习面向对象编程以及语言中2015年新增的class关键字非常重要。人们也有必要了解原型继承、构造函数以及更多的继承和组合等概念。

Code like this shouldn’t get you banging head trying to understand what each line means

All sorts of different methods available

You should also be able to use different kinds of default methods available for data types like strings and arrays. You’ll have to sort, filter, map through a list of items more often than you imagine while building these kinds of applications. Therefore I recommend you learning at least some of the methods available on JavaScript.

The ones that I recommend are map, filter, reduce, sort, include etc for arrays, split, join, reverse etc for strings. You’ll explore more as you learn more stuff in react.

像这样的代码不应该让你试图理解每一行的含义

各种不同的方法可用

您还应该能够使用可用于字符串和数组等数据类型的不同类型的默认方法。在构建这些类型的应用程序时，您必须比想象的更频繁地对项目列表进行排序、过滤和映射。因此，我建议您至少学习一些 JavaScript 上可用的方法。

我推荐的是数组的映射、过滤、缩减、排序、包含等，字符串的拆分、连接、反向等。当你在 React 中学习更多的东西时，你会探索更多。

Promises, callbacks and asynchronous JavaScript

Asynchronous JavaScript is super important in Single Page Applications. You have to make network calls asynchronously and for that, the knowledge of asynchronous JS and the ways to handle AJAX requests becomes a necessity.

Promises provide a way to handle asynchronous code. Callbacks can do that too but Promises make the code a lot cleaner.

承诺、回调和异步 JavaScript

异步 JavaScript 在单页应用程序中非常重要。你必须异步地进行网络调用，为此，异步 JS 的知识和处理 AJAX 请求的方法成为必要。

Promise 提供了一种处理异步代码的方法。回调也可以做到这一点，但 Promise 使代码更简洁。

Async Await

Async-await provides a simpler way to interact with promises. They make asynchronous code look synchronous and yet, the working is still asynchronous.

异步等待

Async-await 提供了一种更简单的方式来与 Promise 交互。它们使异步代码看起来是同步的，但工作仍然是异步的。

Modules, import, export, babel

When working with React, you isolate your components on separate files. You export some component from a file and import in the another.

Facebook provides a tool called create-react-app that helps users to initialize a react project in a convenient fashion.

create-react-app comes with all these settings and configurations pre-built so you don’t have to do these manually but it is super important for you to understand how these things are happening behind the scenes.

Babel is a tool that compiles modern JavaScript to JavaScript version supported by all popular browsers. You can also explore how those work and try experimenting what the code you’re used to writing compiles to in the older versions.

模块，导入，导出，babel

使用 React 时，您将组件隔离在单独的文件中。您从一个文件中导出某个组件并导入另一个文件。

Facebook 提供了一个名为 create-react-app 的工具，可以帮助用户以方便的方式初始化 React 项目。

create-react-app 带有所有这些预先构建的设置和配置，因此您不必手动执行这些操作，但了解这些事情在幕后是如何发生的对于您来说非常重要。

Babel是一种将现代 JavaScript 编译为所有流行浏览器支持的 JavaScript 版本的工具。您还可以探索它们是如何工作的，并尝试尝试在旧版本中编写编译所使用的代码。

The above list explained the concepts that you must be familiar before jumping to react. There’s one other thing that I would like to recommend and it is to build projects using Vanilla JS. To appreciate the full beauty of React or other frameworks, you should try building a project without using a framework or a library. That will help you to know and understand the complexity without the existence of that particular library.

A “to-do list” is kind of a standard and in my opinion, it is the project you should do too. A “to-do list” application should contain a form to add to-dos. There should also exist a button to delete the particular to-do and also mark them if they are completed or not.

Implementation of to-do with these features would be enough for you to understand how react works and the important concepts such as states, components, lifecycle, state change etc.

Thank you for reading the article. If you like it and want to read more of my blogs you can check my website https://bigomega.dev.

上面的列表解释了你在跳转反应之前必须熟悉的概念。我还想推荐另一件事，那就是使用 Vanilla JS 构建项目。要欣赏 React 或其他框架的全部美感，您应该尝试在不使用框架或库的情况下构建项目。这将帮助您在不存在该特定库的情况下了解和理解复杂性。

“待办事项清单”是一种标准，在我看来，它也是你应该做的项目。“待办事项列表”应用程序应包含用于添加待办事项的表单。还应该有一个按钮来删除特定的待办事项并标记它们是否完成。

使用这些功能实现待办事项足以让您了解 React 的工作原理以及状态、组件、生命周期、状态更改等重要概念。

感谢您阅读这篇文章。如果你喜欢它并想阅读更多我的博客，你可以查看我的网站https://bigomega.dev。