初学react实现路由跳转_完整的React初学者指南

初学react实现路由跳转

by Ali Spittel

通过Ali Spittel

完整的React初学者指南 (A Complete Beginner’s Guide to React)

I want to get back into writing more technical content. React is one of my favorite technologies, so I thought I would create a React intro! This post requires knowledge of HTML and JavaScript. I am of the firm opinion that you should know these before moving on to libraries like React!

我想重新编写更多的技术内容。 React是我最喜欢的技术之一，所以我想我会创建一个React简介！ 这篇文章需要HTML和JavaScript的知识。 我坚信，在进入像React这样的库之前，您应该了解这些知识！

什么是React (What is React)

React is a JavaScript library built in 2013 by the Facebook development team. React wanted to make user interfaces more modular (or reusable) and easier to maintain. According to React’s website, it is used to “Build encapsulated components that manage their own state, then compose them to make complex UIs.”

React是Facebook开发团队于2013年构建JavaScript库。 React希望使用户界面更具模块化(或可重用)并且易于维护。 根据React网站的说法，它用于“构建管理其自身状态的封装组件，然后对其进行组合以构成复杂的UI。”

I’m going to use a lot of Facebook examples throughout this post since they wrote React in the first place!

自从他们首先编写React以来，我将在整个帖子中使用许多Facebook示例！

Remember when Facebook moved from likes to reactions? Instead of being able to like posts, you can now react with a heart, or a smiley face, or a like to any post. If those reactions were primarily made in HTML, it would be a tremendous amount of work to change all those likes to reactions and to make sure that they work.

还记得Facebook从点赞转变为React的时候吗？ 现在，您不再喜欢帖子，而是可以对任何帖子用心，笑脸或类似的表情做出React。 如果这些React主要是用HTML进行的，那么将所有这些喜欢的React更改为React并确保它们能起作用将是大量的工作。

This is where React comes in. Instead of implementing “separation of concerns”, we have a different architecture in React. This architecture increases modularity based on a component’s structure.

这就是React的用武之地。我们没有实现“关注点分离”，而是在React中使用了不同的架构。 这种架构基于组件的结构提高了模块化。

Today, we’ll keep the CSS separate, but you can even make that component specific if you want!

今天，我们将CSS分开，但是如果您愿意，您甚至可以使该组件特定！

React与Vanilla JavaScript (React vs. Vanilla JavaScript)

When we talk about “vanilla” JavaScript, we are normally talking about writing JavaScript code that doesn’t use additional libraries like JQuery, React, Angular, or Vue. If you would like to read more about those and what a framework is, I have a post all about web frameworks.

当我们谈论“普通” JavaScript时，通常是在谈论编写不使用其他库(例如JQuery，React，Angular或Vue)JavaScript代码。 如果您想了解更多有关这些内容以及框架是什么的信息，那么我会发布有关Web框架的所有文章。

在我们开始之前的几个快速笔记 (A couple quick notes before we begin)

• To make this tutorial a little more succinct, some code examples have ... before or after them. This means we omitted some code.

  为了使本教程更加简洁，一些代码示例在其之前或之后都有... 这意味着我们省略了一些代码。

• I use Git diffs in some places to show lines of code that will change. If you copy and past, you need to delete the + at the beginning of the line.

  我在某些地方使用Git差异来显示将更改的代码行。 如果您复制并过去，则需要删除该行开头的+ 。

• I have full CodePens with the completed versions of each section — so you can use those to play catch-up!
  我有完整的CodePens，每个部分都有完整的版本-因此您可以使用它们来赶上进度！
• More advanced concepts that aren’t essential for the tutorial are in blockquotes. These are facts that are interesting!
  块引用中包含了对本教程不是必需的更高级的概念。 这些都是有趣的事实！

建立 (Set Up)

If you are creating a production React application, you will want to use a build tool like Webpack. Webpack will bundle your code since React utilizes some patterns that won’t work by default in the browser. Create React App is super helpful for these purposes since it does most of the configuration for you!

如果要创建生产React应用程序，则需要使用Webpack之类的构建工具。 Webpack将捆绑您的代码，因为React使用了一些默认情况下在浏览器中不起作用的模式。 创建React App对于这些目的超级有帮助，因为它可以为您完成大部分配置！

For now, we will be using the React CDN, which is only for development purposes! We will also use the Babel CDN so that we can use some non-standard JavaScript features (we’ll talk more about that later!).

现在，我们将使用React CDN，这仅用于开发目的！ 我们还将使用Babel CDN，以便我们可以使用一些非标准JavaScript功能(我们将在后面详细讨论！)。

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js">

I also made a Codepen template that you can use!

我还制作了一个可以使用的Codepen模板 ！

In a full React project, I would split my components into different files. For learning purposes we will combine our JavaScript into one file for now.

在一个完整的React项目中，我会将组件拆分为不同的文件。 出于学习目的，我们现在将JavaScript合并到一个文件中。

组件 (Components)

For this tutorial, we will be building a Facebook status widget, since Facebook wrote React in the first place!

对于本教程，我们将构建一个Facebook状态小部件，因为Facebook首先编写了React！

Think about how many places the like widget appears on Facebook. You can like a status, or a link post, or a video post, or a picture! Or even a page! Every time Facebook tweaks something about the like functionality, they don’t want to have to do so in all those places. So, that’s where components come in! All the reusable pieces of a webpage are abstracted into a component. That component can be used over and over again. Ee will only have to change the code in one place to update it.

考虑一下like小部件在Facebook上出现了多少个位置。 您可以喜欢状态，链接文章，视频文章或图片！ 甚至一页！ 每次Facebook对类似功能进行调整时，他们都不想在所有这些地方都这样做。 因此，这就是组件的所在！ 网页的所有可重用部分都被抽象为一个组件。 该组件可以反复使用。 Ee只需在一个地方更改代码即可对其进行更新。

Let’s look at a picture of a Facebook status and break down the different components within it.

让我们看一下Facebook状态的图片，并分解其中的不同组成部分。

The status itself will be a component. There are lots of statuses within a Facebook timeline. We definitely want to be able to reuse the status component.

状态本身将是一个组成部分。 Facebook时间轴内有很多状态。 我们绝对希望能够重用状态组件。

Within that component, we will have subcomponents or components within a parent component. Those will be reusable as well . We could have the like button component be a child of the PhotoStatus component and the LinkStatus component.

在该组件中，我们将在父组件中包含子组件或组件。 这些也将可重用。 我们可以将like按钮组件作为PhotoStatus组件和LinkStatus组件的子代。

Maybe our subcomponents would look something like this:

也许我们的子组件看起来像这样：

We can even have subcomponents within subcomponents! So, the group of like, comment, and share could be its own ActionBar component. It would have components for liking commenting and sharing within it!

我们甚至可以在子组件中包含子组件！ 因此，点ActionBar ，评论和分享可能是它自己的ActionBar组件。 它会包含喜欢评论和共享的组件！

There are a bunch of ways you could break down these components and subcomponents depending on where you will reuse the functionality in your application.

您可以通过多种方法来分解这些组件和子组件，具体取决于您将在应用程序中重用功能的位置。

入门 (Getting Started)

I wanted to start off this tutorial with a React “Hello World” — it is the tradition after all! Then we’ll move to the slightly more complex status example.

我想从React“ Hello World”开始本教程-毕竟是传统！ 然后，我们将转到更为复杂的状态示例。

In our HTML file, let’s add just one element — a div with an id on it. By convention, you will normally see that div have an id "root" on it since it will be the root of our React application!

在我们HTML文件中，我们仅添加一个元素-上面有id的div 。 按照惯例，您通常会在div上看到一个id“ root”，因为它将成为我们React应用程序的根！

If you’re writing the code in the CodePen template, you can write this JavaScript directly in the js section. If you are instead writing this on your computer, you will have to add a script tag with the type text/jsx, so:

如果要在CodePen模板中编写代码，则可以直接在js部分中编写此JavaScript。 如果要在计算机上编写此代码，则必须添加类型为text/jsx的脚本标签，因此：

<script type="text/jsx"><;/script>

Now, let’s get to our React code!

现在，让我们进入我们的React代码！

class HelloWorld extends React.Component {

render() {

// Tells React what HTML code to render

return <h1>Hello World</h1>

}}

// Tells React to attach the HelloWorld component to the 'root' HTML div

ReactDOM.render(<HelloWorld />, document.getElementById("root"))

All that happens is that “Hello World” is displayed as an H1 on the page!

所发生的一切就是“ Hello World”在页面上显示为H1！

Let’s walk through what’s going on here.

让我们逐步了解一下这里发生的事情。

First, we are using an ES6 class that inherits from the React.Component class. This is a pattern that we will use for most of our React components.

首先，我们使用从React.Component类继承的ES6类。 我们将在大多数React组件中使用这种模式。

Next, we have a method in our class — and its a special method called render. React looks for the render method to decide what to render on the page! The name makes sense. Whatever is returned from that render method, will be rendered by that component.

接下来，我们在类中有一个方法-及其一个名为render的特殊方法。 React寻找render方法来决定在页面上渲染什么！ 这个名字很有意义。 从该render方法返回的所有内容都将由该组件呈现。

In this case, we are returning an H1 with the text of “Hello World” — this is exactly what would be in the HTML file normally.

在这种情况下，我们将返回带有“ Hello World”文本的H1-这恰好是HTML文件中的正常值。

Finally, we have:

最后，我们有：

ReactDOM.render(<HelloWorld />, document.getElementById("root"))

We are using the ReactDOM functionality to attach our react component to the DOM.

我们正在使用ReactDOM功能将react组件附加到DOM。

React utilizes something called the virtual DOM which is a virtual representation of the DOM that you would normally interact with in Vanilla JavaScript or JQuery. This reactDOM.render renders this virtual DOM to the actual DOM. Behind the scenes, React does a lot of work to efficiently edit and re-render the DOM when something on the interface needs to change.

React利用一种称为虚拟DOM的东西，它是通常在Vanilla JavaScript或JQuery中与之交互的DOM的虚拟表示。 此reactDOM.render将此虚拟DOM呈现为实际DOM。 在幕后，当需要更改界面上的某些内容时，React进行了大量工作来有效地编辑和重新渲染DOM。

Our component, <HelloWorld />, looks like an HTML tag! This syntax is part of JSX which is an extension of JavaScript. You can't natively use it in the browser. Remember how we're using Babel for our JavaScript? Babel will transpile (or convert) our JSX into regular JavaScript so the browser can understand it.

我们的组件<HelloWorld />，看起来像HTML标记！ 这句法是JSX的PA RT是JavaScript的一个扩展。 您不能在浏览器中本地使用它。 还记得我们如何将Babel用于JavaScript吗？ Babel会将我们的JSX转换(或转换)为常规JavaScript，以便浏览器可以理解它。

JSX is actually optional in React, but you’ll see it used in the vast majority of cases!

JSX实际上在React中是可选的，但是您会在绝大多数情况下看到它的使用！

Then, we are using JavaScript’s built-in document.getElementById to grab our root element we created in our HTML.

然后，我们使用JavaScript的内置document.getElementById来获取在HTML中创建的根元素。

All in all, in this ReactDOM.render statement, we are attaching our HelloWorld component to our div that we created in our HTML file.

总而言之，在此ReactDOM.render语句中，我们将HelloWorld组件附加到在HTML文件中创建的div上。

入门代码 (Starter Code)

Okay — now that we’ve done a “Hello World,” we can get started with our Facebook component.

好的-现在我们已经完成了“ Hello World”，我们可以开始使用Facebook组件了。

First, I want you to play around with this demo. We’ll be working on this throughout the rest of the tutorial. Feel free to look at the code too, but don’t worry about not understanding it! That’s what the rest of the tutorial is for!

首先，我想让您玩这个演示。 在本教程的其余部分中，我们将继续进行此工作。 也可以随意查看代码，但不必担心不了解它！ 这就是本教程其余部分的目的！

Let’s start off by “hard coding” the HTML for the widget:

让我们从“硬编码”小部件HTML开始：

With some added CSS, this looks like the following:

加上一些CSS，如下所示：

Here’s a Codepen with the full starter code.

这是带有完整入门代码的Codepen 。

For the sake of this tutorial, we will be creating four components: a Status component which will be the parent, a Like component that will encompass the liking logic, and the Comment component which will contain the logic for typing in a comment. The Like component will also have a child LikeIcon that will show up or be hidden when you toggle the like button.

为了本教程的缘故，我们将创建四个组件： Status组件(将作为父组件)， Like组件(将包含喜欢的逻辑)和Comment组件(将包含用于键入注释的逻辑)。 Like组件还将具有子LikeIcon ，它将在您切换“ Like按钮时显示或隐藏。

组件架构 (Component Architecture)

Let’s go ahead and divide the HTML code that we’ve written into those components.

让我们继续，将我们编写HTML代码划分为这些组件。

We’ll start with the shell of a component, and we’ll render it as well to make sure it’s working!

我们将从组件的外壳开始，并且还要渲染它以确保其正常工作！

One interesting note about the above, is that we had to change “class” attributes to “className”. Class already means something in JavaScript — it’s for ES6 classes! Some attributes are named differently in JSX than in HTML.

关于上述内容的一个有趣注释是，我们不得不将“ class”属性更改为“ className”。 在JavaScript中，类已经意味着某些东西–适用于ES6类！ 某些属性在JSX中的命名与在HTML中的命名不同。

We can also delete the content of our HTML, leaving just an element with the ID root — the parent “content” div is just for styling!

我们也可以删除HTML的内容，只保留ID根的元素-父“ content” div仅用于样式设置！

<body>   <div class="content">     <div id="root"></div>   </div> </body>

Here’s the HTML that is going to go in the Status component. Notice, some of the original HTML isn’t there yet — it’s going to go into our subcomponents instead!

这是Status组件中要使用HTML。 注意，一些原始HTML尚不存在-它将进入我们的子组件中！

Let’s create a second component, and then we’ll include it in our Status component.

让我们创建第二个组件，然后将其包含在“ Status组件中。

class Comment extends React.Component {   render() {     return (       <div>         <textarea className="form-control" placeholder="Write a comment..." />          <small>140 Remaining</small>       </div>       )    } }

Here’s the component for our comment. It has our textarea to type in, and the text with how many characters we have remaining. Notice that both are wrapped in a div. This is because React requires us to wrap all the contents of a component within one HTML tag. If we didn't have the parent div we'd be returning a textarea and a small tag.

这是我们评论的组成部分。 它可以输入我们的textarea ，以及剩余的字符数。 注意，两者都包装在div 。 这是因为React要求我们将组件的所有内容包装在一个HTML标签中。 如果没有父div我们将返回一个textarea和一个small标签。

So, now we need to include this component within our Status component since it will be our subcomponent. We can do so using that same JSX syntax we used to render the Status component!

因此，现在我们需要将此组件包含在Status组件中，因为它将成为我们的子组件。 我们可以使用用于渲染Status组件的相同JSX语法来做到这一点！

Okay, now we just need to do the same for our likes:

好的，现在我们只需要为喜欢的人做同样的事情：

Then we need to include it in our original Status component:

然后，我们需要将其包含在原始Status组件中：

Cool, now we have React-ified our original HTML, but it still doesn’t do anything. Let’s start fixing that!

太酷了，现在我们已经对React进行了原始HTML的修改，但是它什么也没做。 让我们开始修复它！

All in all, the code from this section will look like this CodePen.

总而言之，本节中的代码将类似于此CodePen 。

状态与道具 (State and Props)

We have two different user interactions that we want to implement:

我们要实现两种不同的用户交互：

• We want the like icon to show up only if the like button is pressed
  我们希望仅在按下“赞”按钮时才显示“赞”图标
• We want the number of characters remaining to decrease as the person
  我们希望剩余的字符数随着人的减少而减少

Let’s start working on these!

让我们开始研究这些！

道具 (Props)

Imagine that we wanted our comment box to allow for a different number of letters in different places. On a status, for example, we want a user to be allowed to write a 200 letter long response. On a picture, however, we only want them to be able to write a 100 character response.

想象一下，我们希望我们的注释框在不同的地方允许使用不同数量的字母。 例如，在某种状态下，我们希望允许用户写一个200个字母长的回复。 但是，在图片上，我们只希望他们能够写100个字符的响应。

React allows us to pass props (short for properties) from the PictureStatus component and the Status component to specify how many letters we want to allow in our response, rather than having two different comment components.

React允许我们从PictureStatus组件和Status组件传递道具(属性的缩写)，以指定我们要在响应中允许的字母数量，而不是具有两个不同的注释组件。

The syntax for props looks like the following:

props的语法如下所示：

<Comment maxLetters={20} /> <Comment text='hello world' /> <Comment show={false} />

let test = 'hello world' <Comment text={test} />

The props look like HTML attributes. If you are passing a string via props, you don’t need the brackets. Any other data type or a variable needs to be within the brackets.

道具看起来像HTML属性。 如果通过道具传递字符串，则不需要括号。 任何其他数据类型或变量都需要放在方括号内。

Then, within our component, we can use our props:

然后，在我们的组件中，我们可以使用我们的道具：

console.log(this.props.maxLetters)

They are bundled together in the props attribute of the instance so they can be accessed with this.props.myPropName.

它们被捆绑在实例的props属性中，因此可以使用this.props.myPropName进行访问。

So, let’s change the hardcoded 140 characters to be changeable outside the component!

因此，让我们将硬编码的140个字符更改为在组件外部可以更改！

First, we’ll change where we instantiate the Comment component within the Status component (note some code is omitted):

首先，我们将更改实例化Status组件内Comment组件的位置(注意，省略了一些代码)：

class Status extends React.Component {   ...       <div className="card-footer text-muted">         <Comment maxLetters={280} />       </div>      </div>;    </div>   )  } }

Then we’ll change the hardcoded 140 character limit in the Comment component.

然后，我们将在Comment组件中更改硬编码的140个字符的限制。

class Comment extends React.Component {   ...     <div>      <textarea className="form-control" placeholder="Write a comment..." />     <small>{this.props.maxLetters} Remaining</small>;     </div>    ... }

州 (State)

The props that we pass from component to component will never change within the child component. They can change within the parent but not within the child. But — a lot of the time we will have attributes that we will want to change within the life of a component.

我们从一个组件传递到另一个组件的道具在子组件内永远不会改变。 它们可以在父母内部改变，但不能在孩子内部改变。 但是-很多时候，我们将拥有在组件生命周期内想要更改的属性。

For example, we want to keep a tally of how many characters the user has typed into the textarea, and we want to keep track of whether the status has been “liked” or not. We will store those attributes that we want to change within the component in its state.

例如，我们希望统计用户在文本区域中键入了多少个字符，并且希望跟踪状态是否被“喜欢”。 我们将在状态下将要更改的那些属性存储在组件中。

You’ll notice a lot of immutability within React — it is highly influenced by the functional paradigm, so side effects are also discouraged.

您会注意到React内有很多不变性-它在很大程度上受到功能范式的影响，因此不鼓励副作用。

We want this state to be created whenever we create a new instance of a component, so we will use the ES6 class constructor to create it. If you want a quick refresh on ES6 classes MDN is a great resource!

我们希望在创建组件的新实例时都创建此状态，因此我们将使用ES6类构造函数来创建它。 如果您想快速刷新ES6类，则MDN是一个很好的资源！

State is going to be an object with any key-value pairs that we want to include. In this case, we want a characterCount of how many characters the user has typed. We’ll set that to zero for now:

状态将成为具有我们要包括的所有键值对的对象。 在这种情况下，我们需要一个characterCount来输入用户输入了多少个字符。 我们现在将其设置为零：

class Comment extends React.Component {     constructor () {       super()       this.state = { characterCount: 0 }     } ...

Now let’s subtract that from the maxLetters prop, so we always know how many characters we have remaining:

现在让我们从maxLetters道具中减去它，以便我们始终知道还剩下多少个字符：

<small>{this.props.maxLetters - this.state.characterCount} Remaining&lt;/small>

If you increase the characterCount, the characters remaining display decreases.

如果增加characterCount ，剩余字符显示将减少。

But — nothing happens when you type! We’re never changing the value of characterCount. We need to add an event handler to the textarea so that we change the characterCount when the user types.

但是-键入时什么也不会发生！ 我们从不更改characterCount的值。 我们需要向textarea添加事件处理程序，以便在用户键入时更改characterCount 。

事件处理程序 (Event Handlers)

When you’ve written JavaScript in the past, you’ve probably written event handlers to interact with user input. We are going to do the same in React, the syntax is going to be a little bit different.

过去编写JavaScript时，您可能已经编写了事件处理程序来与用户输入进行交互。 我们将在React中做同样的事情，语法会有所不同。

We are going to add a onChange handler to our textarea. Inside of it, we will place a reference to an event-handling method that will run every time the user types in the textarea.

我们将向我们的textarea添加一个onChange处理程序。 在其中，我们将放置对事件处理方法的引用，该方法将在用户每次输入textarea 。

<textarea className="form-control" placeholder="Write a comment..." onChange={this.handleChange}/>

Now we need to create a handleChange method!

现在我们需要创建一个handleChange方法！

class Comment extends React.Component {     constructor () {      super()      this.state = { characterCount: 0 }     }         handleChange (event) {       console.log(event.target.value)     } ...

Right now, we’re just console.log-ing the event.target.value. This will work the same way as it does in React-less JavaScript (though if you dive a little deeper, the event object is a little bit different). If you look at that console, we are printing out what we are typing in the textbox.

现在，我们只是console.log event.target.value 。 这将与无React JavaScript中的工作方式相同(尽管如果您深入一点，则事件对象会有些不同)。 如果您查看该控制台，我们将打印出我们在文本框中键入的内容。

Now we need to update the characterCount attribute in state. In React, we never directly modify state, so we can't do something like this: this.state.characterCount = event.target.value.length. We instead need to use the this.setState method.

现在我们需要更新state中的characterCount属性。 在React中，我们永远不会直接修改state ，所以我们不能做这样的事情： this.state.characterCount = event.target.value.length 。 相反，我们需要使用this.setState方法。

handleChange (event) {    this.setState({ characterCount: event.target.value.length }) }

But! You get an error — “Uncaught TypeError: this.setState is not a function”. This error is telling us that need to preserve the context of the ES6 class within the event handler. We can do this by binding this to the method in the constructor! If you want to read more about this, here's a good article.

但！ 您将收到一个错误-“未捕获的TypeError：this.setState不是函数”。 该错误告诉我们需要在事件处理程序中保留ES6类的上下文。 我们可以通过将其绑定到构造函数中的方法来做到这this ！ 如果您想了解更多有关此的内容，请阅读这篇好文章 。

class Comment extends React.Component {    constructor () {      super() this.handleChange = this.handleChange.bind(this) ...

Okay! We’re almost there. We just need to add the ability to toggle the like showing up.

好的！ 我们快到了。 我们只需要添加到切换的能力like显示出来。

We need to add a constructor to our Like component. In that constructor, we need to instantiate the component's state. The thing that will change within the lifecycle of the component is whether or not the status has been liked.

我们需要向Like组件添加一个构造函数。 在该构造函数中，我们需要实例化组件的状态。 在组件的生命周期内将发生变化的是状态是否被喜欢。

class Like extends React.Component {     constructor() {       super()       this.state = { liked: false }      } ...

Now we need to add an event handler to change whether or not the status has been liked:

现在，我们需要添加一个事件处理程序来更改是否喜欢该状态：

class Like extends React.Component {   constructor() {     super()     this.state = { liked: false }    this.toggleLike = this.toggleLike.bind(this)    }

toggleLike () {     this.setState(previousState => ({ liked: !previousState.liked    }))    } ...

The difference here is that the callback function this.setState receives a parameter -- previousState. As you can probably guess from the name of the parameter, this is the value of state before this.setState is called. setState is asynchronous, so we can't depend on using this.state.liked within it.

这里的区别在于回调函数this.setState接收一个参数- previousState 。 正如您可能从参数名称中猜测的那样，这是在调用this.setState之前的状态值。 setState是异步的，因此我们不能依赖于在其中使用this.state.liked 。

Now, we need to:

现在，我们需要：

a) call the event handler whenever the user clicks on the like button

a)每当用户单击“赞”按钮时调用事件处理程序

b) only show the LikeIcon when liked is true

b)只表明，当LikeIcon liked是真实的

Awesome! Now all of our functionality is in place!

太棒了！ 现在我们所有的功能都就位了！

奖励：功能组件 (Bonus: Functional components)

If you feel like you’re in over your head already, feel free to skip this part. I wanted to make one more quick refactor to this project. If we create components that don’t have state associated with them (which we call stateless components), we can make our components into functions instead of ES6 classes.

如果您觉得自己已经过头了，请随时跳过此部分。 我想对该项目进行一次快速重构。 如果我们创建没有状态关联的组件(我们称之为无状态组件)，则可以使我们的组件成为函数，而不是ES6类。

In that case, our LikeIcon could look something like this:

在这种情况下，我们的LikeIcon可能看起来像这样：

We just return the UI of the component instead of using the render method!

我们只返回组件的UI，而不使用render方法！

Here is a CodePen that implements this refactor.

这是实现此重构的CodePen。

备忘单 (Cheat Sheet)

I love cheatsheets, so I made one with the content of this post:

我喜欢备忘单，所以我用这篇文章的内容做了一个：

You can also download it as a PDF here!

您也可以在此处将其下载为PDF！

下一步 (Next Steps)

To recap, we talked about the component architecture, the basic React syntax and JSX, state and props, event handlers, and functional components.

回顾一下，我们讨论了组件架构，基本的React语法和JSX，状态和道具，事件处理程序以及功能组件。

If you would like to view all the CodePens from this tutorial, here is a collection.

如果您想查看本教程中的所有CodePens，则这里是一个集合。

If you would like to try to extend the code from this tutorial, I would recommend changing likes to reactions or creating a photo component that reuses some of the components that we made!

如果您想尝试扩展本教程中的代码，我建议您将“喜欢”更改为“React”，或者创建一个照片组件以重用我们制造的某些组件！

Also, here are some other awesome places to learn React:

另外，这里还有一些其他很棒的学习React的地方：

• React Documentation

  React文档

• DevCoffee

  开发咖啡

• Wes Bos Redux

  Wes Bos Redux

保持联系 (Keep in touch)

If you liked this article and want to read more, I have a weekly newsletter with my favorite links from the week and my latest articles. Also, tweet me about things you want me to write tutorials on, or constructive feedback on how I could make these easier to follow! If you have any questions, my AMA repo is the best place to reach me!

如果您喜欢这篇文章并想了解更多信息，请参阅每周新闻通讯，其中包括本周我最喜欢的链接和最新文章。 另外，向我发送有关您要我撰写教程的内容的推文 ，或者是有关如何使这些内容更容易理解的建设性反馈！ 如有任何疑问，我的AMA仓库是联系我的最佳地点！

Originally published at zen-of-programming.com.

最初发布于zen-of-programming.com 。

翻译自: https://www.freecodecamp.org/news/a-complete-beginners-guide-to-react-4d490abc349c/

初学react实现路由跳转