react实战课程_通过一门顶级技术学校创建的由48部分组成的庞大课程来学习React

react实战课程

Ever since we started creating courses on Scrimba, our users have asked us for a proper intro course on React. So when we finally got to it, we decided to make it our most comprehensive course ever.

自从我们开始在Scrimba上创建课程以来，我们的用户一直在要求我们提供有关React的适当入门课程。 因此，当我们最终了解它时，我们决定将其作为有史以来最全面的课程。

It's called Learn React and it contains 48 chapters in total - a mix of lectures and interactive assignments.

它被称为Learn React ，它总共包含48个章节-包括讲座和交互式作业。

This is the most comprehensive intro course ever created on Scrimba. It contains 48 chapters in total — a mix of lectures and interactive assignments.

这是有史以来在Scrimba上开设的最全面的入门课程。 它总共包含48个章节-包括讲座和互动作业。

The man behind the course is the eminent teacher Bob Ziroll. Bob is the Director of Education at V School, a technology education school that teaches full stack Javascript and UX courses.

课程背后的人是著名的老师Bob Ziroll。 鲍勃(Bob)是V School的教育总监， V School是一门技术教育学校，教授全栈Javascript和UX课程。

V School is one of the top coding schools according to Course Report, so we’re super excited to team up with them.

根据课程报告 ，V School是顶尖的编码学校之一，因此我们很高兴与他们合作。

So if you like this course, be sure to check out V Schools immersive full-stack program. Now let’s have a look at how the course is laid out!

因此，如果您喜欢本课程，请务必查看V Schools沉浸式全栈程序 。 现在让我们看一下课程的布局！

第1部分。简介和哲学 (Part 1. Intro & Philosophy)

Bob has been teaching in bootcamps since 2014, and has developed his own learning philosophy. So in the first screencast, we’ll get familiar with this philosophy. In the image below you’ll see the gist of it.

自2014年以来，鲍勃一直在训练营任教，并发展了自己的学习理念。 因此，在第一个屏幕录像中，我们将熟悉这种哲学。 在下面的图像中，您将看到它的要旨。

第2部分。我们将要建立的 (Part 2. What we’ll be building)

In the next video, Bob gives an overview of the course, where he gives us a quick glance at two projects we’re going to build: a simple To-do list app, which covers a lot of React core topics; and a capstone project, which will be a meme generator app.

在下一个视频中，Bob概述了该课程，他使我们快速浏览了我们将要构建的两个项目：一个简单的待办事项列表应用程序，其中涵盖了许多React核心主题； 还有一个顶点项目，它将是一个模因生成器应用程序。

第3部分。为什么要进行React？ (Part 3. Why React?)

First things first, Bob lets us know why we should even consider using something like React instead of just writing it in plain JavaScript and why so many developers already chose to use React.

首先，Bob让我们知道了为什么我们甚至应该考虑使用类似React的东西，而不是仅仅用纯JavaScript编写它，以及为什么这么多开发人员已经选择使用React。

第4部分。ReactDOM和JSX (Part 4. ReactDOM & JSX)

In this screencast we jump straight into code and write our Hello World using JSX — a React specific JavaScript eXtension, so we can write HTML and JavaScript at the same time!

在此截屏视频中，我们直接跳入代码并使用JSX(React特定的JavaScript eXtension)编写我们的Hello World，以便我们可以同时编写HTML和JavaScript！

import React from "react"  
import ReactDOM from "react-dom"

ReactDOM.render(<h1>Hello world!</h1>, document.getElementById("root"))

Bob also quickly covers a few gotchas, like correct React imports and that JSX doesn’t like when you’re trying to render two adjacent elements.

Bob还很快介绍了一些陷阱，例如正确的React导入，而当您尝试渲染两个相邻元素时，JSX不喜欢。

// Hm, not sure which element I should render here...  
   ReactDOM.render(  
     <h1>Hello world!</h1>  
     <p>I'm a paragraph</p>,   
   document.getElementById("root"))

// This is much better!  
   ReactDOM.render(  
     <div>  
       <h1>Hello world!</h1>  
       <p>I'm a paragraph</p>  
     </div>,   
   document.getElementById("root"))

第5部分。ReactDOM和JSX实践 (Part 5. ReactDOM & JSX Practice)

This is our first practice of this course. In practice screencasts Bob sets us an Objective and gives us a few Hints.

这是我们本课程的第一次练习。 在实践中，Bob为我们设定了一个目标，并给了我们一些提示。

Bob encourages us to spend some time thinking about and working our way through this and subsequent challenges, as the more effort we put in the more we can remember about React.

鲍勃(Bob)鼓励我们花一些时间思考和努力应对这一挑战和后续挑战，因为我们投入的精力越多，我们对React的记忆就越多。

In the end, Bob shows and walks us through the solution, but this blog won’t give any spoilers ?, so feel free to check it out in the actual screencast.

最后，Bob展示了并指导我们完成该解决方案，但是此博客不会给您任何破坏性的消息，因此请随时在实际的截屏视频中进行查看。

第6部分。功能组件 (Part 6. Functional Components)

In this cast, Bob gives us a quick overview of Functional Components.

在此演员表中，Bob给我们提供了功能组件的快速概述。

import React from "react"  
import ReactDOM from "react-dom"

function MyApp() {  
  return (  
    <ul>  
       <li>1</li>  
       <li>2</li>  
       <li>3</li>  
    </ul>  
)}

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

We define MyApp() as a simple JS function which returns a very simple HTML list element, but that’s where React shines through as later we use that function as <MyApp /> HTML element!

我们将MyApp()定义为一个简单的JS函数，该函数返回一个非常简单HTML列表元素，但这就是React的亮点，后来我们将该函数用作<MyApp /> HTML元素！

第7部分。功能组件实践 (Part 7. Functional Components Practice)

Time for some more practice.

是时候进行更多练习了。

So just like in the previous practice cast, there will be no spoilers here, but feel free to jump straight into code and come up with your own solution. In the end Bob walks us through it just like before.

因此，就像在以前的练习中一样，这里没有破坏者，但可以随时直接进入代码并提出自己的解决方案。 最后，鲍勃像以前一样引导我们完成整个过程。

第8部分。将组件移到单独的文件中 (Part 8. Move Components into Separate Files)

In this chapter, Bob gives us a few good and common React practices for organising code, for example naming files with components MyInfo.js the same as the component itself <MyInfo /> .

在本章中，Bob为我们提供了一些良好的常用React组织代码实践，例如，使用组件MyInfo.js命名文件的方式与组件本身<MyInfo /> 。

We then learn how to extract components into their own separate files and how to export them to later use in our app.

然后，我们学习如何将组件提取到它们自己的单独文件中，以及如何将其导出以供以后在我们的应用程序中使用。

// MyInfo.js

import React from "react"  
function MyInfo() {  
  return (  
   // component code  
  )  
}

export default MyInfo

We can then just place our component into components folder and import <MyInfo /> to index.js

然后，我们可以将组件放入components文件夹，然后将<MyInfo />导入index.js

// index.js

import React from "react"  
import ReactDOM from "react-dom"

import MyInfo from "./components/MyInfo"

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

第9部分。父/子组件 (Part 9. Parent/Child Components)

In this screencast, Bob talks about Parent and Child components. Regular applications are far more complex than just one component rendered to the DOM. Instead, we usually have a complex hierarchy of components.

在这个截屏视频中，Bob讨论了Parent和Child组件。 常规应用程序比仅呈现给DOM的一个组件复杂得多。 相反，我们通常具有复杂的组件层次结构。

We start with writing our Functional Component <App /> which is going to be at the top of the component hierarchy

我们首先编写功能组件<App /> ，该组件将位于组件层次结构的顶部

// index.js

import React from "react"  
import ReactDOM from "react-dom"

import App from "./App"

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

And in the App.js itself:

在App.js本身中：

// App.js

import React from "react"

function App() {  
  return (  
    <div>  
      <nav>  
        <h1>Hello a third time!</h1>  
        <ul>  
          <li>Thing 1</li>  
          <li>Thing 2</li>  
          <li>Thing 3</li>  
        </ul>  
      </nav>  
      <main>  
        <p>This is where most of my content will go...</p>  
      </main>  
    </div>  
  )  
}

export default App

As you can see, we can write our pages in <App /> but that defeats the purpose of React. We can take each piece of HTML and put in a separate component.

如您所见，我们可以在<App />编写页面，但这违反了React的目的。 我们可以将每段HTML放入一个单独的组件中。

This is what our <App /> might look like:

这是我们的<App />可能的样子：

In React, HTML elements that begin with a capital letter indicates a component we created

在React中，以大写字母开头HTML元素表示我们创建的组件

Using this concept our <App /> component would look like so:

使用此概念，我们的<App />组件将如下所示：

import React from "react"  
import MainContent from "./MainContent"  
import Footer from "./Footer"

function App() {  
  return (  
    <div>  
      <Header />  
      <MainContent />  
      <Footer />  
    </div>  
  )  
}

export default App

This is much better and it’s a very neat way to organise code.

这是更好的方法，并且是组织代码的一种非常简洁的方法。

第10部分。父/子组件练习 (Part 10. Parent/Child Components Practice)

It’s practice time. Here’s the task we get from Bob so let’s get started.

这是练习时间。 这是我们从鲍勃那里获得的任务，所以让我们开始吧。

As usual, no spoilers in this blog, so feel free to dive into the solution in Bob’s screencast.

像往常一样，此博客中没有剧透，所以请随时进入Bob的截屏视频中解决方案。

If you’re not very sure where to start, Bob recommends to look over the previous chapters first and attempt to come up with a solution, even if it’s not perfect at this stage. This would be the best way to learn.

如果您不确定从哪里开始，则鲍勃建议您先阅读前面的章节，并尝试提出解决方案，即使在当前阶段还不完善。 这将是最好的学习方法。

第11部分。Todo应用程序-第1阶段 (Part 11. Todo App — Phase 1)

Alright! Congratulations, we’ve mastered the very basics of React and this foundation is enough for us to start building our first real-world app.

好的！ 恭喜，我们已经掌握了React的基础知识，这一基础足以让我们开始构建我们的第一个实际应用程序。

First, we need to create a structure for our app, and that’s a perfect opportunity to practice what we have learned in the previous screencasts. Here’s the task and let’s get started.

首先，我们需要为我们的应用程序创建一个结构，这是实践我们在以前的截屏视频中学到的绝好机会。 这是任务， 让我们开始吧。

By now this should be quite straightforward and Bob walks through the solution with us.

到现在为止，这应该很简单了，Bob和我们一起解决了这个问题。

第12部分。使用CSS类对React进行样式化 (Part 12. Styling React with CSS Classes)

In this cast, Bob introduces us to styling in React. There are a few different ways to style components in React, and we will start with CSS classes, as this is the one most of us should be really familiar with.

在此演员表中，Bob向我们介绍了React中的样式。 在React中有几种样式化组件样式的方法，我们将从CSS类开始，因为这是我们大多数人应该真正熟悉的一种。

Let’s start with a simple example. The structure of this example is the same as in the previous chapter.

让我们从一个简单的例子开始。 该示例的结构与上一章相同。

In React it’s very similar to plain HTML, but instead of class we need to use className:

在React中，它与纯HTML非常相似，但是我们需要使用className来代替class ：

function Header() {  
  return (  
    <header className="navbar">This is the header</header>  
  )  
}

A lot of places will tell you that we need to write className because class is a reserved word in JS, but the truth is that under the hood, JSX is using vanilla JS DOM API.

很多地方会告诉您，我们需要编写className因为class是JS中的保留字，但事实是，在内部，JSX使用的是普通JS DOM API。

document.getElementById("something").className += "new-class-name"

Now we can just write plain CSS:

现在我们可以编写普通CSS：

第13部分。警告 (Part 13. Some Caveats)

As a side note, Bob just lets us know about certain styling choices he personally prefers, so we are aware that there is a different way of doing things. Should you wish to write code slightly differently, you’re more than welcome to do that.

附带说明一下，Bob只是让我们知道他个人更喜欢的某些样式选择，因此我们知道有一种不同的处理方式。 如果您希望编写的代码略有不同，欢迎您这样做。

// Bob likes to avoid semicolons, where possible  
import React from 'react'

// but there is no way to avoid them here  
for (let i = 0; i < 10; i++) {}

// Bob prefers regular functions  
function App() {  
  return (  
    <h1>Hello world!</h1>  
  )  
}

// Although you can write ES6 arrow functions if you wish  
const App = () => <h1>Hello world!</h1>

第14部分。JSX到JavaScript并返回 (Part 14. JSX to JavaScript and Back)

Before we move any further, we should really look into how JSX and JS play together. We see how inside our JS functions we return something that looks like HTML, but is JSX.

在继续前进之前，我们应该真正研究一下JSX和JS如何协同工作。 我们看到在JS函数内部如何返回类似于HTML的内容，但返回的是JSX。

Now, what if we wanted to use a variable? We can do it using {}:

现在，如果我们想使用变量怎么办？ 我们可以使用{}来做到这一点：

function App() {  
  const firstName = "Bob"  
  const lastName = "Ziroll"  
    
  return (  
    <h1>Hello {\`${firstName} ${lastName}\`}!</h1>  
  )  
}

{} is a way to use plain JS in JSX. In plain language it would look like <h1>This is JSX {now we're writing JS} and we're back to JSX</h1>

{}是在JSX中使用普通JS的一种方法。 用通俗易懂的语言，它看起来像是<h1>This is JSX {now we're writing JS} and we're back to JSX</h1>

第15部分。具有Style属性的内联样式 (Part 15. Inline Styles with the Style Property)

One very quick trick to apply styles in React is to use inline styles.

在React中应用样式的一个非常快速的技巧是使用内联样式。

<h1 style={{color: "#FF8C00"}}>Hello World!</h1>

Notice how we use to sets of curly braces{{}}. This is because React expects styles to be passed as an object, but then we also need to tell JSX that we’re using JS objects.

注意我们如何使用花括号{{}}集合。 这是因为React期望将样式作为对象传递，但是随后我们还需要告诉JSX我们正在使用JS对象。

There is a gotcha though.

虽然有一个陷阱。

// This is going to error  
<h1 style={{background-color: "#FF8C00"}}>Hello World!</h1>

// This is what we need to do, because JS doesn't like dashes in the   
// middle of our property names  
<h1 style={{backgroundColor: "#FF8C00"}}>Hello World!</h1>

第16部分。TodoApp-阶段2。 (Part 16. Todo App — Phase 2.)

In this screencast, we’re going to pick up where we’ve left off with the Todo list. To start with, Bob asks us to create <TodoItem /> component by extracting the following code into it.

在此截屏视频中，我们将从待办事项列表中移走。 首先，Bob要求我们通过将以下代码提取到其中来创建<TodoItem />组件。

<input type="checkbox" />  
<p>Placeholder text here</p>

And now we can add some styling and have a nice-looking todo list. Soon we are going to learn how to customize the text inside the <p> tag, but before that, we need to learn about props.

现在，我们可以添加一些样式，并具有漂亮的待办事项列表。 很快，我们将学习如何自定义<p>标记内的文本，但是在此之前，我们需要学习道具。

第17部分。道具第1部分-了解概念 (Part 17. Props Part 1 — Understanding the Concept)

Let’s look at some plain HTML and think what is actually wrong with the elements.

让我们看一些简单HTML并思考元素实际上有什么问题。

<a>This is a link</a>  
<input />  
<img />

None of them actually do anything important. We really need to add these attributes to our elements.

他们实际上都没有做任何重要的事情。 我们确实需要将这些属性添加到元素中。

<a href="https://google.com">This is a link</a>  
<input placeholder="First Name" name="firstName" type="text"/>  
<img src="https://goo.gl/dKwBew"/>

A lot of times these attributes are called properties and if this HTML concept makes sense to you, then you understand props in React. Since we’re creating our own components we can allow props to modify the way our own components act.

很多时候，这些属性称为properties ，如果这个HTML概念对您有意义，那么您就可以理解React中的props 。 由于我们正在创建自己的组件，因此我们可以允许props修改我们自己的组件的行为方式。

第18部分。道具第2部分-可重用组件 (Part 18. Props Part 2 — Reusable Components)

In this cast, Bob takes us to YouTube to illustrate the concept of reusable components on a simple video tile. If it were created in React, we wouldn’t just copy-paste one tile across the whole page, but instead, we might create a single tile and make sure that it can change depending on the different properties such as the image URL or the title.

在此演员表中，Bob带我们进入YouTube，以在简单的视频图块上说明可重用组件的概念。 如果它是在React中创建的，我们不仅会在整个页面上复制粘贴一个图块，而是可能会创建一个图块，并确保它可以根据不同的属性(例如图片网址或标题。

第19部分。React中的道具 (Part 19. Props in React)

In this screencast, Bob will show us how to combine the props concepts from Part 17 and 18 of this course and he created a basic contact card list app for us to practice on.

在此截屏视频中，Bob将向我们展示如何结合本课程第17部分和第18部分中的道具概念，并且他创建了一个基本的名片列表应用程序供我们练习。

To start, it would be really nice, to create a component for a contact-card and learn how to make it dynamic so we can reuse a single component for all of the cards.

首先，为名片创建一个组件并学习如何使其动态化，这样我们就可以为所有名片重用单个组件，这将是非常不错的。

A very React way to use the contact card would be:

使用联系卡的一种非常React的方式是：

// App.js  
...  
<ContactCard  
  name="Mr. Whiskerson"  
  imgUrl="http://placekitten.com/300/200"  
  phone="(212) 555-1234"  
  email="mr.whiskaz@catnap.meow"  
/>  
...

// instead of   
<div className="contact-card">  
  <img src="http://placekitten.com/300/200"/>  
  <h3>Mr. Whiskerson</h3>  
  <p>Phone: (212) 555-1234</p>  
  <p>Email: mr.whiskaz@catnap.meow</p>  
</div>

Let’s create ContactCard and use props to dynamically show data.

让我们创建ContactCard并使用props动态显示数据。

import React from "react"

function ContactCard(props) {  
  return (  
    <div className="contact-card">  
      <img src={props.imgUrl}/>  
      <h3>{props.name}</h3>  
      <p>Phone: {props.phone}</p>  
      <p>Email: {props.email}</p>  
    </div>  
  )  
}

export default ContactCard

第20部分。道具和造型实践 (Part 20. Props and Styling Practice)

Right, let’s practice! Just like in the previous practice casts, here’s your task:

是的，让我们练习吧！ 就像以前的练习一样，这是您的任务：

And as it’s now our tradition, to avoid any spoilers and to really learn React, dive into Bob’s walkthrough.

按照我们的传统，为了避免剧透和真正学习React，请深入研究Bob的演练。

As always, try to crack this task on your own, and feel free to refer to previous chapters as they contain everything you need.

与往常一样，尝试自行完成此任务，并随意参考前面的章节，因为它们包含了您需要的一切。

第21部分。映射组件 (Part 21. Mapping Components)

So from the practice session, you might have noticed that we repeat a few <Joke /> components and might have wondered if there is a way to write it only once. Of course! We can use JavaScript .map to help us achieve this.

因此，在练习中，您可能已经注意到我们重复了几个<Joke />组件，并且可能想知道是否有一种方法只能编写一次。 当然！ 我们可以使用JavaScript .map帮助我们实现这一目标。

function App() {

const jokeComponents = jokesData.map(joke => <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />)

return (  
    <div>  
      {jokeComponents}  
    </div>  
  )  
}

Let’s just quickly break apart a few things here.

让我们在这里快速分解一些事情。

Very often our data would come from an API, so to imitate it we’re using jokesData to pretend that it has all the data we need.

我们的数据通常来自API，因此为了模仿它，我们使用jokesData假装它具有我们需要的所有数据。

const jokesData = [  
  {  
    id: 1,  
    punchLine: "It’s hard to explain puns to kleptomaniacs because they always take things literally."  
  },  
  {  
    id: 2,  
    question: "What's the best thing about Switzerland?",  
    punchLine: "I don't know, but the flag is a big plus!"  
  },  
  ...  
]

You might have also noticed in <Joke key={joke.id} ... /> the key prop. This is really a React requirement, that whenever you’re creating a component over and over you need to pass a key prop with some unique parameter. Most of the time it’s an id which you get from your API.

您可能还会在<Joke key={joke.id} ... />注意到key道具。 这实际上是一个React需求，每当您一遍又一遍地创建组件时，都需要传递带有一些唯一参数的key道具。 大多数情况下，这是您从API获得的id 。

第22部分。映射组件实践 (Part 22. Mapping Components Practice)

Time for another practice cast. Here’s your task, and Bob was also kind enough to create some boilerplate code for us, so we don’t need to create that much from scratch.

是时候进行另一次练习了。 这是您的任务，Bob也很乐意为我们创建一些样板代码，因此我们不需要从头开始创建那么多代码。

As always, feel free to walk through the solution with Bob, but do try to do it yourself first.

与往常一样，请随时与Bob讨论解决方案 ，但请务必先自己尝试。

第23部分：Todo App-第三阶段 (Part 23. Todo App — Phase 3)

Let’s now apply what we’ve learned about mapping and props and make our todo list more dynamic. We can now map item data and render <TodoItem />for every item of data we have.

现在，应用我们在映射和道具方面学到的知识，并使待办事项列表更加动态。 现在，我们可以映射项目数据并为我们拥有的每个数据项目渲染<TodoItem /> 。

And also use the data as props to <TodoItem /> and place it where we’d like within the component itself.

并将数据用作<TodoItem />道具，并将其放置在组件本身中我们想要的位置。

If at this point you notice the following error, Warning: Failed prop type: You provided a `checked` prop to a form field..., don’t be alarmed — we’ve done everything right. Bob will show us what it means and how to solve it in part 31 of this course.

如果此时您注意到以下错误， Warning: Failed prop type: You provided a `checked` prop to a form field... ，请不要担心-我们已正确完成了所有操作。 在本课程的第31部分中，Bob将向我们展示其含义以及如何解决它。

第24部分。基于类的组件 (Part 24. Class-based Components)

In this chapter, Bob introduces us to class components in React. Sometimes functional components we’ve been using so far are not enough and their functionality needs to be extended.

在本章中，Bob向我们介绍了React中的类组件。 到目前为止，有时我们一直在使用的功能组件还不够，需要扩展其功能。

We will learn more about the underlying differences later, but for now look at how they differ syntactically and try to convert our <App /> from a function to class component.

稍后，我们将学习更多有关基础差异的知识，但现在来看一下它们在语法上的差异，并尝试将<App />从函数转换为类组件。

class App extends React.Component {  
  render() {  
    return (  
      <div>  
        <h1>Code goes here</h1>  
      </div>  
    )  
  }  
}

第25部分。基于类的组件实践 (Part 25. Class-based Components Practice)

Some more practice. This time we get some code written for us and we should practice converting functional components to class components. In this practice we also have a little bug hidden in the code, so let’s find it.

一些练习。 这次我们为我们编写了一些代码，我们应该练习将功能组件转换为类组件。 在此实践中，我们在代码中还隐藏了一个小错误，因此让我们找到它。

As always try to finish this practice by yourself first and then follow Bob’s walkthrough. See you in the next chapter!

与往常一样，请先尝试自己完成此练习，然后再按照Bob的演练进行操作。 下一章见！

第26部分：状态 (Part 26. State)

State is one of the most important parts of React. It’s the data that the component itself maintains. props cannot be changed by a component receiving the props, but state can! So we might want to use state when a component itself needs to change some data. For example, when we click a button, some text in our component changes colour.

状态是React最重要的部分之一。 它是组件本身维护的数据。 props不能由组件接收道具改变，但state可以！ 因此，当组件本身需要更改某些数据时，我们可能想使用状态。 例如，当我们单击按钮时，组件中的某些文本会更改颜色。

A component needs to be a class component to have state and we need to have a constructor method.

一个组件必须是一个具有状态的类组件，而我们需要一个构造器方法。

constructor() {  
  super()  
  this.state = {  
    answer: "Yes"  
  }  
}

And then we can use that data in our return and display our data inside JSX.

然后，我们可以在return使用该数据，并在JSX中显示我们的数据。

第27部分：国家实践 (Part 27. State Practice)

In this practice session we have some debugging to do.

在本练习中，我们需要进行一些调试。

Quite often we need to be fixing some issues in our code, so it’s a very useful skill to practice. If you’re stuck, feel free to look over some of the previous chapters before following Bob’s solution.

通常，我们需要修复代码中的某些问题，因此这是实践中非常有用的技能。 如果您遇到困难，请在遵循Bob的解决方案之前先阅读一些先前的章节。

第28部分：国家实践2 (Part 28. State Practice 2)

State, as we mentioned before, is a super important concept, so Bob included two practice lessons for us.

正如我们前面提到的，状态是一个非常重要的概念，因此鲍勃为我们提供了两个实践课程。

This one might be quite tricky, but do give it your best shot and then have a look how Bob does it.

这可能很棘手，但是请尽力而为，然后看看鲍勃是如何做到的。

第29部分Todo App-阶段4 (Part 29 Todo App — Phase 4)

In this short cast, Bob shows us how to use state in our Todo App.

在这个简短的演员表中，Bob向我们展示了如何在Todo App中使用状态。

第30部分。在React中处理事件 (Part 30. Handling Events in React)

Event handling is essentially allowing a user to interact with your web page and do something specific when something like a button click or a hover happens.

事件处理本质上是允许用户与您的网页进行交互，并在发生诸如单击按钮或悬停之类的操作时进行特定的操作。

Let’s look at a simple example of executing this simple function.

让我们看一个执行此简单函数的简单示例。

function handleClick() {  
  console.log("I was clicked")  
}

You might already be familiar with how it’s done in regular HTML:

您可能已经熟悉常规HTML的工作方式：

<button onclick="handleClick()">Click me</button>

React is very similar.

React非常相似。

<button onClick={handleClick}>Click me</button>

The difference would be that event name onClick is in camelCase and handleClick is JS passed inside our JSX as we mentioned in lesson 14 about inline styles.

区别在于事件名称onClick在camelCase中， handleClick是在JSX内部传递的JS，正如我们在第14课中提到的内联样式一样。

第31部分：Todo App-阶段5 (Part 31. Todo App — Phase 5)

In this cast, Bob gives us a challenge. Remember the warning we get in the console about ‘checked’ prop? In order to solve it we need to provide onChange handler. At this point, just let it console.log anything you fancy.

在这个演员表中，鲍勃给了我们一个挑战。 还记得我们在控制台中收到有关“已检查”道具的警告吗？ 为了解决它，我们需要提供onChange处理程序。 此时，只要让它console.log任何您喜欢的内容即可。

Just like with all the usual challenges — jump to the cast to see the solution.

与所有常见挑战一样，请跳至演员表以查看解决方案。

第32部分。改变状态 (Part 32. Changing State)

We can update state in a component using React’s setState() method.

我们可以使用React的setState()方法更新组件中的状态。

Let’s look into how we might use it on a very popular example — a counter.

让我们研究一下如何在一个非常流行的示例(计数器)上使用它。

At the moment when you click the “Change!” button, nothing would happen. Let’s implement our handleClick() method. We first begin with us just trying to display a different number:

当您单击“更改！”时 按钮，什么也不会发生。 让我们实现handleClick()方法。 我们首先从尝试显示一个不同的数字开始：

handleClick() {  
  this.setState({ count: 1 })  
}

and pass it to our <button>.

并将其传递给我们的<button> 。

<button onClick={this.handleClick}>Change!</button>

If we run this, we will get Uncaught TypeError: Cannot read property ‘setState’ of undefined. This is a very common error, and one of the ways to make our handler work is to bind it.

如果运行此命令，则会得到Uncaught TypeError: Cannot read property 'setState' of undefined 。 这是一个非常常见的错误，使我们的处理程序工作的一种方法是将其绑定。

constructor() {  
  super()  
  this.state = {  
    count: 0  
  }  
  this.handleClick = this.handleClick.bind(this)  
}

Now we want our handleClick() method to be dynamic and actually add 1 to whatever our current state is. Luckily, React provides us with prevState so we can compare states.

现在，我们希望我们的handleClick()方法是动态的，并且实际上将1加到当前状态。 幸运的是，React为我们提供了prevState因此我们可以比较状态。

handleClick() {  
  this.setState(prevState => {  
    return {  
      count: prevState.count + 1  
    }  
  })  
}

第33部分：Todo App-阶段6 (Part 33. Todo App — Phase 6)

In this part we are going to make it so when we click the checkbox, it’s going to change our state and tick/untick the checkbox when required. Bob warns us that it’s a tricky part of the app and sounds deceptively simple. As a challenge let’s try to implement it ourselves first, but no need to worry if something doesn’t quite work — Bob’s got our back with a walkthrough.

在这一部分中，我们将做到这一点，因此，当我们单击复选框时，它将更改我们的状态并在需要时勾选/取消选中该复选框。 鲍勃警告我们说，这是应用程序的一个棘手部分，听起来似乎很简单。 作为一项挑战，让我们尝试首先自己实现它，但是不必担心某些事情还不太奏效-Bob通过演练帮助了我们 。

第34部分：生命周期方法第1部分 (Part 34. Lifecycle Methods Part 1)

One of the nice things about React is how we essentially write vanilla JS and React takes care of a lot of thing behind the scenes. There are a number of these “behind the scenes” events that happen to a component. It’s more like a set of milestones in a life of a component, so they are called lifecycle methods. Bob is going to cover the most popular and important ones in this and the following chapters.

关于React的一件好事是我们本质上是如何编写香草JS的，而React负责幕后的许多工作。 组件中发生了许多此类“幕后”事件。 它更像是组件生命周期中的一组里程碑，因此它们被称为生命周期方法 。 鲍勃将在本章及以下各章中介绍最受欢迎和最重要的文章。

The first one you already know is render(). Its job is to determine what gets rendered to the screen and React calls render() when something changes like state or props.

您已经知道的第一个是render() 。 它的工作是确定要渲染到屏幕上的内容，并在state或props发生变化时React调用render() 。

The next one is componentDidMount() which is essentially like ‘component is born’. This method is called when the component lands on a screen. This is a good time to make API calls.

下一个是componentDidMount() ，它本质上就像是“组件诞生”。 当组件降落在屏幕上时，将调用此方法。 这是进行API调用的好时机。

A third very interesting method is shouldComponentUpdate(). Sometimes React would update a component even if nothing seemed to change. This might become very expensive in some cases and this method gives us, the developers, a chance to optimise our application.

第三个非常有趣的方法是shouldComponentUpdate() 。 有时即使没有什么变化，React也会更新组件。 在某些情况下，这可能会变得非常昂贵，并且此方法为我们(开发人员)提供了优化应用程序的机会。

And last method in this chapter is componentWillUnmount() and is a place to clean up right before your component disappears from the user’s screen. You can remove event listeners or cancel API calls.

本章的最后一个方法是componentWillUnmount() ，它是在组件从用户屏幕上消失之前进行清理的地方。 您可以删除事件侦听器或取消API调用。

第35部分：生命周期方法第2部分 (Part 35. Lifecycle Methods Part 2)

In this chapter Bob very quickly covers some of the deprecated lifecycle methods, which you might see in some legacy React applications and he also covers some really rare methods, like getDerivedStateFromProps() and getSnapshotBeforeUpdate(). But we won’t be covering them in great depth as they are not essential to this course.

在本章中， Bob很快地介绍了一些过时的生命周期方法，您可能会在一些旧版React应用程序中看到它们，并且还介绍了一些非常罕见的方法，例如getDerivedStateFromProps()和getSnapshotBeforeUpdate() 。 但是我们不会对其进行深入介绍，因为它们对于本课程不是必不可少的。

第36部分：条件渲染 (Part 36. Conditional Rendering)

Sometimes you want to display some data or render some JSX only at a certain condition. That’s when we use conditional rendering.

有时，您只想在某些条件下显示某些数据或渲染某些JSX。 那就是我们使用条件渲染的时候。

One of the strengths of React is that by using vanilla JS we can preserve its flexibility to write our own code. The downside to this is when you’re learning React, there might be too many different ways of doing the same thing. Conditional rendering is one of them. Bob will show us a few ways to do it, but rest assured, there are as many ways as React developers.

React的优势之一是，通过使用香草JS，我们可以保留编写自己代码的灵活性。 不利的一面是，当您学习React时，做同一件事的方法可能太多了。 条件渲染就是其中之一。 Bob将向我们展示一些实现方法，但请放心，与React开发人员一样，方法也很多。

Let’s create a <Conditional /> component that renders “Loading…” when a page is loading. We can use it in our app in render method.

让我们创建一个<Conditional />组件，该组件在页面加载时呈现“ Loading…”。 我们可以在render方法的应用程序中使用它。

render() {  
  return (  
    <div>  
      <Conditional isLoading={this.state.isLoading}/>  
    </div>  
  )  
}

We can achieve our goal by using simple if-else from JS:

我们可以通过使用JS中的简单if-else来实现我们的目标：

Or we can improve it with the latest ES6 ternary operator.

或者我们可以使用最新的ES6三元运算符对其进行改进。

第37部分：条件渲染-实践 (Part 37. Conditional Rendering — Practice)

Let’s now practice. Conditional rendering is one of the essential tools in any React developer’s toolkit.

现在开始练习。 条件渲染是任何React开发人员工具包中必不可少的工具之一。

Try to give it your best shot before walking through the solution with Bob.

在与Bob讨论解决方案之前，请尝试尽力而为。

第39部分：Todo App-阶段7 (Part 39. Todo App — Phase 7)

So we’ve reached the final part of our Todo App and we just need to finish off the final styling part and we’re done! The challenge for this part would be to make a completed <TodoItem /> look different. For example, with greyed out text and/or background, turning text to italics. As one of the solutions, Bob will show us how to do it, but ultimately it is really up to us.

因此，我们已经到了Todo App的最后一部分，我们只需要完成最后的样式部分，就可以完成！ 这部分的挑战是使完整的<TodoItem />看起来不同。 例如，如果文本和/或背景为灰色，则将文本变为斜体。 作为解决方案之一， Bob会向我们展示如何做到这一点 ，但最终这取决于我们。

第40部分：从API提取数据 (Part 40. Fetching data from an API)

In this cast, Bob provided us with a bare component to learn more about fetching.

在此演员表中，Bob为我们提供了一个简单的组件，以了解有关获取的更多信息。

In chapter 24, we learned that one of the most common use cases for componentDidMount() lifecycle method is to get data from somewhere so our component can do whichever task it’s supposed to do.

在第24章中，我们了解到componentDidMount()生命周期方法最常见的用例之一是从某处获取数据，以便我们的组件可以执行其应做的任何任务。

In this example we will use a free Star Wars API to fetch some names of characters. Let’s write our componentDidMount() method, where we’re going to fetch some data and just console.log it.

在此示例中，我们将使用免费的《星球大战》 API来获取某些字符名称。 让我们编写我们的componentDidMount()方法，在这里我们将获取一些数据并只是console.log它。

componentDidMount() {  
  fetch("https://swapi.co/api/people/1")  
    .then(response => response.json())  
    .then(data => console.log(data))  
}

Data we got from the API call

我们从API调用获得的数据

Alright! So we just need to grab name from that data and store it in our state to then just display in the component. In the end our <App /> should be:

好的！ 因此，我们只需要从该数据中获取name并将其存储在我们的状态中，然后就可以在组件中显示即可。 最后，我们的<App />应该是：

There are a few interesting tricks we can learn from Bob.

我们可以从Bob那里学习一些有趣的技巧。

It’s good to create a loading boolean on state. In case our request takes a long time, we can just inform a user that the request is processing and their data will be with them shortly.

最好在状态上创建一个loading布尔值。 如果我们的请求花费很长时间，我们可以仅通知用户该请求正在处理中，并且他们的数据很快就会发送给他们。

We create a separate variable text in render() where we do all of our logic and we just have a very clean return(), so it’s easier to understand for the next developer who maintains our code.

我们在render()中创建一个单独的变量text在其中执行所有逻辑，并且只有一个非常干净的return() ，因此对于下一个维护我们代码的开发人员来说更容易理解。

第41部分。表格第1部分 (Part 41. Forms Part 1)

In this cast we’re going to explore how forms are created in React. Forms are actually a really tricky part of React. First thing, if you haven’t completed the challenges from parts about state in React, this would be the best time to catch up. And as a primer to forms, Bob recommends to read the official React docs about them.

在这个演员表中，我们将探讨如何在React中创建表单。 表单实际上是React的一个非常棘手的部分。 第一件事，如果您还没有完成关于React状态的部分挑战，那么这是赶上时机的最佳时机。 作为表单的入门，Bob建议阅读有关它们的官方React文档 。

In vanilla JS DOM API, you create an HTML form. Once the user decides to submit, you gather all the data from your forms, pretty much at the last second, and validate it before you send.

在香草JS DOM API中，您创建一个HTML表单。 用户决定提交后，您几乎可以在最后一秒从表单中收集所有数据，并在发送之前进行验证。

React advocates for you keeping a track of your form data as you go along, by saving it in state. On every keystroke you have the most updated version of the form saved in the state of your form component.

React倡导者通过保存状态信息来跟踪您的表单数据。 在每次击键时，您都会在表单组件的状态下保存最新版本的表单。

There are 3 key parts to forms in React:

React中有3个关键部分：

• Input — when the user updates input we fire event handler (line 20)
  输入-当用户更新输入时，我们将触发事件处理程序(第20行)
• Event handler — updates state with data from the user (lines 11–15)
  事件处理程序-使用来自用户的数据更新状态(第11-15行)
• State — storage for your data (lines 6–8)
  状态-存储数据(第6-8行)

For a more complex example, where Bob shows a few neat tricks on making forms very reusable and the code very readable, jump into the screencast.

举一个更复杂的示例，其中Bob展示了一些使表格非常可重用且代码易于阅读的巧妙技巧，请跳到截屏视频中。

第42部分。表格第2部分 (Part 42. Forms Part 2)

In this part, Bob further expands our knowledge about forms. Forms can handle more than just <input />! But things might get tricky. We learn how to deal with <textarea />, <select /> and <option /> for dropdown menus and expand further on <input /> to learn more about checkboxes and radio buttons.

在这一部分中，Bob进一步扩展了我们对形式的了解。 表单不仅可以处理<input /> ！ 但是事情可能会变得棘手。 我们学习了如何处理下拉菜单的<textarea /> ， <select />和<option /> ，并进一步扩展了<input />以了解有关复选框和单选按钮的更多信息。

第四十三部分：表格练习 (Part 43. Forms Practice)

Great, now it’s time for some practice.

太好了，现在该练习一些了。

Bob sets out a new challenge for us and as usual it’s best if we try to solve it on our own first.

鲍勃(Bob)为我们提出了一个新的挑战，通常，最好是我们首先尝试自己解决它。

If there is something not quite working out, Bob always has our back with a great walkthrough.

如果有什么事情不能解决， 鲍勃总是向我们走来。

第44部分。容器/组件体系结构 (Part 44. Container/Component Architecture)

In this cast Bob introduces a very popular React architecture pattern.

Bob在这个演员表中介绍了一种非常流行的React架构模式。

Very often when we write complex components, we eventually end up with a lot of lines of code in one file. We then start scrolling up and down to add extra functionality and display logic. That’s when Container/Component split becomes useful. We separate our UI and business concerns into different components in React. There are a lot of different terms around: smart/dumb, container/presentational, all of these refer to the same idea of separating rendered elements from data flow functionality.

很多时候，当我们编写复杂的组件时，我们最终会在一个文件中得到很多行代码。 然后，我们开始上下滚动以添加其他功能和显示逻辑。 这就是容器/组件拆分变得有用的时候。 我们将UI和业务问题分为React中的不同组件。 周围有很多不同的术语：灵巧/哑巴，容器/表现形式，所有这些都指的是将渲染元素与数据流功能分离的相同思想。

In our specific example, we can implement container/component pattern if we extract our HTML from render() method into a separate functional component <FormComponent /> and our Form.tsx becomes FormContainer.tsx.

在我们的特定示例中，如果我们从render()方法中提取HTML到单独的功能组件<FormComponent /> ，并且Form.tsx变为FormContainer.tsx ，则可以实现容器/组件模式。

As you can see, we still pass our handlers and data as props into our functional <FormComponent /> and inside the component we now call handlers and data via props.

如您所见，我们仍然将处理程序和数据作为道具传递到我们的功能<FormComponent /> ，现在在组件内部，我们通过道具调用处理程序和数据。

第45部分。Meme Generator顶点项目 (Part 45. Meme Generator Capstone Project)

You made it! Congratulations on reaching the capstone project. In this cast Bob sets out the ultimate challenge. We can now create our own app, from scratch.

你做到了！ 祝贺您达到了顶峰项目。 鲍勃在这次演出中提出了最终的挑战。 现在，我们可以从头开始创建自己的应用程序。

If completing the whole project in one go feels intimidating, Bob sets mini walkthrough challenges in the screencast to guide us through the completion.

如果您想一口气完成整个项目，鲍勃会在截屏视频中设置迷你演练挑战，以指导我们完成任务。

Good luck and happy coding!

祝您好运，编码愉快！

第46部分：编写现代React应用程序 (Part 46. Writing Modern React Apps)

Well done! Your project is now ready and you can show it to your friends and family! It is truly something to be proud of. Great job!

做得好！ 您的项目现已准备就绪，可以将其显示给您的朋友和家人！ 这确实是值得骄傲的。 很好！

In this cast, Bob gives us some advice on how to keep up with all the changes in the React ecosystem and gives us a few tips on how things we’ve learned so fa could be done slightly differently, like using ES6 arrow functions or extracting code into new components to improve readability.

在此演员表中，Bob为我们提供了一些有关如何跟上React生态系统中所有变化的建议，并为我们提供了一些技巧，以帮助我们了解所学到的方法，例如使用ES6箭头功能或提取代码添加到新组件中以提高可读性。

第47部分：实践的项目构想 (Part 47. Project Ideas for Practicing)

In this cast, Bob discusses where to go from here, where the course ends. There are some ideas, and good articles to read about how to practice what we’ve learned.

在此演员表中，鲍勃讨论了从这里到哪里，课程在哪里结束。 有一些想法和好的文章可供阅读，以了解如何实践所学知识。

第48部分。结论 (Part 48. Conclusion)

Congratulations, we’ve made it! In this cast we quickly sum up what we’ve done in this course and outline what we can learn in the future.

恭喜，我们做到了！ 在此演员表中，我们快速总结了本课程所做的工作，并概述了将来可以学习的内容。

Thank you so much for the course, Bob!

非常感谢您的课程 ，鲍勃！

---

---

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

谢谢阅读！ 我叫Per Borgen，我是Scrimba的共同创始人–学习编码的最简单方法。 如果要学习以专业水平构建现代网站，则应查看我们的响应式Web设计新手训练营 。

翻译自: https://www.freecodecamp.org/news/want-to-become-a-react-developer-947c9a6dbb76/

react实战课程