创建react应用程序_我从创建第一个React应用程序中学到了什么

阅读量：2527 次

发布时间：2019-05-11

本文共 7540 字，大约阅读时间需要 25 分钟。

创建react应用程序

by ellereeeee

由ellereeeee

我从创建第一个React应用程序中学到了什么 (What I learned from creating my first React app)

I’m going to share the things I wish I knew, wish I had done, or was glad I did when I made my first React app. It’s a Pomodoro Clock, or a productivity timer. I built it for a project and to practice the React I learned for a cohort.

我将分享我希望知道的事情，希望完成的事情，或者为我制作第一个React应用程序而感到高兴的事情。这是番茄钟或生产力计时器。我为项目构建了它，并实践了我在队列中学到的React。

You can check it out live , and the code is .

您可以现场，代码在。

Hopefully I can help some React newbies.

希望我能帮助一些React新手。

阅读React文档 (Read the React docs)

If you’re just starting to learn React, start with the . As far as docs go, the React ones are easy to understand and provide lots of examples.

如果您刚刚开始学习React，请从开始。就文档而言，React易于理解，并提供了许多示例。

Don’t do what I did and start with a React tutorial. I started with egghead.io’s (“Beginner’s” is a misnomer in my opinion) and it was rough. To be fair, I’ve heard egghead.io is meant for more experienced developers looking to get up to speed with a new framework.

不要做我做的事情，而是从React教程开始。我从egghead.io的 (我认为“ Beginner's是用词不当”)，而且很粗糙。公平地说，我听说egghead.io是为有经验的开发人员准备的，他们希望尽快掌握新框架。

I definitely learned a lot, but there was a lot of pausing videos, going back 10 seconds to hear an explanation again and again, and just looking at code and feeling lost. Things eventually clicked, but I can’t help but think I would’ve been better off starting with the official docs then checking out a tutorial.

我当然学到了很多东西，但是有很多暂停的视频，回溯10秒钟一次又一次地听到解释，只是看代码而感到迷路。事情最终得到了解决，但是我不禁觉得从正式文档开始然后再阅读教程会更好。

I’m sure you can find a more beginner-friendly tutorial. However, looking at official docs first is a good practice and I think you’ll be better off in the case of learning React.

我相信您会找到一个更加适合初学者的教程。但是，首先查看官方文档是一个好习惯，并且我认为学习React会更好。

熟悉JavaScript，或准备学习 (Know JavaScript well, or be ready to learn)

Look at this short code-snippet:

看一下这个简短的代码片段：

class Counter extends React.Component {  constructor(props) {    super(props)    this.state = {count: 0}    this.handleClick = this.handleClick.bind(this)  }

Above, we’ve got an ES6 class (which is just syntactic sugar for prototypal inheritance) declaration. What is prototypal inheritance? What are the constructor and super functions? Why are we hard binding handleClick to this? Do you know anything about lex-time scope in JavaScript?

上面，我们有一个ES6类(它只是原型继承的语法糖)声明。什么是原型继承？什么是constructor和super函数？为什么我们将handleClick强制绑定this ？您是否了解JavaScript中的词法时间范围？

Now, you don’t have to know the answers to these questions to make something in React. You could just assume that you need this or that piece of code to make things work and leave it at that. However, I think it’s important to understand things at a deeper level.

现在，你不必知道这些问题的答案，以使事情作出React。您可以假设您需要此代码或那段代码来使事情正常进行，而不必管它。但是，我认为更深入地了解事物很重要。

This code pattern is the bread and butter of React. Don’t you want to know what’s going on?

此代码模式是React的基础。您不想知道发生了什么吗？

This is just an example in React where you’ll need a decent knowledge of JavaScript.

这只是React中的一个示例，您需要对JavaScript有相当的了解。

Know it well, or be ready to learn.

熟悉它，或者准备学习。

在React中思考 (Think in React)

Design your app into a wireframe or mockup and break it down into components. This will make the coding process much smoother.

将您的应用程序设计为线框或模型，然后将其分解为组件。这将使编码过程更加顺畅。

For example, I started with this mockup.

例如，我从这个模型开始。

I changed some things in my final app, but looking at the mockup you can see:

我在最终应用程序中更改了一些内容，但查看模型，您会看到：

the orange app encompassing everything
涵盖所有内容的橙色应用

2. an information button at the top-left

2.左上方的信息按钮

3. a history button for completed tasks at the top-right

3.历史记录按钮，用于完成右上角的任务

4. a message/input in the top-center

4.位于顶部中心的消息/输入

5. a radial timer, clock, and up and down buttons in the center

5.径向计时器，时钟以及中央的向上和向下按钮

6. a play button in the bottom center

6.底部中央的播放按钮

Then I separated my UI into components. Each piece should represent some function or data.

然后，我将UI分为多个组件。每个部分都应代表一些功能或数据。

From this I was able to organize my components into a hierarchy:

由此，我能够将我的组件组织成一个层次结构：

Pretty straightforward. Everything is nested in the PomodoroTimer component. The important thing this illustrates is where state should be. State should be in one place in React and “flow down” to nested components. I decided it should be in the PomodoroTimer component.

非常简单。一切都嵌套在PomodoroTimer组件中。这说明了重要的一点是状态应该在哪里。状态应在React中放在一个位置，然后“向下”到嵌套组件。我决定应该在PomodoroTimer组件中。

I could have time state in the Timer component. However, I want to change the color of PomodoroTimer to blue if the user is taking a break. That means I'll have a timerType state that changes the background color and also the initial time (25 minutes for working and 5 minutes for resting).

我可能在Timer组件中有time状态。但是，如果用户正在休息，我想将PomodoroTimer的颜色更改为蓝色。这意味着我将拥有一个timerType状态，该状态会更改背景颜色以及初始时间(工作25分钟，休息5分钟)。

The flow of data is more straight-forward if I have both timerType state and time state in PomodoroTimer and pass down time to Timer. timerType would change from "Pomodoro" to "Rest" once time reaches 0. It's easier to understand how state flows in my app if it's all it one place. This makes for easier debugging as well.

数据流更直截了当的，如果我有两个timerType状态和time在PomodoroTimer状态和向下传递time到定时器。一旦time到达0， timerType将从"Pomodoro"更改为"Rest"如果状态全都集中在我的应用程序中， timerType容易理解状态的流向。这也使调试更加容易。

Check out the article from React’s official docs for a more detailed explanation on creating a React app from mockup to finished app.

查看React官方文档中的一文，以获得有关从模型到成品应用程序创建React应用程序的更详细说明。

检查控制台是否有错误 (Check the console for errors)

I made a big mistake in my code, and I would’ve caught it if I checked the console for errors. You should always be doing this regardless of what language or framework you’re coding in.

我在代码中犯了一个大错误，如果我检查控制台中的错误，就会被抓住。无论您使用哪种语言或框架编写代码，都应始终这样做。

I had the mistake pointed out to me after I posted my code to forums for review:

在将代码发布到论坛上进行审核后，我指出了我的错误：

./src/components/PomodoroTimer.jsx  Line 17:   Do not mutate state directly. Use setState()  react/no-direct-mutation-state  Line 21:   Do not mutate state directly. Use setState()  react/no-direct-mutation-state

This means I was modifying state directly, which is a big no-no in React.

这意味着我正在直接修改状态，这在React中是一个很大的禁忌。

So I changed my code from this:

因此，我从此更改了代码：

handleIncrementTime = () => {    this.setState({ state: (this.state.time += 300000) });  };  handleDecrementTime = () => {    if (this.state.time > 300000) {      this.setState({ time: (this.state.time -= 300000) });    }  };

to this:

对此：

handleIncrementTime = () =>    this.setState(prevState => ({ time: (prevState.time + 300000) }));  handleDecrementTime = () => {    if (this.state.time > 300000) {      this.setState(prevState => ({ time: (prevState.time - 300000) }));    }  };

I needed to use the second form of setState to update the state. Pass a function to setState that uses the argument prevState to update state. You can read about the second form of setState .

我需要使用setState的第二种形式来更新状态。将一个函数传递给setState ，该函数使用参数prevState来更新状态。您可以阅读有关setState的第二种形式的。