The Best React Tutorials 最佳反应教程

React is a JavaScript library for building user interfaces. It was voted the most loved in the "Frameworks, Libraries, and Other Technologies" category of Stack Overflow's 2017 Developer Survey.

React是一个用于构建用户界面的JavaScript库。它被Stack Overflow 2017年开发者调查中的"框架,图书馆和其他技术"类别评为最受欢迎。

React is a JavaScript library and React applications built on it run in the browser, NOT on the server. Applications of this kind only communicate with the server when necessary, which makes them very fast compared to traditional websites that force the user to wait for the server to re-render entire pages and send them to the browser.

React是一个JavaScript库,构建在它上面的React应用程序在浏览器中运行,而不是在服务器上运行。这种应用程序仅在必要时与服务器通信,这使得它们与传统网站相比非常快,这些网站迫使用户等待服务器重新呈现整个页面并将其发送到浏览器。

React is used for building user interfaces - what the user sees on their screen and interacts with to use your web app. This interface is split up into components, instead of having one huge page you break it up into smaller pieces known as components. In more general terms, this approach is called Modularity.

React用于构建用户界面 - 用户在屏幕上看到并与之交互以使用您的Web应用程序。这个界面被分成几个部分,而不是将一个巨大的页面拆分成称为组件的较小部分。更一般地说,这种方法称为模块化。

  • It's declarative: React uses a declarative paradigm that makes it easier to reason about your application.
  • It's efficient: React computes the minimal set of changes necessary to keep your DOM up-to-date.
  • And it's flexible: React works with the libraries and frameworks that you already know.

The Best Tutorials for Learning React {#the-best-tutorials-for-learning-react}

freeCodeCamp has a

freeCodeCamp有一个 React tutorial on YouTube that will teach you all the basics in just 5 hours.

这将在短短5个小时内教你所有的基础知识。

We also have a more

我们还有更多 in-depth intermediate React tutorial that teaches you how to build an entire social media React app using Firebase. It is 12 hours long, and if you follow along, you will learn a ton of the intricacies of React.

它教你如何使用Firebase构建一个完整的社交媒体React应用程序。这是12个小时,如果你继续,你将学习大量的React错综复杂的知识。

Why learn React?{#why-learn-react}

React involves Composition, that is lots of components wrapping up the functionalities into an encapsulated container.

React涉及Composition,即将许多功能包装到封装容器中的许多组件。

Many popular websites use React implementing the MVC architectural pattern. Facebook (Partially), Instagram (Completely), Khan Academy (Partially), New York Times (Partially), Yahoo Mail (Completely), Dropbox's new photo and video gallery app Carousel (Completely) are the popular websites known to be using React.

许多流行的网站使用React实现MVC架构模式。 Facebook(部分),Instagram(完全),可汗学院(部分),纽约时报(部分),雅虎邮箱(完全),Dropbox的新照片和视频库应用程序Carousel(完全)是已知使用React的热门网站。

How are these large applications built using React? The simple answer is by building small applications or components. Example:

如何使用React构建这些大型应用程序?简单的答案是构建小型应用程序或组件。例:

const Component2 = () => {
  return (
    <div></div>
  );
};
const Component3 = () => {
  return (
    <div></div>
  );
};
const Component1 = () => {
  return (
    <div>
      <Component2 />
      <Component3 />
    </div>
  );
};

ReactDOM.render(
  <Component1 />, 
  document.getElementById("app")
);

React is Declarative, for the most part, which means we are concerned more with what to do rather than how to do a specific task.

在大多数情况下,React是声明性的,这意味着我们更关心的是做什么而不是如何做特定的任务。

Declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow. Declarative programming comes with certain advantages such as reduced side effects (occurs when we modify any state or mutate something or make an API request), minimized mutability (as a lot of it is abstracted), enhanced readability, and fewer bugs.

声明性编程是一种编程范式,表示计算的逻辑而不描述其控制流。声明性编程具有某些优点,例如减少副作用(当我们修改任何状态或改变某些东西或发出API请求时发生),最小化的可变性(因为很多是抽象的),增强的可读性和更少的错误。

React also has an unidirectional dataflow. UI in React is actually the function of the state. This means that as the state updates it updates the UI as well. So our UI progresses as the state changes.

React也有单向数据流。 React中的UI实际上是状态的功能。这意味着,当状态更新时,它也会更新UI。因此,随着状态的变化,我们的用户界

Advantages of React{#advantages-of-react}

Some reasons to use React are:

使用React的一些原因是:

  1. Fast. Apps made in React can handle complex updates and still feel quick and responsive.
  2. Modular. Instead of writing large, dense files of code, you can write many smaller, reusable files. React's modularity can be a beautiful solution to JavaScript's maintainability problems .
  3. Scalable. Large programs that display a lot of changing data are where React performs best.
  4. Flexible. You can use React for interesting projects that have nothing to do with making a web app. People are still figuring out React's potential. There's room to explore .

Virtual DOM{#virtual-dom}

React's magic comes from its interpretation of the DOM and its strategy for creating UIs.

React的神奇之处在于它对DOM的解释及其创建UI的策略。

React uses the Virtual DOM to render an HTML tree virtually first. Then, every time a state changes and we get a new HTML tree that needs to be taken to the browser's DOM, instead of writing the whole new tree React will only write the difference between the new tree and the previous tree (since React has both trees in memory). This process is known as Tree Reconciliation.

React首先使用Virtual DOM虚拟渲染HTML树。然后,每次状态改变并且我们得到一个需要被带到浏览器DOM的新HTML树,而不是编写整个新树,React只会写出新树和前一棵树之间的区别(因为React同时具有这两者)记忆中的树木)。此过程称为树对帐。

Reconciliation{#reconciliation}

React has a smart diffing algorithm that it uses to only regenerate in its DOM node what actually needs to be regenerated while it keeps everything else as is. This diffing process is possible because of React's virtual DOM.

React有一个智能差异算法,它只用于在DOM节点中重新生成实际需要重新生成的内容,同时保留其他所有内容。由于React的虚拟DOM,这种差异化过程是可能的。

Using the virtual DOM, React keeps the last DOM version in memory. When it has a new DOM version to take to the browser, that new DOM version will also be in memory, so React can compute the difference between the new and the old versions.

使用虚拟DOM,React将最后的DOM版本保留在内存中。当它有一个新的DOM版本带到浏览器时,新的DOM版本也将在内存中,因此React可以计算新版本和旧版本之间的差异。

React will then instruct the browser to update only the computed diff and not the whole DOM node. No matter how many times we regenerate our interface, React will take to the browser only the new "partial" updates.

然后,React将指示浏览器仅更新计算的diff而不是整个DOM节点。无论我们多少次重新生成我们的界面,React都会只向浏览器提供新的"部分"更新。

React from Scratch{#react-from-scratch}

Would you like to get started learning the basics of react without getting bogged down creating a development environment? Chances are that if you are new to web development, setting up a development environment can leave you feeling a little intimidated when you are just trying to learn React.

您是否想开始学习反应的基础知识而不会陷入创建开发环境的困境?如果您不熟悉Web开发,那么设置开发环境可能会让您在尝试学习React时感到有些恐惧。

In this article we are going to look at how we can get started with React using only a text editor and a browser and nothing else.

在本文中,我们将讨论如何仅使用文本编辑器和浏览器开始使用React,而不是其他任何内容。

1 --- Set Up Boiler Plate Code with Emmet{#1-set-up-boiler-plate-code-with-emmet}

Let's get started with step 1. We'll begin with a file in our browser called "index.html". We'll begin with the boiler plate HTML code. For a quick start I recommend using Emmet with whatever text editor you have. On the first line, type in

让我们开始第1步。我们将从浏览器中的一个名为"index.html"的文件开始。我们将从锅炉板HTML代码开始。为了快速入门,我建议您使用Emmet和任何文本编辑器。在第一行,输入 html:5 then press the shift key to get the code below. Or you can go ahead and copy and paste the code from below.

然后按shift键获取下面的代码。或者您可以继续复制并粘贴下面的代码。

html:5

This will result in the following code:

这将产生以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

</body>
</html>

We can fill in the title of "Time to React!".

我们可以填写"反应时间!"的标题。

This content will not appear in your webpage. Anything in the head section of the HTML file will be meta data that our browser will user to interpret our code in the body section. This title is going to be what appears on the tab for our page, not actually on the page.

此内容不会显示在您的网页中。 HTML文件的head部分中的任何内容都将是我们的浏览器将用户在body部分中解释我们的代码的元数据。此标题将显示在我们页面的选项卡上,而不是实际显示在页面上。

2 - Get Script Tags to Harness the Power of React and Babel Libraries{#2-get-script-tags-to-harness-the-power-of-react-and-babel-libraries}

Ok, item one is checked off of our list. Let's look at item two. We are going to set up our developer environment by using script tags to bring in React and Babel.

好的,第一项已从我们的清单中检查出来。我们来看第二项。我们将通过使用脚本标记来引入React和Babel来设置我们的开发人员环境。

This is not a real life developer environment. That would be quite an elaborate setup. It would also leave us with a lot of boiler plate code and libraries that would take us off subject of learning React basics. The goal of this series is to go over the basic syntax of React and get right into coding. We are going to use

这不是一个真实的开发者环境。那将是一个非常复杂的设置。它还会给我们留下大量的锅炉板代码和库,这些代码和库将使我们不再学习React基础知识。本系列的目标是回顾React的基本语法并直接进入编码。我们打算用 <script> tags to bring in the React Library, the React DOM library (why), and the Babel library.

标签引入React库,React DOM库(为什么)和Babel库。

<head>
  ...
  <!-- REACT LIBRARY -->
  <script src="https://unpkg.com/[\[email protected\]](https://www.freecodecamp.org/cdn-cgi/l/email-protection)/dist/react.js"></script>
  <!-- REACT DOM LIBRARY -->
  <script src="https://unpkg.com/[\[email protected\]](https://www.freecodecamp.org/cdn-cgi/l/email-protection)/dist/react-dom.js"></script>
  <!-- BABEL LIBRARY -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
  ...
  <title>Time to React!</title>
</head>

You are free to use more updated versions of these libraries as they come out. They should not create any breaking changes for the content we are covering.

您可以随意使用这些库的更新版本。他们不应该为我们覆盖的内容创建任何重大更改。

What are we doing here? The HTML

我们在这里做什么? HTML <script> element is used to embed or reference an executable script. The "src" attribute points to the external script files for the React library, ReactDOM library and Babel library.

element用于嵌入或引用可执行脚本。 "src"属性指向React库,ReactDOM库和Babel库的外部脚本文件。

This is like if you have an electric razor. It is literally no good to you no matter how fancy the electric razor unless you can plug it into the wall and gain access to electricity. Our React code we will write will be no good to us if our browser can't plug into these libraries to understand and interpret what we are going.

这就像你有一个电动剃须刀。无论电动剃须刀多么花哨,除非你能将它插入墙壁并获得电力,否则对你来说实在没什么好处。如果我们的浏览器无法插入这些库来理解和解释我们的目标,那么我们编写的React代码将对我们没有好处。

This is how our application is going to gain the power of React, it is going to be how we insert React into the Dom. We have React and ReactDOM as two different libraries because there are use cases such as React Native where rendering to the DOM isn't needed for mobile development so the library was split so people could decide what they needed depending on the project they were working on.

这就是我们的应用程序如何获得React的功能,它将是我们如何将React插入Dom。我们将React和ReactDOM作为两个不同的库,因为有一些用例,例如React Native,移动开发不需要渲染到DOM,因此库被拆分,以便人们可以根据他们正在处理的项目来决定他们需要什么。

Because we will need our React to make it to the DOM we'll use both scripts. Babel is how we take advantage of ECMA script beyond ES5 and deal with something called JSX (JavaScript as XML) that we will use in React. We'll take a deeper look at the magic of Babel in an upcoming section :)

因为我们需要我们的React来实现它,所以我们将使用这两个脚本。 Babel是我们如何利用ES5之外的ECMA脚本并处理我们将在React中使用的称为JSX(JavaScript as XML)的东西。我们将在接下来的部分深入探讨巴别塔的神奇之处:)

Alright, we have completed steps 1 and 2. We have set up our boiler plate code and set up our developer environment.

好的,我们已经完成了步骤1和2.我们已经设置了锅炉板代码并设置了我们的开发环境。

3 - Render React to the DOM{#3-render-react-to-the-dom}

Our next two steps will be to choose our location within the DOM that we want to render our React content. And we'll use another script tag for our React content within the body. Generally, as a good separations of concerns practice, this would be in its own file then linked to this html document. We'll do that later in upcoming sections. For now, we'll let this dwell within the body of the html document we are currently in.

我们接下来的两个步骤是在DOM中选择我们想要呈现React内容的位置。我们将在体内的React内容中使用另一个脚本标记。通常,作为关注实践的良好分离,这将在其自己的文件中然后链接到该html文档。我们将在后面的章节中做到这一点。现在,我们将把它留在我们目前所处的html文档的正文中。

Now we are going to look at how simple it is to choose a place on the DOM to render our React content. We'll go within the body. And best practice isn't just to throw React into the body tag to be displayed but to create a separate element, often a div, that you can treat as a root element to insert your React content.

现在我们来看看在DOM上选择一个位置来呈现我们的React内容是多么简单。我们会进入体内。最佳实践不仅仅是将React放入要显示的body标签中,而是创建一个单独的元素,通常是div,您可以将其视为插入React内容的根元素。

<body>
  <div id="app">React has not rendered yet</div>
</body>

We'll create a simple

我们将创建一个简单的 <div> element and give it an id of "app". We are going to be able to target this location to insert our React content much the same way you might use CSS to target an id for styling of your choice. Any react content will be rendered within the div tags with the id of app. In the meantime we'll leave some text saying that "React has not rendered yet". If we see this when we preview our page it means that somewhere we missed rendering React.

元素并给它一个"app"的id。我们将能够定位此位置以插入我们的React内容,就像使用CSS来定位您选择的样式ID一样。任何反应内容都将在id为app的div标签内呈现。与此同时,我们将留下一些文字说"React还没有呈现"。如果我们在预览页面时看到这一点,则意味着我们错过了渲染React的某个地方。

Now, let's go ahead and create a script tag within our body where we will create with React for the first time. The syntax we are going to need for our script tag is to add an attribute of "type". This specifies the media type of the script. Above in our head we used an src attribute that pointed to the external script files for the React library, ReactDOM library and Babel library.

现在,让我们继续在我们的体内创建一个脚本标记,我们将首次使用React创建它。我们脚本标记需要的语法是添加"type"属性。这指定了脚本的媒体类型。在我们的脑海中,我们使用了一个src属性,该属性指向React库,ReactDOM库和Babel库的外部脚本文件。

<body>
  <div id="app">React has not rendered yet</div>
  <script type="text/babel">
  </script>
</body>

The "type" of script that we are using will be wrapped in quotes and set to

我们正在使用的脚本的"类型"将被包装在引号中并设置为 "text/babel" . We'll need the ability to use babel right away as we work with JSX.

。当我们使用JSX时,我们需要立即使用babel的能力。

First, we are going to render React to the DOM. We will use the

首先,我们将把React呈现给DOM。我们将使用 ReactDOM.render() method to do this. This will be a method, and remember a method is just a function attached to an object. This method will take two arguments.

这样做的方法。这将是一种方法,并且记住方法只是附加到对象的函数。此方法将采用两个参数。

<body>
  <div id="app">React has not rendered yet</div>
  <script type="text/babel">
  ReactDOM.render(React What, React Where);
</script>
</body>

The first argument is the "what" of React. The second argument is the "where" of the location you want it to be placed in the DOM. Let's start by calling our ReactDOM.render() method. Our first argument is going to be our JSX.

第一个参数是React的"什么"。第二个参数是您希望将其放置在DOM中的位置"where"。让我们从调用ReactDOM.render()方法开始。我们的第一个论点是我们的JSX。

<body>
  <div id="app">React has not rendered yet</div>
  <script type="text/babel">
  ReactDOM.render(
    <h1>Hello World</h1>, 
    React Where
  );
</script>
</body>

The

official react docs state : "This funny tag syntax is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React "elements."

:"这个有趣的标签语法既不是字符串也不是HTML。它被称为JSX,它是JavaScript的语法扩展。我们建议将它与React一起用来描述UI应该是什么样的.JSX可能会提醒你模板语言,但它具有JavaScript的全部功能.JSX生成React"元素"。

Often times, JSX freaks people out who have been developers for a while because it looks like HTML. At a very early age developers are taught separation of concerns. HTML has its place, CSS has its place and JavaScript has its place. JSX seems to blur the lines. You are using what looks like HTML but as Facebook says it comes with the full power of JavaScript.

很多时候,JSX让那些已经成为开发人员的人感到不安,因为它看起来像HTML。在很小的时候,开发人员被教导分离关注点。 HTML有它的位置,CSS有它的位置,JavaScript有它的位置。 JSX似乎模糊了界限。你正在使用看起来像HTML的东西,但Facebook表示它具有JavaScript的全部功能。

This can freak out veterans, so many React tutorials start without JSX which can be quite complex. We won't do that. Because this article is directed towards those who are very young in their careers you may not bring those red flags when you see this syntax.

这可能会让退伍军人感到不安,所以很多React教程都是在没有JSX的情况下开始的,这可能非常复杂。我们不会这样做。因为这篇文章是针对那些在职业生涯中非常年轻的人,所以当你看到这种语法时,你可能不会带来这些危险信号。

And JSX is just really intuitive. You can probably quite easily read this code and see that this is going to be the largest header tag displaying the text "Hello World". No mystery and pretty straightforward. Now, let's look at what our second argument would be.

JSX非常直观。您可以非常轻松地阅读此代码,并看到这将是显示文本"Hello World"的最大标头标记。没有神秘感和相当简单。现在,让我们来看看我们的第二个论点是什么。

<body>
  <div id="app">React has not rendered yet</div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello World</h1>, 
      document.getElementById("app")
    );
  </script>
</body>

This is where we want our React content rendered to the DOM. You've probably done this quite a few times in the past. We'll just type in

这就是我们希望将React内容呈现给DOM的地方。你过去可能已经做了很多次了。我们只需输入 document.getElementById() . And we'll pass into the argument of the id of app. And that is it. We will now target the div with the id of app to insert our React content.

。我们将进入app的id参数。就是这样。我们现在将使用app的id来定位div以插入我们的React内容。

We want to make sure our content is saved. Go ahead and open this up in the browser and you should see "Hello World". As you can probably guess, using React is not the quickest or best way to create a Hello World app. We aren't quite seeing the benefits of it yet. But now, we know that everything is working.

我们希望确保保存我们的内容。继续在浏览器中打开它,你应该看到"Hello World"。正如您可能猜到的,使用React并不是创建Hello World应用程序的最快或最好的方法。我们还没有看到它的好处。但现在,我们知道一切正常。

Go ahead and open up the console and look at the "elements". You can do that on a Mac with command + shift + j or on Windows and Linux: Ctrl + Shift + J

继续打开控制台,看看"元素"。您可以在Mac上使用命令+ shift + j或在Windows和Linux上执行此操作:Ctrl + Shift + J.

If you click on the head tag, we can see our script libraries we included. Then we can go down to the body of our document. Let's click on our div with the id of "app". And when we do we see our

如果单击head标签,我们可以看到我们包含的脚本库。然后我们可以深入到我们的文档正文。让我们点击ID为"app"的div。当我们这样做时,我们会看到我们 <h1> tag with the content "Hello World".

标记内容为"Hello World"。

View Entire Code Here .

Recap{#recap}

So let's do a quick recap. In our head tag we grabbed the script tags for React, ReactDOM and Babel. These are the tools our browser needs in its meta data to read our React code and JSX in specific.

那么让我们快速回顾一下。在我们的head标签中,我们抓住了React,ReactDOM和Babel的脚本标签。这些是我们的浏览器在其元数据中需要的工具,以便特定地阅读我们的React代码和JSX。

We then located the position within the DOM that we wanted to insert our React by creating an element div with the id of "app".

然后我们通过创建id为"app"的元素div来定位DOM中我们想要插入React的位置。

Next, we created a script tag to input our React code. We used the ReactDOM.render() method that takes two arguments. The "what" of the React content, in this case our JSX, and the second argument is the "where" that you want to insert the React content into the DOM. In this case it is the location with the id of "app".

接下来,我们创建了一个脚本标记来输入我们的React代码。我们使用了带有两个参数的ReactDOM.render()方法。 React内容的"内容",在本例中为我们的JSX,第二个参数是您希望将React内容插入DOM的"where"。在这种情况下,它是id为"app"的位置。

As an alternative to JSX, you can use ES6 and Javascript's compiler like Babel. https://babeljs.io/

作为JSX的替代品,您可以使用像Babel这样的ES6和Javascript编译器。 https://babeljs.io/

Installing React{#installing-react}

Creating a new React project{#creating-a-new-react-project}

You could just embed the React library in your webpage like so^2^:

您可以在您的网页中嵌入React库,就像这样^ 2 ^:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/cjs/react.production.min.js"></script>

Smart programmers want to take the more practical and productive way:

聪明的程序员希望采用更实用,更高效的方式: Create React App

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

This will set up your development environment so that you can use the latest JavaScript features, provide a nice developer experience, and optimize your app for production.

这将设置您的开发环境,以便您可以使用最新的JavaScript功能,提供良好的开发人员体验,并优化您的应用程序以进行生产。

npm start will start up a development server which allows live reloading^3^.

将启动一个允许实时重新加载的开发服务器^ 3 ^。

After you finish your project and are ready to deploy your App to production, you can just use

完成项目并准备将应用程序部署到生产环境后,您就可以使用了 npm run build to create an optimized build of your app in the

在。中创建应用程序的优化版本 build folder.

夹。

Your first React App{#your-first-react-app}

Installation{#installation}

As specified in the previous section (Installation), run the

如上一节(安装)中所述,运行 Create React App tool. After everything has finished,

工具。一切都完成后, cd into the folder of your application and run

进入您的应用程序的文件夹并运行 npm start . This will start a development server and you are all set to start developing your app!

。这将启动一个开发服务器,你就可以开始开发你的应用了!

npm install -g react-create-app
create-react-app my-first-app

cd my-first-app
npm start

Editing the code{#editing-the-code}

Start up your editor or IDE of choice and edit the

启动您的编辑器或IDE选择并编辑 App.js file in the

文件中 src folder. When created with the

夹。用the创建时 react-create-app tool, there will already be some code in this file.

工具,这个文件中已经有一些代码了。

The code will consist of these parts:

代码将包含以下部分:

imports{#imports}

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

This is used by

这是用来的 webpack to import all required modules so that your code can use them. This code imports 3 modules:

导入所有必需的模块,以便您的代码可以使用它们。此代码导入3个模块:

  1. React and Component , which allow us to use React as it should be used. (With components)
  2. logo , which allows us to use logo.svg in this file.
  3. ./App.css , which imports the stylesheet for this file.

classes/components{#classes-components}

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

React is a library that makes use of Components, which let you split up your UI into independent, reusable pieces, and think about each piece in isolation. There is already 1 component created, the

React是一个使用Components的库,它允许您将UI拆分为独立的,可重用的部分,并独立思考每个部分。已经创建了1个组件 App component. If you used the

零件。如果你用过 create-react-app tool, this component is the main component in the project and you should build around this central class.

工具,这个组件是项目的主要组件,你应该围绕这个中心类构建。

We will look at components in more detail shortly.

我们稍后将更详细地介绍组件。

exports{#exports}

When creating a class in React, you should export them after declaration, which allows you to use the component in another file by using the

在React中创建一个类时,你应该在声明后导出它们,这允许你使用它在另一个文件中使用该组件 import keyword. You can use

关键词。您可以使用 default after the

之后 export keyword to tell React that this is the main class of this file.

关键字告诉React这是这个文件的主类。

export default App;

View the results!{#view-the-results-}

When you've started the development server by issuing the

当您通过发出启动开发服务器时 npm start command, you can view the changes you add to your project live in your browser. After issuing the command, npm should open a browser automatically displaying your app.

命令,您可以在浏览器中查看添加到项目中的更改。发出命令后,npm应该打开一个自动显示你的应用程序的浏览器。

React - Components{#react-components}

Components are reusable in React. You can inject value into props as given below:

组件可以在React中重用。你可以为道具注入价值,如下所示:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Faisal Arkan" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

name="Faisal Arkan" will give value into

会给予价值 {props.name} from the

来自 function Welcome(props) and will return the component that has given value by

并将返回已给出值的组件 name="Faisal Arkan" . After that react will render the element into HTML.

。之后,反应将元素转换为HTML。

Other ways to declare components{#other-ways-to-declare-components}

There are many ways to declare components when using React. There are two kinds of components,

使用React时,有很多方法可以声明组件。有两种组件, stateless components and

组件和 stateful components.

组件。

Stateful{#stateful}

Class Type Components{#class-type-components}

class Cat extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      humor: 'happy'
    }
  }
  render() {
    return(
      <div>
        <h1>{this.props.name}</h1>
        <p>
          {this.props.color}
        </p>
      </div>
    );
  }
}

Stateless Components{#stateless-components}

Functional Components (Arrow Function from ES6){#functional-components-arrow-function-from-es6-}

const Cat = props => {
  return (  
    <div>
      <h1>{props.name}</h1>
      <p>{props.color}</p>
    </div>;
  );
};

Implicit Return Components{#implicit-return-components}

const Cat = props => 
  <div>
    <h1>{props.name}</h1>
    <p>{props.color}</p>
  </div>;

查看英文原文

查看更多文章

公众号:银河系1号

公众号:银河系1号

联系邮箱:public@space-explore.com

联系邮箱:public@space-explore.com

(未经同意,请勿转载)

(未经同意,请勿转载)

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章