Name: REACT BASICS - CS50 on Twitch, EP.8 (REACT BASICS - CS50 on Twitch, EP. 8)
Uploaded: 2021-01-14T10:38:38.000Z
Duration: 1 h 30 min 47 s
Description: 【看影片學英語】數萬部 YouTube 影片，搭配英漢字典即點即查，輕鬆掌握單字發音與用法，長久累積看電影不必再看字幕。

Brian, what will you be talking to us today about?

Today we're going to be talking about React, which is a web framework that's

designed to help make it easier to develop dynamic web applications that

So we'll be taking a look at how to get started with that,

We'll only scratch the surface because there's a lot to React,

but hopefully you'll learn enough over the course of the next two hours

or so to get a good sense for how to use React to build

COLTON OGDEN: And Brian is CS50's head teaching fellow currently,

and also taught a course through the Extension School, the web course.

Let me just plug that really fast here. cs50.nx.org/web,

What were some of the topics that you taught in that web class?

BRIAN YU: Yeah, the web development course was a course we ran last spring.

It was about web application development using Python and JavaScript,

so we talked about continuing where CS50 leaves off,

talking about the design and implementation of web applications

We moved to a more advanced Python based web framework

called Django that has a bunch of additional features as well.

And throughout the course, we were talking

about issues of database design and security and scalability,

and ultimately how to design and deploy web applications on the internet.

So all of those lectures that are freely available online, definitely

feel free to check those out if that's something that's interesting to you.

COLTON OGDEN: And so would you say that's more of a back end course,

and what we're doing today is a little bit more on the front end?

BRIAN YU: Yeah, I'd say that there was a lot of back end

work over the course of that class where we were teaching things

about how to design API, for instance, how to design ORMs for interacting

with databases in particular, although we did touch on some JavaScript

React is really a framework designed for front end web development,

and you can connect it with just about any back end

that you use, not necessarily written in JavaScript.

You could connect it with a Flask or Django app,

I know React is one of the big front end frameworks.

BRIAN YU: As of right now, it's the biggest.

So these web frameworks sort of come and go, and they sometimes get more popular

Right now, React is number one in terms of popularity.

Number two is Angular, which is developed by Google.

The Angular 2 is a relatively recent addition to the mix,

and then there are other frameworks as well,

such as View that are also growing in popularity as well.

So we've got a couple of comments there in the chat.

So Bavick Knight and [INAUDIBLE] are regular folks who join us all the time.

Good to see you, M Kloppenberg, And oh, it

looks like Bavick says he's enrolled in the web course.

I want to learn more about it, about Django, he says.

Yeah, Django comes a little more than halfway through the course.

It gives us an opportunity to start to talk about testing our code

in order to make sure that our routes work properly,

and it gives us an opportunity to talk about security and some other issues.

All right, well, do you want me to bring your computer up here

So let's start by working on a very simple web front end using Django,

and what I have here is just a basic HTML

file, the same way that you would design any other HTML

But what you'll notice right here just to start us off,

I've added three scripts that we're going

to use in order to allow us to add some React code into this HTML file.

So the first one up here on line four, I am importing the React library itself,

the development version of the React library.

On the next line, I'm importing a related library called ReactDOM.

This is going to be a library that's going

to give us the ability to take some React code

and actually render it inside of the DOM.

And if you're unfamiliar, the DOM or the document object model

describes the structure of the web page, because we're going to say,

we're going to add some HTML element to this web page eventually,

and we're going to say, this HTML element

字幕列表影片播放

REACT BASICS - CS50 on Twitch, EP.8 (REACT BASICS - CS50 on Twitch, EP. 8)

ultimately

sort

awesome

instance