Name: Reactで考える - CS50 Beyond 2019 (Thinking in React - CS50 Beyond 2019)
Uploaded: 2021-01-14T10:19:49.000Z
Duration: 1 h 9 min 37 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

this is the second-to-last day of the course.

And goal for today is going to be to pick up really

So yesterday we introduced a new JavaScript library called React.

And React was designed to make it easier for us to build

And we did so by creating components and ultimately via declarative programming,

where we were describing what it is that the page should look like,

whether certain variables should belong in certain places on the page,

whether we should be iterating over a particular variable in order

And then the only thing we needed to do in order to edit the page was

rather than go into the dom and manipulate the dom and say,

update this element or update that element, we would just say,

Set the state of the component to be something different.

And the page would automatically render and re-update

the parts of the page that needed to in order to reflect those changes.

And so the goal of today is to continue along those lines and in particular,

emphasize thinking in React, thinking about how

it is that we take an application that we're going for,

decompose it into pieces, and then try and put it back together, such

that we can figure out what components, what state we

need to keep track of in order to make our applications

Along the way we'll talk about things like React lifecycle

and about how to get your React applications, which

are front-end applications, to interact with the back end, like a server,

And then we'll have some opportunity for hands-on projects, as before.

And so we'll start by taking a look at an example from yesterday

and begin to answer some of the questions

And so we'll take a look at counter.html And counter.html,

you'll recall from yesterday, was just an application

whereby it displayed a number that defaulted to the number 0.

And then we had increment and decrement buttons, or plus and minus buttons,

where all those buttons' data will change the value of the number.

We can go 1, 2, 3, 4, 5 by clicking the Increment button plus the Minus button

And ultimately the way that we implemented

that program was to say inside of counter.html,

we had some state inside of our counter component

that initially was just set to the number 0.

And then when we click the On-click button for the plus or minus buttons,

we would call the increment or decrement functions.

And all those increment and decrement functions would do

is call the this.setState method, which is a special method in React that

takes the state and updates it, in particular by taking the count

and setting it to whatever the count minus 1 is in the case of decrement,

and in the case of increment, taking the count and adding 1 to it.

Of course, this state only exists when this component

And as soon as we close the page and reopen it,

we're getting a brand-fresh, new component.

And as a result, if I increase the number to, say, 5, for example,

close the page, and then reopen the counter.html, we're back to 0, right?

And as a result, our state is reset back to the initial state

as defined by the constructor, which, in this case, is the number 0.

Now, before we got to the world of React and we were just

dealing with plain JavaScript, how do we solve this problem,

if we wanted the state to persist between when you open the page,

We cached it in a place called local storage,

a place within the browser, whereby we could

say I want to store the state of the application inside of local storage,

such that later on in my application I can refer back to local storage

and say, get this value out of local storage and put it into my application.

And in React, we can do something very similar.

Every React component has a number of what are called lifecycle methods,

or functions that are going to run at a particular point in the component's

And one of the most common is a special function

The only one we're going to talk about today is componentDidMount

And componentDidMount is a special method in React

that is going to run as soon as a component is mounted into the dom.

In other words, as soon as we add this component into the dom,

this is the method that's going to run before it actually ultimately renders

So any work we want to do of, like, setting up the component,

And so one thing we can do, for example, is get something out of local storage.

I can say, local storage.getItem count in order

to say, all right, let me get the count value out of local storage.

And I'll save that inside of a variable that I'm just going to call count.

So if there was an item called count in local storage,

I'm going to extract it from local storage

and save it inside of a variable called count.

Now, there's a chance that there was no count item in local storage,

that this is not equal to any particular value.

字幕リスト動画再生

Reactで考える - CS50 Beyond 2019 (Thinking in React - CS50 Beyond 2019)

sort

access

audience

current