坚如磐石的React.js基础：入门指南

by Rajat Saxena

通过拉贾特·萨克森纳(Rajat Saxena)

坚如磐石的React.js基础：入门指南 (Rock Solid React.js Foundations: A Beginner’s Guide)

I’ve been working with React and React-Native for the last couple of months. I have already released two apps in production, Kiven Aa (React) and Pollen Chat (React Native). When I started learning React, I was searching for something (a blog, a video, a course, whatever) that didn’t only teach me how to write apps in React. I also wanted it to prepare me for interviews.

在过去的几个月中，我一直在使用React和React-Native。 我已经在生产中发布了两个应用程序， Kiven Aa (React)和Pollen Chat (React Native)。 当我开始学习React时，我正在寻找的东西(博客，视频，课程等)不仅仅教我如何在React中编写应用程序。 我也希望它为我面试做好准备。

Most of the material I found, concentrated on one or the other. So, this post is aimed towards the audience who is looking for a perfect mix of theory and hands-on. I will give you a little bit of theory so that you understand what is happening under the hood and then I will show you how to write some React.js code.

我发现的大多数材料都集中在一个或另一个上。 因此，本文章面向正在寻求理论与实践完美结合的读者。 我将为您提供一些理论知识，以便您了解幕后发生的事情，然后向您展示如何编写一些React.js代码。

If you prefer video, I have this entire course up on YouTube as well. Please check that out.

如果您喜欢视频，我还将在YouTube上开设整个课程。 请检查一下。

Let’s dive in…

让我们潜入……

React.js是一个用于构建用户界面JavaScript库 (React.js is a JavaScript library for building user interfaces)

You can build all sorts of single page applications. For example, chat messengers and e-commerce portals where you want to show changes on the user interface in real-time.

您可以构建各种单页应用程序。 例如，要在用户界面上实时显示更改的聊天工具和电子商务门户。

一切都是一个组成部分 (Everything’s a component)

A React app is comprised of components, a lot of them, nested into one another. “But what are components?”, you may ask.

一个React应用程序由彼此嵌套的许多组件组成。 您可能会问：“但是什么是组件？”

A component is a reusable piece of code, which defines how certain features should look and behave on the UI. For example, a button is a component.

组件是一段可重用的代码，它定义了某些功能在UI上的外观和行为。 例如，按钮是组件。

Let’s look at the following calculator, which you see on Google when you try to calculate something like 2+2 = 4 –1 = 3 (quick maths!)

让我们看一下下面的计算器，当您尝试计算2 + 2 = 4 –1 = 3(快速数学！)时，您会在Google上看到该计算器。

As you can see in the image above, the calculator has many areas — like the result display window and the numpad. All of these can be separate components or one giant component. It depends on how comfortable one is in breaking down and abstracting away things in React

如上图所示，计算器有很多区域，例如结果显示窗口和数字键盘 。 所有这些都可以是单独的组件，也可以是一个巨型组件。 这取决于人们在React中分解和抽象事物的舒适程度

You write code for all such components separately. Then combine those under one container, which in turn is a React component itself. This way you can create reusable components and your final app will be a collection of separate components working together.

您分别为所有此类组件编写代码。 然后将它们合并到一个容器中，该容器本身就是一个React组件。 这样，您可以创建可重用的组件，并且最终的应用程序将是一起工作的独立组件的集合。

The following is one such way you can write the calculator, shown above, in React:

以下是您可以在React中编写上面所示的计算器的一种方法：

Yes! It looks like HTML code, but it isn’t. We will explore more about it in the later sections.

是! 它看起来像HTML代码，但事实并非如此。 我们将在后面的部分中进一步探讨它。

建立我们的游乐场 (Setting up our Playground)

This tutorial focuses on React’s fundamentals. It is not primarily geared towards React for Web or React Native (for building mobile apps). So, we will use an online editor so as to avoid web or native specific configurations before even learning what React can do.

本教程重点介绍React的基础知识。 它并不是主要针对React for Web或React Native (用于构建移动应用程序)。 因此，我们将使用在线编辑器，以便在学习React可以做什么之前避免使用Web或本机特定的配置。

I’ve already set up an environment for you on codepen.io. Just follow the link and read all the comments in HTML and JavaScript (JS) tabs.

我已经在codepen.io上为您设置了一个环境。 只需点击链接，然后阅读HTML和JavaScript(JS)标签中的所有注释。

控制组件 (Controlling Components)

We’ve learned that a React app is a collection of various components, structured as a nested tree. Thus, we require some sort of mechanism to pass data from one component to other.

我们了解到，React应用程序是各种组件的集合，结构为嵌套树。 因此，我们需要某种机制将数据从一个组件传递到另一个组件。

输入“道具” (Enter “props”)

We can pass arbitrary data to our component using a props object. Every component in React gets this props object.

我们可以使用props对象将任意数据传递到组件。 React中的每个组件都会获得这个props对象。

Before learning how to use this props object, let’s learn about functional components.

在学习如何使用此props对象之前，让我们学习功能组件。

a)功能组件 (a) Functional component)

A functional component in React consumes arbitrary data that you pass to it using props object. It returns an object which describes what UI React should render. Functional components are also known as Stateless components.

React中的功能组件消耗您使用props对象传递给它的任意数据。 它返回一个描述UI React应该呈现的对象。 功能组件也称为无状态组件。

Let’s write our first functional component:

让我们编写第一个功能组件：

It’s that simple. We just passed props as an argument to a plain JavaScript function and returned, umm, well, what was that? That <div>{props.name}</div>thing! It’s JSX (JavaScript Extended). We will learn more about it in a later section.

就这么简单。 我们只是将props作为参数传递给一个普通JavaScript函数，然后返回了， 嗯，那是什么？ <div>{props.name} </ d i v>！ 它是JSX(JavaScript扩展)。 我们将在后面的部分中详细了解它。

This above function will render the following HTML in the browser:

上面的函数将在浏览器中呈现以下HTML：

Read the section below about JSX, where I have explainshow we get this HTML from our JSX code.

阅读下面有关JSX的部分，我在其中进行了说明，表明我们从JSX代码中获得了此HTML。

How can you use this functional component in your React app? Glad you asked! It’s as simple as the following:

如何在React应用程序中使用此功能组件？ 很高兴你问！ 就像下面这样简单：

The attribute name in the above code becomes props.name inside our Hello component. The attribute age becomes props.age and so on.

上面代码中的属性name在我们的Hello组件内变为props.name 。 属性age变为props.age等。

Remember! You can nest one React component inside other React components.

记得！ 您可以将一个React组件嵌套在其他React组件中。

Let’s use this Hello component in our codepen playground. Replace the divinside ReactDOM.render() with our Hello component, as follows, and see the changes in the bottom window.

让我们在Codepen Playground中使用此Hello组件。 如下所示，用我们的Hello组件替换ReactDOM.render()的div ，并在底部窗口中查看更改。

But what if your component has some internal state? For instance, like the following counter component, which has an internal count variable, which changes on + and — key presses.

但是，如果您的组件具有某种内部状态怎么办？ 例如，像下面的计数器组件一样，它具有一个内部计数变量，可在+和-按键上更改。

b)基于类的组件 (b) Class-based component)

The class-based component has an additional property state , which you can use to hold a component’s private data. We can rewrite our Hello component using class notation as follows. Since these components have a state, these are also known as Stateful components.

基于类的组件具有附加的属性state ，您可以使用它来保存组件的私有数据。 我们可以使用以下类标记重写Hello组件。 由于这些组件具有状态，因此也称为有状态组件 。

We extend React.Component class of React library to make class-based components in React. Learn more about JavaScript classes here.

我们扩展React库的React.Component类以在React中制作基于类的组件。 在此处了解有关JavaScript类的更多信息。

The render() method must be present in your class as React looks for this method in order to know what UI it should render on screen.

当React寻找该方法时， render()方法必须出现在您的类中，以便知道它应该在屏幕上呈现什么UI。

To use this sort of internal state, we first have to initialize the state object in the constructor of the component class, in the following way.

要使用这种内部状态，我们首先必须按照以下方式在组件类的构造函数中初始化state对象。

Similarly, the props can be accessed inside our class-based component using this.props object.

同样，可以使用this.props对象在基于类的组件内部访问props 。

To set the state, you use React.Component's setState(). We will see an example of this, in the last part of this tutorial.

要设置状态，请使用React.Component的setState() 。 在本教程的最后部分，我们将看到一个示例。

Tip: Never call setState() inside render() function, as setState() causes component to re-render and this will result in endless loop.

提示：切勿在render()函数内调用setState() ，因为setState()会导致组件重新渲染，这将导致无限循环。

Apart from state, a class-based component has some life-cycle methods like componentWillMount(). These you can use to do stuff, like initializing the state and all but that is out of the scope of this post.

除了state之外，基于类的组件还具有一些生命周期方法，例如componentWillMount(). 您可以使用它们来做一些事情，例如初始化state以及所有其他内容，但这超出了本文的范围。

JSX (JSX)

JSX is a short form of JavaScript Extended and it is a way to write React components. Using JSX, you get the full power of JavaScript inside XML like tags.

JSX是JavaScript Extended的简称，是编写React组件的一种方式。 使用JSX，您可以在XML之类的标记中获得JavaScript的全部功能。

You put JavaScript expressions inside {}. The following are some valid JSX examples.

您将JavaScript表达式放在{} 。 以下是一些有效的JSX示例。

The way it works is you write JSX to describe what your UI should look like. A transpiler like Babel converts that code into a bunch of React.createElement() calls. The React library then uses those React.createElement() calls to construct a tree-like structure of DOM elements (in case of React for Web) or Native views (in case of React Native) and keeps it in the memory.

它的工作方式是您编写JSX来描述您的UI外观。 一个transpiler像Babel的代码转换成一堆React.createElement()的调用。 然后，React库使用那些React.createElement()调用来构造DOM元素(对于React for Web而言)或本机视图(对于React Native而言)的树状结构，并将其保存在内存中。

React then calculates how it can effectively mimic this tree in the memory of the UI displayed to the user. This process is known as reconciliation. After that calculation is done, React makes the changes to the actual UI on the screen.

然后，React计算在显示给用户的UI内存中如何有效模仿此树。 此过程称为和解 。 完成该计算后，React会对屏幕上的实际UI进行更改。

You can use Babel’s online REPL to see what React actually outputs when you write some JSX.

您可以使用Babel的在线REPL来查看编写一些JSX时React的实际输出。

由于JSX只是简单的React.createElement()调用的语法糖，因此可以在没有JSX的情况下使用React (Since JSX is just a syntactic sugar over plain React.createElement() calls, React can be used without JSX)

Now we have every concept in place, so we are well positioned to write a counter component that we saw earlier as a GIF.

现在我们已经有了每个概念，因此我们可以很好地编写我们先前视为GIF的counter组件。

The code is as follows and I hope that you already know how to render that in our playground.

代码如下，希望您已经知道如何在我们的操场上进行渲染。

The following are some salient points about the above code.

以下是有关上述代码的一些要点。

1. JSX uses camelCasing hence button's attribute is onClick, not onclick, as we use in HTML.

   JSX使用camelCasing因此button的属性是onClick ，而不是我们在HTML中使用的onclick 。

2. Binding is necessary for this to work on callbacks. See line #8 and 9 in the code above.

   结合是必要的this对回调的工作。 请参见上面的代码中的＃8和9行。

The final interactive code is located here.

最终的交互式代码位于此处 。

With that, we’ve reached the conclusion of our React crash course. I hope I have shed some light on how React works and how you can use React to build bigger apps, using smaller and reusable components.

至此，我们已经达到了React崩溃课程的结论。 我希望我能对React的工作原理以及如何使用React使用较小且可重用的组件来构建更大的应用程序有所了解。

If you have any queries or doubts, hit me up on Twitter @rajat1saxena or write to me at [e-mail].

如果您有任何疑问或疑问，请在Twitter @ rajat1saxena上打我，或给我写信至[e-mail] 。

Please recommend this post, if you liked it and share it with your network. Follow me for more tech related posts and consider subscribing to my channel Rayn Studios on YouTube. Thanks a lot.

如果喜欢，请推荐这篇文章，并与您的网络分享。 关注我，获取更多与技术相关的信息，并考虑在YouTube上订阅我的频道Rayn Studios 。 非常感谢。

翻译自: https://www.freecodecamp.org/news/rock-solid-react-js-foundations-a-beginners-guide-c45c93f5a923/