[MUSIC PLAYING] 

NEEL MEHTA: Here it goes. 

Well, everyone, welcome to web apps of the future with React. This is CS50. My name is Neel. I'm a TA for CS50 and a sophomore at Harvard College and a very, very passionate web developer. So I'm very exciting to be talking to you today, whether you're here or at home watching, about React, which is, again as I said, the future of web apps. 

So React is a web framework. And as I've been telling to some people here, a framework is just a set of tools you can use to structure and build your web app. And web apps are, again, websites that are interactive like Facebook, Twitter.com, Instagram.com, whatever. 

So Facebook is a web framework that was developed by Facebook a couple years back-- React is. It's since been used in Facebook on their mobile apps and the web app, Instagram. Khan Academy is another prominent early adopter of React. 

It's really been getting extremely popular. If you ever use things like Angular or Backbone, this is of the same family, but it has since far outstrip their popularity. It's the hot new thing. It's really, really huge. 

And so React is good not just as a web framework for building interfaces. It's good for building web interfaces. There's also a thing called React Native which lets you build interfaces for Android and iOS and maybe other platforms in the future using just the same JavaScript code. You could use the exact same JavaScript code to render websites, to render Android apps and iOS apps. 

It's a very, very exciting time. It's a really, really cool opportunity. It's really a universal web interface development tool, so it's a very, very important thing to know. And, as I was telling people before, this, I think, is going to change how we build web apps forever. So it's maybe a bit hyperbole, but I think it's a pretty good thing to know. 

OK, so what is React? React is a framework you can use for building interfaces. An interface is, again, a web page, right? So here's Instagram.com, uses React. 

React is built on the idea of components. A component is a HTML element on steroids, so an HTML element is like a button. It's a paragraph. It's a header, right? And Instagram will use these, but it will also use components of React. 

React components are souped-up HTML elements that have their own behavior contained within them. So, as an example, we could have a time element, a time component, which will contain like the time stamp, you know, a profile component which will contain the profile image and the name of the person. It can have a like counter, which can count like the number of likes, and if you click on it, it'll increase the number of likes. A component is just a bunch of HTML code that has some functionality wrapped inside of it. So it's like a HTML element on steroids, as I said before. You can take these components, and you can put them together to make new components, in this case, a post component, which contains all this stuff. It would contain Time, Profile, LikeCounter, maybe the comment and maybe the image itself. And so web apps are just built by taking components and putting them together. An Instagram feed is nothing more than a bunch of posts one after another, each post contains like the Time, Profile, LikeCounter, and so on. It's kind of like building a house. You don't build the house from the top down. You take components-- you take like the bathroom. You take the bedroom-- you stick them together, and you have a new component. You have a new part of the house. 

So React is all built around this idea of components that are interactive, that are declarative. Like you just say what a profile is, and it renders it. They are composable. You can take a time and a profile, put them together, make something better. And they're reusable, so if you have the source code for a post, you could embed that anywhere. 

You can embed an Instagram thing on your own website. You can embed in Facebook, for example, as long as it uses React as well. So components are really, really, really powerful building blocks of the web that can be used anywhere and put together to make new building blocks. That's the very, very high level overview. So, again, if you have any questions at any point about the philosophy of reactor, the coding, to stop me, and let me know. 

OK, so react is cool because it has a different way of looking at how you build web apps. You've probably heard of MVC, a model you control in CS50 or whatever other probing classes you use. And most frameworks are built around the idea of MVC. React is not. React is built around the idea of unidirectional data flow as seen by this chart or graphic here. 

Basically, you have a data source. And the data source will decide how to lay out certain components. And the components will then, when they change, they will tell the data source to change. 

To use the Instagram example, you might have a list of post objects like in a database or something. That the data. And then our post components will take that data, and use that data to render a thing on the screen. That's what the arrow from data to component is, and then that same data is used to render a bunch of components. 

In Facebook Messenger, for example, which is React, you might have a list of messages as your data source. And that would render not only the list of messages but also the list of friends you have. You have the unread count. Maybe also render the Facebook thing that's at the bottom of Facebook.com. The same data is a single source of truth and that causes a lot of components to be rendered. And whenever one of those components is changed, it goes back and changes the data source. 

You send a message, right? That changes the data source. You read your messages, so you set unread to 0. That changes the data source. And notice that all of these of one arrow going back to the same data source, so you know, given a certain data set, you know exactly what the page is going to look like. It's deterministic. You know, given certain data, what the page is going to look like. You can predict how it's going to behave and how things are going to work when they're put together. 

And if I had a million components here, it would behave the same, right? You wouldn't have any weird interconnections. One data rendered a million components. A million components could go back and edit the data. And so this is very nice. We're building composable, easily scalable web apps. 

You have one data source, the source of truth. That tells your components how to lay out the page, and the components will handle interaction. And if they want to change things, just go back and tell the data source to change. Make sense? So React is all about understanding how to build a component and how to make your component interact with the outside world. 

Making the component interact with the outside world uses another technology called Flux, which is a framework that is added on top of React. We're not going to talk about that. We're going to talk more about, given data, how can you render a component? 

And so React is really cool because you can use it with any back end you want. If you have like a Python back end, if your Python can spit out some data, React can render it. If you are no JS outputs of data, React renders it. Ruby rails up with data, React renders it. 

So React is basically a web view-- a front end with components for any data source whatsoever. And so going from data source to react components is pretty easy. Going the other way is a little harder. That uses Flux as I mentioned before. We won't get into that. We'll focus more on the data-to-component side. This way you can make cool, fun web apps. It won't affect the outside world for now, but that's another story. 

OK, so if you were here for my last seminar you'll know that all of the code for today's talk is going to be at this URL here, sorry, this URL here. And basically we're going to go through four steps, maybe five, probably not five. We'll move through four steps of building a sample React app. And so all the source code for every step of the way is going to be right here, so if you're following along at home, feel free to peruse this code. If you're following along here, we'll be showing it on the screen, so don't worry about it. But if you're at home, feel free to visit this website. And, Yeah, you should be able to get all the code you'd ever need here. So it's a good cheat sheet as well for your future adventures with React. Cool, so if everyone who's here, and even if you're at home, pull up this website, is.gd/cs50react, no capital, no underscore, no nothing. 

You'll see a page that looks a little bit like this. This is a thing called CodePen. CodePen is a collaborative coding environment with which I can write code here, and it'll be automatically sent to you. And to this way, I can write code. I can run code here. 

For example-- and if it reloads-- see, I'm running JavaScript code on the page right here, and it'll automatically render a web page with this JavaScript code. And so this is a way for us to try out code really quick without having to use our ID or use our local machine or whatever. It's a very quick way for you to mockup and test out different kinds of code. 

So I'm going to be taking example code, putting it here. We're going to be working through it. And if you're at home, you can pull this up as well. And I've already installed React here, so you can just write your own code here, and try it as your own playground. 

Yeah, if everyone to open up this link here. Please give me a thumbs up once you have it open. Cool, cool cool. There's nothing here for now, but we will change that very soon. 

OK, so React is a JavaScript library, and as such, requires knowledge of JavaScript, which is the web programming language. And it's being used for other things now too but primarily the web develop language, so if you are unfamiliar with that, read a site called JSforCats.com. It's wonderful. You can learn JavaScript in half an hour. It's incredible. 

So give it a read. We also is a lot of HTML here because we're designing web pages of course. So if you're unfamiliar with HTML, check out HTMLdog.com. I think learning React is a million times easier if you already know the building blocks. If you have the components, it's easy to make a bigger component. That's React language for you. 

So go ahead and give these things a read. Pause this video. Give it a read if you are at home if you are not familiar with HTML or JavaScript OK, so what we're going to do is we're going to make a very basic flashcard app using React. We're going to have a flashcard. You can flip the card back and forth. And we'll also have a list of all the cards that we have, and if we're feeling ambitious, we might be able to switch between cars by clicking on them. 

But this is, of your bare bones, a very simple React app. And so this is actually not trivial to implement, but we're going to show that, if you do this, it's very, very easy to extend it if other people help you with it. So we're going to go through four steps starting from scratch to build this. 

OK, so the four steps, we'll start off with the first step. The first step is going to be building your first component. As I said before, a component in React is just an HTML element on steroids. It specifies the HTML and some behavior, and it will specify how people can interact with it how it would have internal state. Like a button will know like how many times it's been clicked for example, and it will know how to lay itself out. 

So let's go ahead and build our first component using JavaScript. So if the syntax looks weird, that's because it kind of is. So, again, we're going to make a variable called app using the keyword let, which makes a variable, let App equal React.createClass. 

React is a library and has the create class function. And this function is a bit of code that you can use to create a new type of React component. And so React.createClass makes a component, and this component will be able to do stuff. The main thing it can do is render something, render as a function. 

Again, if this index is not obvious to you, I recommend you go on JS for cats and check it out. Is that zoomed in well enough? Cool. 

So every component needs to have a render function. The render function says, what do I print on the screen? But the component is useless if it doesn't know what to print on the screen, so you need to have a render function. 

So in the render thing, you just need to return some HTML. And what's cool is that there's a thing called JSX, which is a extension of JavaScript that is used by react. It let's you write HTML inside of your JavaScript, which sounds kind of weird when you first think about it, but it makes a lot of sense afterward. So we can do this. If you're familiar with HTML, I know we have a div with a general purpose container for stuff. We can return a div, and inside this div, we can put stuff. 

So let's say we want to render just a straight-up flashcard for now. The flashcard, I would say, will have a question and answer. So inside this div, let's print out a paragraph that says question-- What is the ultimate answer to life, the universe? And then the answer is going to be, of course, 42. 

That didn't come up well at all. Yeah, so basically you can really write HTML inside your JavaScript. And this is going to be printed out into the screen. So let's try it out. 

So we have our component. We need to tell React to put the component on the screen so React.render, so notice that we treat app like any other element. We write it as it was an HTML element. Like instead of saying like img for image or p for paragraph, you write App, so App is treated like an HTML element. As I said before, it's an element on steroids. 

So you render App, and you give it a place to put it. And this is how you can tell it where to put it. I have created a simple div on the page called with an ID of page, and that's where the element's going to go. 

And we're not going to run with HTML. Basically this is going to get put inside of this page element that we have on the screen. So it runs this code, and it draws this thing on the screen, so here we are. We have made our first React component. 

So just as a recap, we gently made a new type of component, right? That's what the React.createClass. And in that component, we told it what it should do. Whenever this component is to be printed onto the screen, it will print out the div with the two paragraphs inside of it. 

And what we did, we made a new app using the angle bracket app notation. We told it to put it inside the page element. And so what I did, it created a new app from that template. And then I told it to render it. So it said, OK, app, what should I print out? App says, go print out a div with two paragraphs inside of it. And voila, there's our div with two paragraphs inside of it. Make sense so far? 

So, again, the whole challenge of React is just knowing how to make components. How to make the components work together. Now that we've made our first component, let's go back and make components customizable. So you know how in HTML you can give your buttons classes? You can give your anchors the href. You can give your inputs a type, right? You can give more custom properties to all of your elements to make it more interesting. And we actually can do the exact same thing. 

So let's say we want our app to go render any card. Right now we just rendered a hardcoded card. We know there's only one card it can do, so we're going to try and change this now so that we can just give it some card. It'll print out the card. 

You ought to try and make your components a very general purpose. So this way I could email this my friend and be like, whatever flashcard you have, just feed it into here, and it'll do it by itself. You can put other things in your own app. 

But first, let's break this up into two components, but we want to separate the card printing part from the actual app part. So what we can do is we can change this from App to CardView, just a new name for the app, and we can make a new component called App, not to be confused with the old App. We've got the createClass, and like in HTML, you can nest React components inside of each other. 

So in this render function, function return CardView, and this is the exact same thing. See why it's the same thing? Instead of rendering just the app that has the div and pairing inside of it, the app renders the CardView, and the CardView renders the div and paragraph. So this is our first example of nesting elements inside of each other. Does that make sense? So, again, we have a CardView element. We have app elements that it's bigger than. 

OK, so we want our CardView-- if you give a good CardView a certain card, it'll print out for you, right? So first, we need to make a card, so let's make a card object. So let my card equal-- if you're all familiar, this is just the notation-making object in JavaScript. It's kind of like a struct in C, so we made a card, and so now we can pass this card as a property or as an attribute in HTML terminology to our app. So we can do this, App card equals myCard. 

You know how in input, you do input type equals text or button class equals btn for bootstrap,? Same idea, App card equals-- you've got to put braces here-- App card equals myCard, so this says we have this card object. I'm going to pass it as a property to the app component. And this app component will be able to access it and do interesting stuff with it. 

So our app is going to be given a card, so for now, let's have the app just give the card to the CardView itself because like the app is not going to know what to do with it, so we'll just give it to the CardView. So we'll pass it the same way, card equals, and so each component can access the things that has been given to it. They can access the properties that have been given to it using this syntax, this.props.card. 

So what happens here is you have the myCard object. You pass it into the app using App card equals myCard. That card object is given to your app. The app can access it as this.props.card. It's kind of like an image knows what it's source is. 

This app knows what it's card is, and it can do stuff with it. It can do computations. It can make decisions based off of it. 

For now, I was going to pass this.props.card onto the CardView. Make sense so far? It'll make more sense now. 

OK, so now we're at CardView. Our CardView, given the card, should print out its question and answer. Right now we just printed out some hardcoded questions and answers. We need to figure out-- we need to ask the card that they gave us what is the question and answer, and then print this out into the screen. 

So we can do this here. In render begin-- first do equals. So what we're doing here is we know that the cards are given us to a property, right? It's given to us as an input. Like it's almost like arguments to a function. The card is an argument almost to this CardView. 

We'll extract that, and put it into the variable question. Make sure the answer went to the variable answer. Prompts that card to answer. And now that we have these, instead of printing out that text, we're going to print out whatever they gave us. 

So this stuff-- so we're going to put out Question Answer. Let's see if this works. Cool, so let's step through it one more time just to be sure. 

So my card is card object, and we are giving that card to the app. And the app is going to take the card and give it to the CardView. And this CardView says, if you give me any flashcard object, I'll print out its question and its answer, right? 

So what I could do is I can send this code, the first like 10 lines of my code, to my friend. He could embed it in his own application. And as long as he did the same thing, like CardView card equals this, as long as he created the CardView and gave it the right information, he could render his own card. And so this way, it's a really cool way for you to build components that use each other, right? This card, I could publish this CardView on the internet, and people would be able to use it. So basically, it's like one of the standard functions in the C library. 

It is a function where someone has written it. You give a certain input. It'll produce a certain output. You don't care how it works internally. As long as you give it the right input, it'll make the right output. 

And a component can be thought of the same way. This CardView is like a library function. If you give it some card as a property, it'll print out the contents of that card. Like if I change my card to instead be like what is 5 plus 37, it will update accordingly. So just by changing the input, it gets a certain output. So you can think of components almost as functions in this way, which you can put together. You get input, like this CardView as the input, you get output. In this case, output is the HTML. Make sense so far? Cool, so again, properties are how you can pass information into and out of components. 

OK, so let's make this thing interactive. Right now it's kind of boring. What is [INAUDIBLE]? You can print some out, but that's all it can do. 

So let's go back to the old question just for now. OK, so right now these components are boring because all they do, they get input. They make output, right? That's kind of boring. We want to have our components to be able to have some kind of internal state, like remember something. 

For a flashcard, for example, what kind of state might you want to remember for a flashcard? What temporary status might you want to remember for a flashcard in a flashcard app? AUDIENCE: Whether it's been flipped? NEEL MEHTA: Yeah, right. So you might want to keep track of are you face up or are you face down on the card. On Facebook, for example, you would want to remember where in the news feed are you or like who's profile are you doing right now. 

On Messenger, like what text you type in the input box, right? If you refresh the page, it goes away. But you don't really care. It's just temporary. Yeah? 

AUDIENCE: [INAUDIBLE] NEEL MEHTA: Like a flash card, like you can be seeing the question side or the answer side? 

AUDIENCE: OK. 

NEEL MEHTA: Like a two-sided flashcard, right? Yeah, so you want to have this idea of now I have properties, which is like inputs, but state, which is temporary, uh, where you are on the page, right? Again, I said in Facebook Messenger, I have like which person you're viewing Facebook or who's profile, right? 

This is only temporary. It's important to show the user what's going on, but refresh the page. It doesn't really matter. So it's temporary state, so we all it state. 

So, again, there's state and props. Props is input given from your data source. State is just like defaults. It's just like stuff that makes the thing interactive. 

So in our CardView-- let's have our CardView-- so it was nice. What we're going to do here, we're going to touch CardView and only CardView. And so my friend who got this, they wouldn't notice any difference. They wouldn't have to change any of their own code, but they'd see their CardView got souped up. That's a nice part about components. 

OK, so in our CardView, let's try and keep track of whether we're phase up or face down. In React we do this by first specifying the initial state. Where does the card begin? 

So be a function called getInitialState function, and we return an object. This object contains some state, and a state is just a key-value pair. Like in instruct, you have a key and a value, you have like name is a string. 

In this case, let's say front is true. This says that we have a state. One component of the state is an attribute called front. [INAUDIBLE], so by default, we're in the front of the card, and we can change this as we flip the card. Make sense? 

OK, so in render, right now, we're showing the question and the answer. Now what we should do is show the question if we're on the front of the card so the answer is for the back of the card. That's why you all make the card interactive. So let's try and to this here. Well, first just make a variable. We can ask now this.state.front. We access state the same we access props, so this.state.front. 

If we're front, then text is this.props.card.question. If we're on the front of the card, we're going to try and grab the question from the card. Otherwise, if we're on the back of the card, what do we do? 

AUDIENCE: The answer? 

NEEL MEHTA: Yep, so text equals this.props.card.answer. But if you notice, we're using the state to make a decision because now the component will look different based off how these interact with it. So instead of printing out this, we'll just print out the text. Cool, so now, as you see, we see only the question. And if I change the state here manually to front is false we get 42 back. 

So, again, this component has its own state. Like a button knows whether it's been pressed or not, this thing knows what is on the front or on the back. By default, it's on the front. And then if it's on the front, we'll print out the question. If it's on the back, we'll print out the answer. So, again, the information given is the same. It just looks different based on how you program it. So, for example, Facebook Messenger, even if you get the same data source, it might look different because the state is different. You're looking at a different person's message. 

OK, so this is all well and good, but now what's actually make us able to change, whether our card is front or back. We can do this by adding a flip button, a button to the card that will flip the card if it's [INAUDIBLE]. So let's add a button here, this button, and this button will say flip. 

And so right now, it doesn't do anything. It just looks nice. What we can do is we can add a click handler, onClick equals this.flip, and we'll define flip later. But basically, onClick is a function that gets called when the user clicks it. 

So the button will know when it's been clicked. Went it's been clicked, it will flip the card. It's kind of like your pizza delivery guy. You're like, all right, whenever someone calls me, I'll deliver pizza, right? 

You register this listener. You listen for an event. You get called, and when the event happens, you do something. You get pizza. In this case, when you're clicked, you flip the card. 

And so we need to define a function that will flip the card, so we'll write that right here, flip function. And so what do you think flip will do? Again this gets called when we click the flip button. What should the function flip do? 

AUDIENCE: Change this.state.front from true to false, false to true. 

NEEL MEHTA: Yep, so take whatever this.front is-- the front state is. Take the front state, if it's true, make it false. If it's false, make it true, right? So let's try that. 

You can't change state just by doing this.state. You can't do this. You can't do that. You have to use a function called this.setState. 

So you can say this.setState front colon this where, again, the exclamation point means the opposite. I guess if this. state.front is true, it'll turn false. So we'll set the state from true to false. If it's false, we'll set it false to true. 

Just notice that we set and get slightly differently, and so let's try this. Bada bing, look at this. The flip button will now switch the front to back state. 

And so here's where you see a little bit of the magic of React. Like we never told it it to re-render. We never told it redraw anything. If you're doing this without React, you'd have to-- like when the flip button is clicked, you'd have to tell it to manually re-render, right? 

React is really cool in that if you give it a certain state and properties, it will always render the exact same thing. And so when we ever we change the state and the properties, react just re-renders the whole thing. It knows that there's a one-to-one correspondence between state and parameter and HTML. So whenever either of those changes by through a set state, it will change how the pay is re-rendered. And so basically React is like waiting for you to change. 

Whenever it changes something, it'll re-render the entire page. And if it sounds inefficient, it's because it would be, but react uses a thing called a Shadow DOM. Instead of drawing the page directly, it keeps the virtual HTML tree in memory. 

You know, HTML is like a tree, like a hierarchical data structure. It keeps a fake tree in memory, and whenever you update the page, it'll draw another fake tree, and it'll calculate what change it needs to make the page to make the two trees equal. So basically, it virtually re-renders a lot. And then it only like changes the page in little tweaks as needed, so it's very, very, very efficient. 

So basically React will whenever you change something, it'll re-render the page virtually. It'll figure out what do I need to change to make the real page reflect the virtual page, and it'll do that. That's the virtual DOM. It's one of the biggest features of React. 

Does that make sense? Any questions? Yeah? 

AUDIENCE: How does compare still to the MVC that we talked about before like resources. 

NEEL MEHTA: Yeah, the question is how does it compare to MVC? You asked about resources. Well, let's talk about how it functions. 

In MVC, you'd update the model. In this case we'd have a card model. The view would have the flip button, and the control would have the flip function. So the view would tell the controller to flip flip. Flip would tell the model to change, right? 

And so when you do an MVC, you listen for the model to change, and you re-render the view accordingly. Or you just have to like have the controller. Wait for the model to change, and then pick and choose a part of like a thing to change. Here we have one thing, but in a big app, you have to like remember what the change in every single place, so it's a little annoying. And so React is nice because it has a Shadow Dom. It can afford to just rewrite the entire thing. You don't have to selectively like guess what to update. 

On Facebook if you like get a new message, in MVC, you'd have to remember, OK, change the things at the top of the page, the message icon. Also pop a new window at the bottom. Also make a new thing in that window. Also play a sound. 

That's a lot of stuff going out at the same time. And so if you don't have a Shadow Dom, you'd have to do that manually because you can't get rid of the whole page. You can't afford to, so you have to change each thing manually, which is really annoying in MVC. 

So in order to be thrifty, they selectively update the page, which is efficient, but also annoying. In React, because of the Shadow Dom, you get both things for free. It's efficient because of the Shadow Dom. The bottleneck is updating the page. It's not doing the tree manipulation. You get the efficiency. You also get the ease of use because if you just rewrite the entire page, but you just know, all right, the things are going to be on the page somewhere. It might be in a different place, but it's going to be on the page, right? So you just re-rendered the entire thing virtually, and you might make a couple changes to the page itself. 

So, again, in MVC you would have to choose between ease of use and efficiency, and React, you get both. So it's better. Make sense? Solid. 

OK, so let's see let's talk a little bit about step 4, how we can embed components. So we have this right now. We have our cool little button. We can flip it back and forth, and that's all it does. Let's say we want to have another component. Let's say our flashcard app should contain a list of all the cards that you have, so that means we should have another component. Well, maybe call it a list view. Let's make a list view that coexists with the CardView, and this list view and CardView will like work together. And you can combine them to make our app for you. 

So first, let's make a couple more cards right. Let's say, what cards? And just so I don't have to bore you with typing it in, I'm just going to copy it from here. And so I'm going to not give it just one card. I'm going to give it an array of cards. So first the apps going to break for now. All right, so we're going to make this able to handle multiple cards. So first, we're going to give it, not just one card but an array of cards, like a list of cards. And in this case, we have three of them. 

All right, so so app is going to get a list cards, and it's going to decide which one to show to the CardView. The CardView can only render one card, but the app gets a list of all the cards, right? 

So when you figure out one card to give to CardView, how would you guess you might be able to make a decision about which card to show? To give you a hint, it's temporarily You'll be viewing a certain card. If you refresh the page, you'll just go back to the first card. That's OK because it's temporary. What technique might we use? 

AUDIENCE: You could make a variable so just like you had front. Is this true, you could have current card equals 1? 

NEEL MEHTA: Yeah, so we want to have state, right? You would use state in the component to figure out which card do we want to get. Like we have a list of all the cards, we'll use state to figure out one of the first card, second card, third card, and so on. 

So an app so an app will get a have the getInitialState function, getInitialState function return. And we'll just say activeIndex 0. So now our app has it's own state. 

And so now on render, to figure out a card, let's just go to the array and grab the thing at that index. Select card equal this.props.cards this.state.activeIndex. So as you see here, the props and the state actually work together. So now that we have our activeCard, we'll call it activeCard, and let's see if this works. [INAUDIBLE] 

Oh, that was a text error. Ah. 

Cool, yep, so now we were back to where we were before, right? Same old program except now we can support a list of cards, not just one card. And now, again, if we change the activeIndex, we can go from 0 to 1, and now that second card, and then we went to 0. So here's a new souped-up version of our. 

OK, so now let's have a list view that shows all the cards in your program, so we'll make a new component called listView. Let listView equals react.createClass. So we want to render an unordered list with a list item for every card. And so we have a bunch of cards. We want one list item for every card, right? We could do a for loop or something to make a new list item. But the way you do it in React, use a thing called map. Map is a tool or a function you use that for every item, runs some function, takes return value, and gives you that back. 

So as an example, we have the array 1, 2, 3.map function-- and this is shorthand for a function-- x arrow x times x. This says, for every number in 1, 2, 3 , take it. Square it, and give it back. So what do you think 1, 2, 3.map x goes to x times x gives you back given that this function is run on every element of that array. 

AUDIENCE: 1, 4 9? 

NEEL MEHTA: Yep, 1, 4, 9 because you do 1 times 1. That gives you one. That's the first element. 

2 times 2 is 4. That's a second element. 3 times 3 is 9. That's a third element. Make sense? So map has a technique you use in functional programmers, the new style of programming to do something to every element in your list. And so this sounds familiar. We have a list of cards. We want to get a list item for every one, so we'll just use map here. We'll say, let list equals this.props,cards,map. 

And so given a card, we're going to generate a list item with that card's contents side of it. Let's just say we want to give out the cards question so card.question. So this list contains an array of LI's or List Items where there's one list item for every card, and that contains the cards question. Make sense? 

Cool, so now let's actually print that out. So we will return a ul. Inside that unordered list, we'll just stick the entire list that they gave us. Cool. 

All right, so now this list view works just find. Any questions about the list view? You have a bunch of cards. You make a list item for every card. And you put them inside an unordered list, and you give it back. So now let's act so we embed this inside of our app, so we can do this, list view. What argument do we pass to list view? What properties do we give it? Remember, if you give it a bunch of cards, it'll make the list view for those cards. So what would we pass here as the argument? AUDIENCE: A list of cards? NEEL MEHTA: Yeah, so cards equals this.props.cards, right? And so the only problem is that you can only turned one top level element in render, so you've got to wrap it in a div. It's weird. So let's see if that. Does that work? 

Yep, there you go. So now we have a list of cards at the bottom, and then we have our CardView itself on top, and that will flip between the two sides of the card. Now does that make sense how I did that? Yeah, so again, we have two components. The first component prints out every card in the list. That's the list view. And the second component prints out just that card. If you give it a certain card, it'll print out information about that card and let you flip back and forth. 

So if we want, we can try and talk about adding some new features to this. Otherwise we can talk a bit more about of the velocity of reactor, or we can answer questions you might have because these are all of the core parts of react that I want to talk about. We can go ahead. We can answer questions. Whatever you want. 

AUDIENCE: Can you use JSX in normal JavaScript? Or is that something that came with the [INAUDIBLE]? 

NEEL MEHTA: The question is can you use JSX with normal JavaScript? The answer is yes. JSX is just a way of it takes your JavaScript that has HTML inside of it, and it compiles into JavaScript that does not have HTML inside of it. So notice that-- so notice here. This looks like you have like div and you have stuff inside of it. 

That compiles to JavaScript that like generates the same thing. I guess what I'm saying is that JSX is just a syntactic, like it's a preprocessor for JavaScript much like PHP is a preprocessor for HTML. JSC is a preprocessor for JavaScript that lets you put HTML inside of your JavaScript. And so if you have the right transformer which is a thing called [INAUDIBLE], which will transform. The right preprocessor, it'll let you do that. 

AUDIENCE: [INAUDIBLE] NEEL MEHTA: Usually you don't need to put HTML inside of JavaScript unless your doing React. But you can do it anyway. Yep? 

AUDIENCE: I think you had described React as a functional programing language. We've been learning C in CS50. Is C also a functional language? NEEL MEHTA: So the question is about functional versus another thing called imperative or procedural programming. There's two kinds of programs popular. One's called procedural, which is all about like doing commands, and one is functional, which is all about having functions and having input and output of those. React is a functional paradigm. C is a very procedural paradigm. 

And as an example, C for example, you don't do this declarative way of making the program, right? You have to say, print this. Change this data structure. Print this. It's all about commands. 

In React, there's not that many commands. It's all about having components you put together. They're like functions. You have like a function called CardView, which is a function that has input, output, and so React is all about this philosophy us of having-- you have data. You pass it through this algorithm, and it'll output HTML that you just printed the page, and so you have to build it piece by piece. 

So to draw a metaphor to what I said before, you know how on Facebook if you get a message, and you choose what parts to update, that's procedural. It's imperative, right? OK, I got a message. Let's change account there. 

Let's pop a window here. Let's change account there. Let's draw this here. That's a procedural approach. 

That's what things like Angular, Boost, Backbone, other frameworks use. React is functional. It's a very different way of thinking about things. It takes this idea of let's have functions or algorithms that will you give it data. It'll spit out what it should be, and the computer will take care of weighing out. You don't handle it yourself. Does that make a little bit of sense? Yeah? 

AUDIENCE: In a functional language, everything happens at once? 

NEEL MEHTA: No, things happen in order. Like here there's still order, but it doesn't happen in order of like commend, command, command. It happens in order of function gives you output. Put that into another function. Put that into another function, another function. 

If you do CS51, you'll learn functional programs a little out of the scope of this. But basically, what makes React cool is not only the one-way data flow and the virtual Dom, but also this idea of functional programming. And functional programming is very easy to compose and make cool stuff out of, and it's very easy to think about and reason about. So it's another good draw of React. Any more questions? Yeah? 

AUDIENCE: Um, why would you use let as opposed to var? 

NEEL MEHTA: So the question is why do you use let instead of var? This is a thing called ES6 or ECMAScript 6. It's the new version of JavaScript. There's a bunch of technical reasons, but let is a better version of var. 

It's how you declare variables. You can use let. You can use var. Let has a bunch of technical reasons-- you can look them up later-- for why it's better. Basically, ES6 has some nice new syntax, some new features on top of the old JavaScript. 

So we have like five minutes. I just wanted to talk about one more thing real fast. If you had any questions, let's talk about it after this. But just so this gets caught on camera, I just want to talk a bit about how you actually use React in your apps. 

If you go here, Facebook.GitHub.IO/react, this is the home page for React, and it'll show you how you actually use React in your pages. Basically, it's a little complicated trying to install React. It's not as easy as you just drag and drop a JavaScript in there. 

You have to have your transformer set up, which will, as it did before, turn your JSX into the normal JavaScript. You have to thing that'll compile you ES6 to normal. JavaScript there's a lot of moving parts you have to do, so there's a thing called Yeoman, Yeoman.io. And this is a command line tool that'll help you scaffold out your React projects easily. 

So you can read about this later, but there are some tools that Yeoman offers. They'll let you create a React app with everything built in. Like it'll have built in, components built in. It'll have your transformer built in. They have a lot of cool stuff built in automatically using these things called generators. 

So read about this if you like. Just go on Yeoman, Y-E-O-M-A-N, and you can find generators like these. And with generators like these, you just like one is a couple command line commands. It'll scaffold out an entire React app for you. It'll get all the manual piping, and grunt work done for you, and this is why you just focus on just writing in React. 

So basically building a React app is nontrivial. It's wired all together, but there are tools that'll do it for you. So if you want to make a React app, try doing it that way. If you just want to experiment, you can try using this CodePen because this CodePen has all the react wiring. I've done all the work for you already. 

So if you want to make like a production to release React app, try one of these generators. If you just want to play around, it's often worth just like try playing around on CodePen here. Sound good? Cool. 

So that's all I have. Again, all the code and examples are going to be on this website here. So, again, we didn't talk about much syntax of React, but to find all those little syntactical details, it's all going to be available on this website here. 

So I'd recommend like take the first step. Put it into your CodePen. Try working on making it to the second step. There's a fourth step, and just see where you get from that. 

Any more questions, check out that page or email me. That's my email. But I'd love to help you with any questions you might have about React. So, yep, that's all I have. Thank you all very much for watching or for attending. And I'll take any questions you might have after this now. So thank you all for watching.