react 入门_React入门（2019版）

最新推荐文章于 2022-11-22 16:22:31 发布

culiu9261

最新推荐文章于 2022-11-22 16:22:31 发布

阅读量568

点赞数

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

原文链接：https://scotch.io/starters/react/getting-started-with-react-2019-edition

版权

react 入门

React is the uber popular JavaScript library that is almost everywhere you look these days. Learning React opens up a whole new way to build front-end experiences like websites, mobile apps, and more.

React是超流行JavaScript库，如今您几乎无所不在。 Learning React开辟了一种全新的方式来构建前端体验，例如网站，移动应用程序等等。

Much has changed since React came out and now is a great time to jump into the React fray. React is mature and has been used across the web in places like Facebook, Instagram, Airbnb, Uber, and much much more. Let's dive in!

自从React出现以来，发生了很多变化，现在是进入React竞争的绝佳时机。 React已经成熟，并已在Facebook，Instagram，Airbnb，Uber等网站上广泛使用。让我们潜入吧！

For those that want a video walkthrough so you can see every step of the way, check out our React Starter Video!

对于那些需要视频演练以使您能够看到每一步的人，请查看我们的React Starter视频！

什么是React？ ( What is React? )

React is a UI library built by Facebook. React gives us the ability to logically think about our frontend sites and apps.

React是Facebook构建的UI库。 React使我们能够从逻辑上考虑前端站点和应用程序。

It’s also a really fun and quick way to build the projects we dream up! Even the site you’re on, scotch.io is built with React.

这也是构建我们梦up以求的项目的一种非常有趣且快速的方法！即使是您所在的站点， scotch.io也是使用React构建的。

React allows us to build apps that:

React允许我们构建以下应用程序：

Can be made quickly
可以快速制作
Are easy to understand
很容易理解
Allow us to logically see the flow of data
让我们从逻辑上看数据流
Scale well with small and large teams
与小型和大型团队很好地扩展
Transfer knowledge from desktop to mobile apps
将知识从台式机转移到移动应用程序

React lets us build out our interactive UIs declaratively. One of its greatest abilities is the way it can update our UIs automatically and efficiently whenever our data changes.

React使我们能够声明性地构建交互式UI。它的最大能力之一就是每当数据发生更改时，就可以自动高效地更新UI的方式。

Imagine changing a JavaScript variable and immediately seeing it change on your site. Like magic!

想象一下更改一个JavaScript变量并立即在您的站点上看到它的变化。像魔术！

In this React Starter, we’ll go through all the bells and whistles of React. We’ll build apps and learn many real-world techniques. This Starter is for anyone that wants to learn React from scratch in a neat and linear path. Follow along and you’ll gain all the React knowledge needed to start building in React.

在此React Starter中，我们将介绍React的所有细节。我们将构建应用程序并学习许多实际技术。该Starter适用于任何希望以简洁线性的方式从零开始学习React的人。继续学习，您将获得在React中开始构建所需的所有React知识。

快速使用React ( Using React Quickly )

There are many many ways to use React in our projects. This is one of the main benefits of React. It isn’t too opinionated about how you should use it. The two main ways to use React are:

在我们的项目中有很多使用React的方法。这是React的主要好处之一。对于如何使用它并没有太自以为是。使用React的两种主要方法是：

Add React to an already-existing website (this is the approach scotch.io uses)
将React添加到一个已经存在的网站（这是scotch.io使用的方法）
Use React to build a full single-page-app (SPA)
使用React构建完整的单页应用程序（SPA）

Many parts of scotch.io are built using React.

scotch.io的许多部分都是使用React构建的。

We’ll go over the many ways to use React in following articles. To get us up and running quickly in this article, we’ll be using CodePen. CodePen is an online coding playground where you can very easily play around with HTML/CSS/JS right in your browser. We’ll be using this for our first Starter article since we don’t want to dive into all the installation details just yet.

在接下来的文章中，我们将介绍使用React的多种方法。为了使我们能够快速起步并开始运行，我们将使用CodePen 。 CodePen是一个在线编码场所，您可以在浏览器中轻松地使用HTML / CSS / JS。我们将在第一篇“入门”文章中使用它，因为我们现在还不想深入了解所有安装细节。

Give the next few articles a look to see all the ways React can be used including the CLI, create-react-app.

接下来的几篇文章将介绍React的所有使用方式，包括CLI， create-react-app 。

设置CodePen (Setting Up a CodePen)

I’ve gone ahead and created a starter CodePen for us to use for this article.

我已经继续创建了启动器CodePen，供我们在本文中使用。

React Starter CodePen

Once you open up this CodePen, you’ll be greeted with a page like this:

打开此CodePen后，将看到如下页面：

Note: Your editor boxes may be on the top or the side. I like mine on the left side. You can change this with the Change View button.

注意：您的编辑器框可能在顶部或侧面。我喜欢我的左边。您可以使用“ 更改视图”按钮进行更改。

创建此入门级CodePen的步骤 (Steps to Create this Starter CodePen)

For clarity, I want to let you know everything that went into making this React Starter CodePen. It was 3 quick steps (2 if you don’t count the “Create a CodePen” step):

为了清楚起见，我想让您知道制作此React Starter CodePen的所有步骤。这是3个快速步骤（如果不计算“创建CodePen”步骤，则为2个步骤）：

Create a new CodePen
创建一个新的CodePen
Add the react and react-dom scripts (hit the settings icon in the JS editor)
添加react和react-dom脚本（点击JS编辑器中的设置图标）
Change the JS processor to Babel since we’ll be using ES6 code and Babel transpiles our code to ES5.
将JS处理器更改为Babel，因为我们将使用ES6代码，并且Babel 将我们的代码转换为ES5。

The main core of React is found in the react.js script while the things needed to work with React in a browser are in react-dom.js. These were split apart because React can be used in more places than just the browser. See React Native for an example.

React的主要核心位于react.js脚本中，而在浏览器中使用React所需的东西位于react-dom.js 。之所以将它们分开是因为React可以在不仅仅是浏览器的更多地方使用。有关示例，请参见React Native 。

That’s it! That’s how we created this starter CodePen. Your JS settings popup should look like this:

而已！这就是我们创建此入门级CodePen的方式。您的JS设置弹出窗口应如下所示：

Let’s move forward and start working with React.

让我们继续前进，开始使用React。

Teeny Tiny React应用 ( A Teeny Tiny React App )

React如何工作？ (How Does React Work?)

React works by taking over an HTML div and injecting JavaScript into it. React will inject all of the awesome cool JavaScript into this section of our site.

React通过接管HTML div并将JavaScript注入其中来工作。 React会将所有很棒的酷JavaScript注入到我们网站的这一部分。

添加HTML div (Adding an HTML div)

We need to create an HTML div and then we can start working with React. In the HTML panel, create a div called root or app. Naming it root or app is standard across the React landscape since this is the main div where our React app will take place.

我们需要创建一个HTML div，然后才能开始使用React。在HTML面板中，创建一个名为root或app的div。在React环境中将根或应用程序命名为标准操作，因为这是我们React应用程序将在其中发生的主要任务。

In the HTML section of our CodePen, add:

在我们的CodePenHTML部分中，添加：

<div id="root"></div>

That’s all we need in HTML!

这就是我们在HTML中所需的一切！

React元素 (React Elements)

Now that we have a div we can target, let’s start writing our JavaScript and our first piece of React code (finally!)

现在我们有了一个可以定位的div，让我们开始编写我们JavaScript和我们的第一段React代码（最后！）。

Feel free to collapse the HTML/CSS editors since we won’t need them anymore.

随意折叠HTML / CSS编辑器，因为我们不再需要它们了。

Let’s use React to inject some data into our website.

让我们使用React将一些数据注入我们的网站。

In the JavaScript section, write the following:

在“ JavaScript”部分中，编写以下内容：

ReactDOM.render(
  <h1>I AM HERE!</h1>,
  document.getElementById('root')
);

By including the react.js and react-dom.js scripts, we now have access to the JavaScript objects of React and ReactDOM.

通过包含react.js和react-dom.js脚本，我们现在可以访问React和ReactDOMJavaScript对象。

ReactDOM.render() takes two parameters:

ReactDOM.render()具有两个参数：

The element (or component as we’ll see soon)
元素（或组件，我们将很快看到）
The HTML element where React will inject things
React将注入事物HTML元素

React中的数据 (Data in React)

Now this app isn’t too useful since you’re not always going to have a site that says I AM HERE.

现在这个应用程序并不是太有用了，因为您不会总是有一个说我在这里的网站。

Let’s grab some data and see how we can add it to our React app.

让我们获取一些数据，看看如何将其添加到React应用程序中。

In JavaScript, let’s create a variable called message and display that:

在JavaScript中，我们创建一个名为message的变量并显示以下内容：

const message = 'i am here to save the day!';

Now we can display that in our ReactDOM.render:

现在我们可以在ReactDOM.render显示它：

const message = 'i am here to save the day!';

ReactDOM.render(
  <h1>my message is: {message}</h1>,
  document.getElementById('root')
);

We now have this:

我们现在有这个：

Here’s the completed demo for you to take a look at:

这是完成的演示供您查看：

谈组件 ( A Talk About Components )

We’ve made a React element and shown that in our site now. Moving forward, we’re going to be making React components. Components are a React tool that are made up of elements like <h1>, <div>, and more.

我们已经制作了一个React元素，并在我们的网站中进行了展示。展望未来，我们将制造React组件。组件是一个React工具，由<h1> ， <div>等元素组成。

Components are the building blocks of sites and apps.

组件是网站和应用程序的基础。

组件到底是什么？ (What exactly is a component?)

In the simplest terms, a component is comprised of:

用最简单的术语来说，一个组件包括：

a template (HTML)
模板（HTML）
interactivity (JavaScript)
互动性（JavaScript）
styles (CSS)
样式（CSS）

By organizing our sites and apps into components, we are able to work with our UI as separate parts. React makes creating components as easy as creating a JavaScript function.

通过将网站和应用程序组织成组件，我们可以将UI作为单独的部分使用。 React使创建组件就像创建JavaScript函数一样容易。

If you look at scotch.io, you can think of the following as components:

如果您查看scotch.io，则可以将以下内容视为组件：

site header
网站标题
site footer
网站页脚
left sidebar
左侧边栏
main content
- article title
- article content
主要内容
- 文章标题
- 文章内容

By having many components, we can piece together components to make any number of site pages and combinations. Websites and apps are combinations of components. Give Facebook, Google, or Twitter a look and see if you can point out the components on those sites.

通过具有许多组件，我们可以将组件组合在一起以构成任意数量的网站页面和组合。网站和应用程序是组件的组合。看看Facebook ， Google或Twitter ，看看是否可以指出这些站点上的组件。

Let’s move forward and start creating React components. It’s super easy!

让我们继续前进，开始创建React组件。超级容易！

创建您的第一个React组件 ( Creating Your First React Component )

Now you may be wondering how the last example is useful. We have a variable here and have displayed it using React.

现在您可能想知道最后一个示例的用处。我们这里有一个变量，并已使用React显示出来。

为什么我们不能只用HTML做到这一点？ (Why couldn’t we just do that with HTML?)

While this is a simple example, the truth of today’s websites and applications is that data comes from not just the app itself, but from various sources. You could pull data from:

尽管这是一个简单的示例，但当今的网站和应用程序的事实是数据不仅来自应用程序本身，还来自各种来源。您可以从以下位置提取数据：

your own database
你自己的数据库
your own API
您自己的API
a 3rd party API like the Facebook/Google/Twitter APIs
第三方API，例如Facebook / Google / Twitter API
data stored in browser storage like localStorage
存储在浏览器存储（如localStorage）中的数据

Managing data from those multiple sources can be tough without a UI library like React. Another big benefit to React is that once we have our data from those sources, we can automagically have the UI updated without any extra code from us. We’ll see exactly what this means soon.

如果没有像React这样的UI库，从这些多个来源管理数据可能会很困难。 React的另一个重大好处是，一旦我们从这些来源获得了数据， 就可以自动更新UI，而无需任何额外的代码。我们很快就会确切地知道这意味着什么。

Automatically update our UI whenever data changes. Building dynamic sites is good UI/UX.

每当数据更改时自动更新我们的UI。构建动态网站是好的UI / UX。

If we wanted to update our UI in just plain HTML, we would have to reload the page. That leads to a bad user experience for our users. Imagine if Facebook or Twitter had to update every time new data came in!

如果我们只想用纯HTML更新UI，就必须重新加载页面。这给我们的用户带来了糟糕的用户体验。想象一下，每次有新数据输入时，Facebook或Twitter都必须进行更新！

创建React组件 (Creating the React Component)

Let’s remove the message variable we made earlier and create a React component using a JavaScript class. Here’s our component:

让我们删除之前创建的message变量，并使用JavaScript类创建一个React组件。这是我们的组件：

function App ( ) {
  // my component goes here
}

This syntax may look familiar to you. That’s because it’s just a plain old JavaScript function!

您可能对这种语法很熟悉。那是因为它只是一个普通的旧JavaScript函数！

Creating React components is as simple as creating a JavaScript function.

创建React组件就像创建JavaScript函数一样简单。

Note: React style conventions state that components should be PascalCase. If you had a component that you want to call site header, then the component would be named SiteHeader.

注意：React样式约定指出组件应该是PascalCase。如果您有要调用站点标头的组件，则该组件将命名为SiteHeader 。

We’ve created our first React component, but it doesn’t do anything just yet. Like we stated earlier, we are going to have our components a combination of JavaScript and a template. In React, templates are written using JSX.

我们已经创建了第一个React组件，但是它还没有做任何事情。如我们前面所述，我们将使我们的组件结合JavaScript和模板。在React中，模板是使用JSX编写的。

We’ll cover JSX in more detail in a following article. JSX is a syntax extension to JavaScript, but for this tutorial, just think of JSX as “HTML inside of JavaScript.”

在下一篇文章中，我们将更详细地介绍JSX。 JSX是JavaScript的语法扩展，但是对于本教程，只需将JSX视为“ JavaScript内HTML”。

关于JSX的注意事项 (A Note About JSX)

JSX is the templating language that React uses and it can be a little bit of a learning curve to many people trying to learn React.

JSX是React使用的模板语言，对于许多尝试学习React的人来说，它可能是一个学习曲线。

JSX isn’t that scary. People just aren’t used to seeing the syntax after coming from HTML.

JSX并不那么可怕。人们只是不习惯从HTML看到语法之后。

I am a firm believer that writing JSX will make you a better JavaScript developer.

我坚信编写JSX将使您成为更好JavaScript开发人员。

We’re not going to go too far in depth with JSX in this article; JSX deserves its own articles coming up. My recommendation to you if you are wary of JSX is to give it a chance. Hold any judgment until we’ve built a few things and you’ll see it’s not as scary as you may have thought.

在本文中，我们不会对JSX进行过多的研究。 JSX应该发表自己的文章。如果您对JSX保持警惕，我建议您给它一个机会 。做出任何判断，直到我们完成了几件事，您就会发现它并没有您想象的那么可怕。

向我们的组件添加模板 (Adding a Template to our Component)

Back to our component, let’s add a template.

回到我们的组件，让我们添加一个模板。

Components are great conceptually because tying JavaScript to a specific template makes code far more readable and easier to manage, especially in large codebases.

组件在概念上很棒，因为将JavaScript绑定到特定模板可以使代码更具可读性和易于管理，尤其是在大型代码库中。

Since this function is a component, where do we put our JavaScript and where do we put our template? In React functional components, we will return our template out of the function:

由于此功能是一个组件，因此我们应该将JavaScript放在哪里以及模板应该放在哪里？在React功能组件中，我们将从函数中返回模板：

function App ( ) {
  // javascript stuff goes here

  return (
    // template goes here
  ) ;
}

Now that we know where our template goes, let’s add an <h1>:

现在我们知道了模板的位置，让我们添加一个<h1> ：

function App ( ) {
  // javascript stuff goes here

  return (
    < h1 > im in a fancy component now ! < / h1 >
  ) ;
}

Now that we have this component, we need to tell React to use it.

现在我们有了这个组件，我们需要告诉React使用它。

使用我们的新组件 ( Using Our New Component )

In React, when you create a component, you will be able to use them as if they were HTML tags in React.

在React中，当您创建组件时，您将能够像在React中使用HTML标记一样使用它们。

For instance, we created this App, now we can use it in React as <App />. Notice that it has a closing forward-slash. When using React components, we need to use some kind of closing tag.

例如，我们创建了这个App ，现在我们可以在React中将它用作<App /> 。请注意，它有一个正斜杠。使用React组件时，我们需要使用某种结束标记。

< App / >

// or 
< App > < / App >

Back in our ReactDOM.render(), let’s use it:

回到我们的ReactDOM.render() ，让我们使用它：

function App ( ) {
  // javascript stuff goes here

  return (
    < h1 > im in a fancy component now ! < / h1 >
  ) ;
}

ReactDOM . render (
  < App / > ,
  document . getElementById ( 'root' )
) ;

组件可重复使用 ( Components Are Reusable )

One of the benefits of component based design is that we can keep our code DRY (dont-repeat-yourself). We could even reuse this <App /> component multiple times

基于组件的设计的好处之一是我们可以使代码保持DRY （不要重复）。我们甚至可以多次重用此<App />组件

ReactDOM.render(
  <div>
    <App />
    <App />
    <App />
  </div>,
  document.getElementById('root')
);

Note: React always wants only 1 parent element when defining a template. This is why we wrapped everything in a single <div>.

注意：React在定义模板时总是只需要1个父元素 。这就是为什么我们将所有内容包装在单个<div> 。

Components are very powerful tools that we can use to build out our websites and apps. Component architecture is everywhere you look in web development these days, whether you’re looking at web components, React, Vue, Angular, and many other frameworks, components are logical ways to split up our applications.

组件是非常强大的工具，可用于构建网站和应用程序。如今，无论您在查看Web组件，React，Vue，Angular以及许多其他框架，组件体系结构在Web开发中无处不在，组件都是拆分我们的应用程序的逻辑方法。

Let’s move forward and work with data in this app.

让我们继续前进，并在此应用程序中处理数据。

显示数据 ( Displaying Data )

In the previous example, before we were using components, we created a variable called message. In components, when you want to create data, you have a couple different options:

在上一个示例中，在使用组件之前，我们创建了一个名为message的变量。在组件中，当您要创建数据时，有两种不同的选择：

Create a variable (like earlier)
创建一个变量（如前所述）
Create a state variable
创建一个state变量

If you want to update data and have the template show that change automatically, then we will use a React concept called state.

如果您想更新数据并让模板自动显示更改，那么我们将使用称为状态的React概念。

创建一个简单的变量 (Creating a simple variable)

This is how we can recreate the earlier example. The downside to this approach is that whenever we update message, our template won’t update to show the changes.

这就是我们可以重新创建先前示例的方式。这种方法的缺点是，每当我们更新message ，我们的模板都不会更新以显示更改。

function App ( ) {
  const message = 'javascript is so cool' ;

  return (
    < h1 > { message } < / h1 >
  ) ;
}

ReactDOM . render (
  < App / > ,
  document . getElementById ( 'root' )
) ;

The problem with using a simple variable like this is that React won't look to rerender whenever it changes. To be 100% sure that React will update the template with new data, we'll use a concept called React state.

使用这样的简单变量的问题在于，React每次更改时都不会重新渲染。为了100％确保React将使用新数据更新模板，我们将使用称为React状态的概念。

使用React State显示变量 (Using React State to display a variable)

When we want variable updates to reflect automatically in our template, we want to use React state. Let’s change this example to use React state. Then whenever the message variable changes, React will re-render our template with the new data.

当我们希望变量更新自动反映在模板中时，我们想使用React state 。让我们将此示例更改为使用React状态。然后，只要message变量发生变化，React就会使用新数据重新渲染我们的模板。

Let’s write the full syntax here and we’ll talk about what is happening. You may see some JavaScript syntax that you aren’t familiar with called array destructuring.

让我们在这里写下完整的语法，然后我们将讨论发生了什么。您可能会看到一些您不熟悉JavaScript语法，称为数组解构。

function App() {
  const [message, setMessage] = React.useState('javascript is so cool');

  return (
    <h1>{message}</h1>
  );
}

Notice the line that has useState:

请注意具有useState的行：

const [message, setMessage] = React.useState('javascript is so cool');

This is called array destructuring.

这称为数组解构。

React.useState gives us two parts
- the variable which we name message
- a function to set the variable which we’ve called setMessage
React.useState给我们两个部分
- 我们给message命名的变量
- 设置变量的函数，我们称之为setMessage

You can name the variable and the function anything you want. We’re calling it message and setMessage because that is what we want our variable to be called.

您可以根据需要命名变量和函数。我们将其称为message和setMessage因为这就是我们希望调用变量的地方。

We'll talk more about destructuring in an upcoming post about React prerequisites.

我们将在即将到来的关于React先决条件的文章中讨论更多关于结构化的内容。

Inside of useState() we can set the default value for our message variable.

在useState()内部，我们可以设置message变量的默认值。

本质上，我们已经完成了三件事： (Essentially we’ve done 3 things:)

Create a message variable
创建一个message变量
Created a way to update the message variable (setMessage)
创建了一种更新message变量（ setMessage ）的方法
Set a default value for message
设置message的默认值

Whenever we use setMessage to update our message, React will update our views.

每当我们使用setMessage更新消息时，React都会更新视图。

Let’s make sure that our setMessage function is going to work.

让我们确保我们的setMessage函数可以正常工作。

处理用户交互（事件） ( Handling User Interaction (Events) )

Now that we’ve displayed some data, the next step in any app is to listen for user input and act on it. We are going to listen for an event like a button click.

现在，我们已经显示了一些数据，任何应用程序中的下一步都是侦听用户输入并对其进行操作。我们将监听一个事件，例如单击按钮。

Let’s do a simple action. We’ll:

让我们做一个简单的动作。好：

Create a button
创建一个按钮
Listen for a click
听一听
Update our message using the setMessage function
使用setMessage函数更新我们的消息

创建按钮 (Creating the Button)

We’ll add the button next to our <h1>. Remember that React always wants only 1 parent element. We’ll add a surrounding <div> so that there’s only 1 parent element.

我们将在<h1>旁边添加按钮。请记住，React始终只需要1个父元素 。我们将添加一个环绕的<div>以便只有1个父元素。

Let’s create a button that when clicked will update our message. Update your App component to have a button that takes a function when clicked:

让我们创建一个按钮，单击该按钮将更新我们的消息。更新您的App组件，使其具有在单击时具有功能的按钮：

function App() {
  const [message, setMessage] = React.useState('javascript is so cool');

  return (
    <div>
      <h1>{message}</h1>
      <button>
        Update the Message!
      </button>
    </div>
  );
}

聆听点击 (Listening for Clicks)

In HTML, each element in the DOM can emit events like click, mouseover, keypress, and more.

在HTML，DOM中的每个元素都可以发出类似事件click ， mouseover ， keypress ，和更多。

In order to listen to an event on an element in React, we prepend the event with on. For instance, if we want to listen for a click on this button, we will add an attribute for onClick:

为了在React中的元素上监听事件，我们在事件之前加上on 。例如，如果我们想听这个按钮的click ，我们将为onClick添加一个属性：

<button onClick={}>Click Me!</button>

In our onClick, we are using the curly brackets to tell JSX that we need to evaluate what’s in these brackets {}.

在onClick ，我们使用大括号告诉JSX我们需要评估这些括号{} 。

Whenever we open brackets {}, we’re telling React to evaluate this area with JavaScript.

每当我们打开方括号{}时，我们都在告诉React使用JavaScript对该区域进行评估。

Let’s add a function to our onClick to make sure we can update our message using setMessage:

让我们向onClick添加一个函数，以确保我们可以使用setMessage更新消息：

function App() {
  const [message, setMessage] = React.useState('javascript is so cool');

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage('my new message')}>
        Update the Message!
      </button>
    </div>
  );
}

Let’s look further at the onClick handler. In JSX, we will open brackets {} whenever we want React to evaluate with JavaScript. Since we want to run a function when the button is clicked, we have opened the brackets and given a function.

让我们进一步看一下onClick处理程序。在JSX中，每当我们希望React使用JavaScript进行评估时，都将在方括号{}打开。因为我们想在单击按钮时运行一个函数，所以我们打开了括号并给出了一个函数。

This could also be written by creating a function outside of our template. The following has the same effect but keeps our template cleaner.

这也可以通过在模板之外创建一个函数来编写。以下内容具有相同的效果，但使我们的模板更整洁。

function App() {
  const [message, setMessage] = React.useState('javascript is so cool');

  function handleClick() {
    setMessage('my new message')
  }

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={handleClick}>
        Update the Message!
      </button>
    </div>
  );
}

Now try clicking your button and seeing the message update automatically!

现在尝试单击您的按钮，然后看到消息自动更新！

By using React state, we can easily update variables and have React update our views!

通过使用React状态，我们可以轻松地更新变量并使React更新我们的视图！

回顾 ( Recap )

Let’s do a recap to see all the React concepts we’ve touched on:

让我们来回顾一下我们接触过的所有React概念：

Starting a React app using react.js and react-dom.js
使用react.js和react-dom.js启动React应用
Rendering React into an HTML div using ReactDOM.render
使用ReactDOM.render React渲染为HTML div
Display React data
显示React数据
Listening for React events
监听React事件
Using React state
使用React状态
Updating variables and having React update the UI
更新变量并让React更新UI

We’ve covered a lot of the main concepts of React. These foundational concepts will be used in every React app you make in the future!

我们已经介绍了很多React的主要概念。这些基本概念将在您将来制作的每个React应用中使用！

结论 ( Conclusion )

We’ve only scratched the surface with this Getting Started with React article. Follow along in this React Starter Guide to learn more and more about the world’s most popular JavaScript library.

我们仅在这篇“ React入门”文章中摸索了表面。遵循本《 React入门指南》，以了解更多有关世界上最受欢迎JavaScript库的信息。

Throughout this React starter, we'll go much further in depth and diving into things like:

在整个React入门中，我们将进一步深入研究以下内容：

Building React apps multiple ways
多种方式构建React应用
Talking about components
谈论组件
Routing apps
路由应用
Forms and validation
表格和验证
Redux,
Redux，
Styling components with Sass and CSS-in-JS
使用Sass和CSS-in-JS样式化组件
Animations
动画制作
And much much more...
还有更多...

翻译自: https://scotch.io/starters/react/getting-started-with-react-2019-edition

react 入门

culiu9261

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react 入门_React入门（2019版）

react 入门React is the uber popular JavaScript library that is almost everywhere you look these days. Learning React opens up a whole new way to build front-end experiences like websites, mobile apps, a...
复制链接

扫一扫