react 最佳实践_最佳React教程

最新推荐文章于 2024-05-29 11:30:21 发布

cumi7754

最新推荐文章于 2024-05-29 11:30:21 发布

阅读量953

点赞数

文章标签：编程语言 python js javascript java ViewUI

原文链接：https://www.freecodecamp.org/news/best-react-javascript-tutorial/

版权

react 最佳实践

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.
它是声明性的：React使用声明性范式，可以更轻松地推理您的应用程序。
It’s efficient: React computes the minimal set of changes necessary to keep your DOM up-to-date.
高效：React计算出使DOM保持最新状态所需的最小更改集。
And it’s flexible: React works with the libraries and frameworks that you already know.
而且它很灵活：React可与您已经知道的库和框架一起使用。

学习React的最佳教程 (The Best Tutorials for Learning React)

freeCodeCamp has a React tutorial on YouTube that will teach you all the basics in just 5 hours.

freeCodeCamp 在YouTube上有一个React教程，该教程将在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.

我们还有一个更深入的中级React教程，教您如何使用Firebase构建整个社交媒体React应用。它长达12个小时，如果您继续学习，您将学到很多React的复杂知识。

为什么要学习React？ (Why learn React?)

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

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

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(完全)，Khan Academy(部分)，纽约时报(部分)，Yahoo Mail(完全)，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也随之更新。因此，我们的UI随着状态的变化而发展。

React的优势 (Advantages of React)

Some reasons to use React are:

使用React的一些原因是：

Fast. Apps made in React can handle complex updates and still feel quick and responsive.
快速。使用React制作的应用程序可以处理复杂的更新，并且仍然感觉快速且响应Swift。
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.
模块化。您可以编写许多较小的可重用文件，而不是编写大型的密集代码文件。 React的模块化可以很好地解决JavaScript的可维护性问题。
Scalable. Large programs that display a lot of changing data are where React performs best.
可扩展显示大量变化数据的大型程序是React表现最好的地方。
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.
灵活。您可以将React用于与制作Web应用程序无关的有趣项目。人们仍在挖掘React的潜力。有探索的空间。

虚拟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)

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将指示浏览器仅更新计算的差异，而不更新整个DOM节点。无论我们重新生成界面多少次，React都只会将新的“部分”更新带给浏览器。

从头开始React (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.

您是否想开始学习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 —使用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 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.

让我们从步骤1开始。我们将从浏览器中名为“ index.html”的文件开始。我们将从样板HTML代码开始。为了快速入门，我建议将Emmet与您拥有的任何文本编辑器一起使用。在第一行中，输入html:5然后按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!”.

我们可以填写“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文件开头部分中的任何内容都是元数据，我们的浏览器将使用这些元数据来解释主体部分中的代码。该标题将显示在我们页面的标签上，而不是实际在页面上。

2-获取脚本标签以利用React和Babel库的功能 (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 <script> tags to bring in the React Library, the React DOM library (why), and the Babel library.

这不是现实生活中的开发人员环境。那将是一个相当复杂的设置。它还会给我们留下很多样板代码和库，这会使我们脱离学习React基础的主题。本系列文章的目的是研究React的基本语法，并开始进行编码。我们将使用<script>标签引入React库，React DOM库(为什么)和Babel库。

<head>
  ...
  <!-- REACT LIBRARY -->
  <script src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
  <!-- REACT DOM LIBRARY -->
  <script src="https://unpkg.com/react-dom@15.5.4/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 <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.

我们在这里做什么？ HTML <script>元素用于嵌入或引用可执行脚本。 “ 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使其成为DOM，所以我们将使用这两个脚本。 Babel是我们如何利用ES5以外的ECMA脚本并处理将在React中使用的JSX(JavaScript作为XML)。在下一部分中，我们将更深入地了解Babel的魔力：)

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-渲染对DOM的React (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.

接下来的两个步骤将是选择我们要呈现React内容的DOM中的位置。我们将在正文中为我们的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.

我们将创建一个简单的<div>元素，并将其ID设置为“ app”。我们将能够以这个位置为目标来插入我们的React内容，就像您可以使用CSS来为您选择的样式作为目标的id一样。任何React内容都将在div标签中呈现，其ID为app。同时，我们将保留一些文字，说明“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.

我们正在使用的脚本的“类型”将用引号引起来，并设置为"text/babel" 。与JSX一起使用时，我们需要立即使用babel的功能。

First, we are going to render React to the DOM. We will use the 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.

首先，我们将React渲染为DOM。我们将使用ReactDOM.render()方法执行此操作。这将是一个方法，请记住，方法只是附加到对象的函数。此方法将有两个参数。

<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中的位置的“位置”。让我们从调用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.”

官方的react docs声明：“这种有趣的标记语法既不是字符串也不是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 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.

这是我们希望将React内容呈现到DOM的地方。您过去可能已经做过几次了。我们只需要输入document.getElementById() 。我们将传入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上使用Command + 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 <h1> tag with the content “Hello World”.

如果单击head标签，我们可以看到包含的脚本库。然后我们可以进入文档正文。让我们单击ID为“ app”的div。当我们这样做时，我们会看到带有内容“ Hello World”的<h1>标签。

View Entire Code Here.

在此处查看整个代码。

回顾 (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元素来定位要插入React的DOM中的位置。

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的“位置”。在这种情况下，它是ID为“ app”的位置。

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

作为JSX的替代，您可以使用ES6和Java的编译器(如Babel)。 https://babeljs.io/

安装React (Installing React)

创建一个新的React项目 (Creating a new React project)

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

您可以像这样²将React库嵌入到您的网页中：

<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

聪明的程序员希望采取更实际，更高效的方式：创建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³.

npm start将启动一个开发服务器，该服务器可以实时重新加载³ 。

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.

完成项目并准备将App部署到生产环境后，您可以使用npm run build在build文件夹中创建应用的优化版本。

您的第一个React App (Your first React App)

安装 (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!

如上一节(安装)中所述，运行Create React App工具。完成所有操作后，将cd放入您的应用程序文件夹并运行npm start 。这将启动开发服务器，您已经准备好开始开发应用程序！

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

cd my-first-app
npm start

编辑代码 (Editing the code)

Start up your editor or IDE of choice and edit the App.js file in the src folder. When created with the react-create-app tool, there will already be some code in this file.

启动您选择的编辑器或IDE，然后编辑src文件夹中的App.js文件。当使用react-create-app工具react-create-app ，该文件中已经有一些代码。

The code will consist of these parts:

该代码将包括以下部分：

进口 (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:

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

React and Component, which allow us to use React as it should be used. (With components)
React和Component ，这使我们能够使用应使用的React。 (带组件)
logo, which allows us to use logo.svg in this file.
logo ，这使我们可以在此文件中使用logo.svg 。
./App.css, which imports the stylesheet for this file.
./App.css ，它将为此文件导入样式表。

类/组件 (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 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.

React是一个利用组件的库，它使您可以将UI分成独立的，可重用的部分，并单独考虑每个部分。已经创建了1个组件，即App组件。如果您使用create-react-app工具，则此组件是项目中的主要组件，您应该围绕此中心类进行构建。

We will look at components in more detail shortly.

我们将在短期内更详细地介绍组件。

出口商品 (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 import keyword. You can use default after the export keyword to tell React that this is the main class of this file.

在React中创建类时，应在声明后导出它们，这允许您通过使用import关键字在另一个文件中使用组件。您可以在export关键字之后使用default来告诉React这是此文件的主类。

export default App;

查看结果！ (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 start命令启动开发服务器后，您可以在浏览器中实时查看添加到项目中的更改。发出命令后，npm应打开自动显示您的应用程序的浏览器。

React-组件 (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.

name="Faisal Arkan"将通过function Welcome(props)将值{props.name} ，并返回具有name="Faisal Arkan"值的组件。之后，react将把元素渲染为HTML。

声明组件的其他方式 (Other ways to declare components)

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

使用React时有很多方法来声明组件。组件有两种， 无状态组件和有状态组件。

有状态的 (Stateful)

类类型组件 (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)

功能组件(ES6中的箭头功能) (Functional Components (Arrow Function from ES6))

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

隐式返回组件 (Implicit Return Components)

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

翻译自: https://www.freecodecamp.org/news/best-react-javascript-tutorial/

react 最佳实践

cumi7754

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react 最佳实践_最佳React教程

react 最佳实践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 Sur...
复制链接

扫一扫