Basic React Concepts & Syntax

0:05Hi, everyone. It's Shaun Wassell here. You know, it's hard to think of anything that's had a bigger impact on the web development world in the past decade or so than React. And that's what we're going to be taking our first look at here today. So React is a very popular front-end library that was created by Facebook some years ago. And from there, it's been open sourced and gone on to become the most popular front-end library in the world. So what we're going to be covering here today, we're going to be taking a look at some of the main benefits that React provides us with.

0:36It's going to answer the question of why we would want to use it in the first place. And we're also going to be creating and running our first React project, learning about project structure, and learning about something called React components and seeing how they work. So that's a lot to cover. Let's get started.

0:00[MUSIC PLAYING] So let's talk about some of the main benefits of React. The main benefits of React come down really to two concepts that we're going to talk about here. And those are reusable components and efficient rerendering. So let's start off by talking about reusable components.

0:30And to start this off, let's imagine that we want to create a blog site with-- I don't know-- let's say, 100 pages. So our blog site is going to have, of course, a home page like that. It's going to have probably an about page, and it's going to have lots, and lots, and lots of blog pages. I'm just going to draw those like this here. And the problem with this, if we were to write all of our site in just plain HTML and CSS, is that, when we get to all of these blog pages-- remember that we could have 100 or 1,000, or 10,000, or 100,000-- we could have an awful lot of blog pages, for instance, medium.com.

1:17And if we were to write this in HTML, we would have to actually have a separate HTML file for each and every one of those pages. So the problem with that, of course, is that these pages are going to have a lot of things that they have in common. For instance, it'll probably have some cool header photo that shows a landscape or something just to attract the reader's attention. And it'll probably also have something like subscribe form. And it may well show that subscribe form several times in the page if it's like most blogs.

1:52Now, imagine this HTML page-- it's all written out in HTML and duplicated over, let's say-- let's just keep the numbers small, 100 pages. OK. If we wanted to make a change to how our blog pages look, what we would have to do in that case is go through all 100 or 1,000 or 10,000 et cetera pages of our site and copy and paste whatever code, whatever changes it was that we wanted to make.

2:23So in other words, we'd have to make the same exact change about 10,000, as many times as pages that we have. Now if that sounds unpleasant, it is. And that's why libraries like React have come along with a better way. So the way that React would handle this situation is a little bit different. Instead of having an actual HTML file for each and every blog page in our application, what React does through reusable components is, it allows us to abstract out things that are similar in our site.

2:59So if all of our blog pages in our site are pretty much the same, then what we can do is we can actually create a blog page component. So this thing here would just be a component. And we would be able to render it 100, 1,000, 10,000 different times with different data. So this would be our first component. Inside this blog page, let's say that we want to display the subscribe form several times on our site. So in addition to having it on our blog page, might also want to have it in our about page, for example.

3:35What we would do is, we would simply create a subscribed form component. And we would simply include that once inside our blog page component and once inside our about page component. So in other words, now, when we want to make a change to all of the blog pages in our site, what we can do is we can simply-- let's say that we want to do something like change the text inside our subscribe form or change the information that we gather from our readers.

4:06Well, what we could do is simply make one change to that component, and it would automatically be reflected across all of the pages in our application. Now, if this sounds a lot easier to work with than basic HTML, then that's because it is. And that's why reusable components form a very large part of not only React, but also pretty much all front-end libraries in use today, such as Vue and Angular and Svelte and all those other ones out there. So that's the basic concept of reusable components.

4:38We're going to be seeing how to work with components in React a little later on and just some of the things they allow us to do. But let's move on first to talk about the second main benefit of React, and that is efficient rerendering. Now before we get to efficient rerendering, let's talk about rendering in React first of all. In React, as you're going to see, we use a special syntax called JSX, which looks an awful lot like HTML. So you might have divs like that with some kind of text in the middle and a closing tag like that.

5:10So if you've ever worked with HTML, working with JSX is going to be pretty simple. We'll talk more about that later on. But essentially, what React needs to do, in order for the users of our application to actually be able to visit our site and see what our site looks like is, React has to take this JSX, which the browser has no idea what to do with and transform it into actual HTML. Now, these two things look pretty similar right now just on this drawing, but they're really very different things as you'll see later on.

5:48So that's what rendering is-- when React takes all of the components, all of the React code that we've written and generates HTML, which can be displayed in a web browser. Now, here's where rerendering comes in. Let's say that we've created some kind of application. Maybe it's a basic to-do list application. I'm just going to draw that here. So it might have a text input and a button here that allows the user to create new to-dos. They can Enter, Go to the Grocery Store, hit the button, and it will create new to-dos in the list, which is going to be down here.

6:24So let's imagine that we have a list here of different elements, each of which contains data about one to-do. So go to the grocery store. This could be learn about React-- whatever's on your to-do list. So let's say that we have this rendered to-do screen. This is all HTML elements. There's probably a div surrounding this whole thing. Each of these is probably its own div. You have button elements, input elements, et cetera.

6:55Now, let's say that the data changes somehow. Maybe the user clicks this button and creates a new to-do. Maybe each of these to-dos has a button that allows you to remove the to-do, and the user clicks one of those and removes one. Well, in that case, we need to change the HTML that the user is seeing. We need to basically remove one of these to-dos or add a new to-do in the HTML. Now, if you were going to do this with vanilla JavaScript-- and by vanilla JavaScript, I just mean JavaScript without any kind of libraries or frameworks.

7:27If you were going to do that using vanilla JavaScript, what you would have to actually do is write code to specifically remove one of these elements. So you'd have to find an element by ID, or class, or order, something like that, and remove it from the DOM. Or if you were adding an element, you would have to actually find this container element around our to-do items and add a new one in there. Now, that might not sound too bad in the context of this simple to-do list application that we're talking about. But once you start getting into more complex applications-- imagine even something like Trello where it's a board and things are moving around, and other people are editing it at the same time.

8:07In situations like that, it gets tremendously complicated to make sure that what the user is seeing is actually representative of the data behind the scenes. So that's what efficient rerendering is all about. When the data of our application changes, when the user deletes a to-do in this application or moves cards around on a Kanban board, what they see after that has to reflect the new data. So that's just plain old rerendering-- making sure that the DOM that the user is looking at reflects the data behind the scenes.

8:41Efficient rerendering this one step further. So again, let's imagine that we have this to-do list, and one of these items changes. Maybe a user marks a to-do as complete, adds one, et cetera. What other libraries, such as Angular, might do in this situation is simply rerender the entire app. So this whole thing would have to be rerendered from scratch. And basically, all of these things would be removed. And then it would go in and insert all of these elements into the DOM again.

9:16Now, that's not particularly efficient, and it's also not necessary. Because, in our case here, if only one of our to-dos is changing, we shouldn't have to rerender the entire app. If this to-do is the only one that's marked as complete, let's say-- if the user clicks the button-- then why do we have to rerender these other to-dos? They're just going to look the same. Why do we have to remove them from the DOM and then put them back in? Now, that's where React comes in. And React has some special algorithms for doing this in a very efficient way and only rerendering the things that need to be rerendered on the page.

9:53Now, again, in much larger applications or more complex applications, this can end up really improving performance if done correctly. Now, optimizing for this stuff is something we're going to talk about much later. But for now, just realize that this efficient rerendering thing that we've talked about here is a major benefit of working with React. And those are really be two main benefits of React. One is reusable components, and the other was efficient rerendering. I hope this has been informative for you, and I'd like to thank you for viewing.

0:00[MUSIC PLAYING] All right, so the first thing that we're going to take a look at here is how to actually create a new React project. Now, in general, the way that we create new React projects isn't by creating each of the files one-by-one and setting it up manually, we actually usually use something called Create React App to do this for us.

0:30OK, so the name of Create React App should be pretty self-explanatory, right? It's basically a script that we can run from the command line that will automatically generate all of the files and boilerplate code for us. So before we actually see how to use Create React App to get our first React app up and running, you're going to want to make sure that you have the right software installed on your computer. So mainly, we need two things. And they're both installed simultaneously. The first thing is node. And you can check the version of that by typing node-v in your terminal.

1:05And the other thing is NPM, which usually comes packaged with nodes. So you we don't usually have to worry about packaging it separately. So what you should see is a version pretty similar to mine, right? You'll want to have at least version 14 point something of node and version 6 point something of npm. In general, the closer you are to the versions that I have, or better yet, you have versions that are higher than mine, the better. Now, if you don't have node or npm installed, if you get some kind of error when you run these two commands, or if your versions are a little out of date, what you're going to want to do is actually head over to nodejs.org and install these things.

1:46Now, you're going to want to install the long-term support version here. Of course, if you're feeling adventurous, you can always install the current version, which has all the latest features. But I generally recommend people use the long-term support version. So what you're going to want to do is just download that, run the installer. It takes all of 10 to 15 seconds to install. And once you've done that, continue on with the course. So now that we've made sure we have the right versions of node and npm installed, the next thing we're going to want to do is actually create our React app using Create React App.

2:22So the way we do that is first you're going to want to change directories into the directory where you normally keep all of your projects. For my own React projects, I just have a directory called React. And once you're inside of there, we're going to generate our project by typing the command npx create-react-app, and then the name of the project you want to create. So we'll just call ours my first react app for now.

2:52And before we move on, it's important to know that the default package manager for create React app projects is actually YARN. Now, YARN is mainly packaged with Create React App because Facebook created YARN. And the alternative, which many people, including myself prefer is NPM. Now, again, since I prefer to use NPM that's what we're going to do here. But we do have to add a little flag to this script we're running here to make sure that it uses that instead of YARN.

3:24And that is we simply have to say --use-npm. And then we're going to hit Enter, which will create our project for us And there we go. So once Create React App has finished running, our new app is ready to go. So what we're going to do is we're just going to change directories into the new app directory we created, which is going to have the same name as what we typed after the script. So we're going to say CD, my first React app and hit Enter.

3:55And then we're going to jump right into running our app just to see what it looks like. And the way that you do that is, again, inside the directory, we're going to run the script npm run start, and hit Enter. And that will open up our app in localhost 3000 on our computer. OK, so you can see that it has this cool little spinning React logo thing. It's got some text underneath it. And it's got a link to learn React, which basically it takes you to React's documentation site.

4:25And that's how you create and run a new React app using create React app. I hope this has been informative for you, and I'd like to thank you for viewing.

0:00[MUSIC PLAYING] OK. So now that we have learned how to create a React app and actually run it, let's take a closer look at all of the files that Create React App has actually generated for us. So what we're going to do is stop our app for now. And we're going to open up this file in our IDE. So if you're using Visual Studio Code like I am-- and I would highly recommend it.

0:34Although if you have your own preferences, that's fine too. If you're using Visual Studio Code, what you can do is if you're inside your terminal in the directory, you can simply type code and then dot and hit Enter, and that will open that up for you. And that's what I'm going to do, because that's much easier to do. So once we've done that, you should be able to go over to the file tree here and see all of the different files that Create React App has set up for us. And just by looking at how many files there are here, it becomes a little more clear why it is that we use a React boilerplate generator in the first place, instead of just setting up all of the files and the project for ourselves.

1:13Now, what I want to do here is actually take a look at some of the files that it's generated for us, just to kind of give us an idea of how the project is organized. So first of all, out here in the main directory, we just have some of the files that you'll find in your average JavaScript project. We have the package.json file, which just contains a lot of configuration for our project, right? It's got the name of our project, some versioning, whether or not it's private on the NPM directory.

1:43And it also has a list of dependencies, scripts, browser compatibility, lots of stuff that we'll be using later on. Now besides that, we also have this packagelock.json file. This is just a more detailed version of our package.json file. It basically just contains the exact versions of all of our dependencies' dependencies. OK. And besides that, we have the gitignore file, which just contains all of the files that we don't want to commit to GitHub. And we also have a readme, which contains some instructions.

2:17It tells us what commands we can run in order to do certain things inside the React app we've generated. OK. Now, besides those things, we also have this public directory. The public directory contains a lot of the static files that are going to be loaded by our React app-- things like images. And it also has this index.html file, which our React is rendered inside. We'll talk about how that works and some of the implications of that in much more detail later on. OK. So that's the public folder.

2:47The one that we're most interested in our React project is this source directory. The source directory basically contains all of the React code that we care about. So just to go through this in order, if you will, we have our App.js and App.css files. Now, the App.js contains the top-level component of our React application. React applications are organized into these reusable components that we can configure in different ways, and the App component is basically the top-level one that contains all the other components in our application.

3:24We'll see how this is used a little later on. And one other thing that you can see in this component is, remember the app that we ran inside our browser, right? Which if you haven't hit Refresh in your browser, it's probably still up, even though the React app isn't running in the background. If you take a look at the code inside our App.js file, you'll see that it has this message Edit src/App.js and save to reload. You see that that's right there. You see that we have this Learn React thing.

3:54That's what this is right here. So essentially, inside this HTML-like syntax-- and I say HTML-like because it's not actually HTML, as we'll talk about shortly. Inside this HTML-like syntax, we have all of the contents that we're currently seeing in our browser. Now, just to take this one step further, if you want, what you can do is actually run the app again with npm run start. And if you go back to App.js now and make some changes to the code-- maybe if we say-- maybe instead of Edit src/App.js and save to reload, we could say something like, This is amazing!

4:32I'm learning React! OK. And if we save our file, what we're actually going to see is that without even refreshing the page, when we go back to it, it's already rendered and displayed the new text. Now, this is something called hot reloading in React, and it's a very important part of modern web development. Essentially what the dev server in the background-- that's basically a very simple server that's running and serving all of our React files so that we can access them in a browser.

5:04What the dev server does is it senses whenever we make changes to our files, and it will automatically update that, and those changes will be reflected in the browser, without having to refresh. Now, there are some times when you have to refresh. But in general, it will handle that for you. OK, so that's our App component. And again, we'll be going into much more detail about all of this stuff and how it works later on. So don't worry about all this funny syntax and how that works right now. Another thing to notice is that there's also App.css.

5:36This basically contains all of the styles for our App component. And there's this App.test.js file, which contains all of the tests for our App component. All right, so you can tell pretty much by the naming schemes of the files how it is that they relate to some of the other files, right? So all of our App files here are related to one another. So next up, we have the index.css file. This just contains the global styles for our application. So just like how App.css contains only the styles for our App component, index.css contains things that will be applied globally throughout our application.

6:17Under that, we have index.js. Now, this is what's called the entry point of our React application. Basically, this ReactDOM.render call is what will eventually take all of the React code that we've written and render it into the browser. So basically, it'll take all of our components that we've created and basically transform that into HTML, which will be inserted into the page. Again, we're going to see this in much more detail later on.

6:47So don't worry too much about it. Just know that this is the entry point file. OK. So that's the index.js. Next up, we just have logo.svg. That's just the spinning React logo that we have right here. Under that, we have reportWebVitals. This is just for basically monitoring our application in production. So don't worry too much about that. We're not really going to use that at all. And after that, we have setupTests, which just contains some imports if we need to add certain things to our testing flow, right?

7:19If we need to install packages like Jest, for example, which we'll talk about later on. So that's pretty much all the files that Create React App has generated for us. Hopefully, that's helped you to start understanding what all of these files mean and how they relate to the overall React project that we're working on. Well, I hope this has been informative for you, and I'd like to thank you for viewing.

0:00[MUSIC PLAYING] All right, so the next thing that we're going to do is go a little bit deeper with React. And instead of just playing around with the basic boilerplate code that they've given us, we're actually going to start working on her own project, which will give us some really nice hands-on experience with all of the nitty-gritty details of React, the basic syntax, et cetera.

0:31So, let me just, first of all, discuss the app that we're going to be building. I've already built it, so I've got it running in my browser here. And the app that we're going to be building is basically going to be a friend tracker app. In fact, that's what I've called it up here. And what it's going to allow users to do is basically keep track of their friends, right? Keep track of which ones are their favorites. It'll allow them to add and remove friends from their favorites. It'll allow them to edit their friends' information, right? So adding notes about them, changing their age, editing their birthday, that kind of thing.

1:04It'll allow them to edit those things and save them. It will also allow them to add new friends to their application, just by entering all of those things into a form. And finally, it will allow them to view and edit their own information, and add things like interests, their own birthday, bio, et cetera. So that's the basic friend tracker app that we're going to be working on here. It's got lots of good concepts in it that will allow you to really get a feel for how React works, and how to think in React.

1:35So without further ado, let's get started creating this thing. Now, we could just use the basic app that we created here. And really, all we would have to do is change the name. But in order to get more experience with creating React apps, so that your fingers just get used to typing out npx create-react-app, why don't we just create a new app for this one? So, let's change directories back into where we keep all of our projects. Again, for me, that's React. For you, that might be documents or repos or something like that.

2:06And inside here, we're going to run that command again. We're going to say npx create-react-app. And let's call this app friends-tracker. Oops, I guess I made it singular there. So let's make it friend-tracker. And after that, again, we're going to use --use-npm flag. And we'll hit Enter. And that will generate our project for us. And there we go.

2:36We have our new project created. So let's change directories into that new project. So we'll say cd friend-tracker, and then we're going to open that up in our IDE. Again, with VSCode, you can usually do that by typing code and then dot. If not, just do Control O, and open it that way, whatever you're comfortable with. So let's open this one up. And we're going to see that it's got exactly the same files as our previous app had. All right? So it's got the public folder. It's got the source directory, which we're going to be writing all of our code inside of.

3:10And it's also got, gitignore, package-lock.json, package.json, README, all that good stuff. So let's get started creating our app. What we're going to do here is take a closer look at this funny looking HTML like syntax that React uses. Now, first of all, this is called JSX. It's just a fancy name for basically HTML code that you can write inside JavaScript files. Now, the purpose of JSX is to make it easier for us to structure our applications visually, right?

3:44So just like how HTML allows us to very quickly see the basic structure of a page, JSX basically builds on top of that, and allows us to use this inside our JavaScript files. So first of all, what we're going to do is delete a lot of the basic code that the React boilerplate generator has given us since we don't really need it anymore. So what we're going to do here is delete this JSX inside of here. Don't worry. We'll be writing some a little later on. And I'm just going to adjust the indentation here since React automatically does it with two spaces, and I tend to prefer four.

4:23So we're going to delete all that JSX. We're going to delete this import logo from logo SVG up here since we don't need that either. And the next thing we're going to do is actually write some basic JSX that will be the start of our friend tracker application. So the first thing we're going to do is display our own profile on the page, right? Remember how it had our picture? It had our name. It had our age, et cetera. We're just going to display that inside this app component, which, remember, is the top level component in a React application.

4:56So here's what this is going to look like. And this is going to be mostly basic HTML that you've seen, even though, technically, JSX is not HTML. So first of all, we're going to wrap everything inside of a DIV. Inside here, we're going to have an h1 heading. That's going to be the main heading of our application. So we'll say Friend Tracker. Under that, we're going to have a DIV, which will contain all of our profile information. So first thing, it's going to have our profile image.

5:29And in JSX, use the same exact tag as in HTML. It is the image tag. And the attributes here are actually going to look a little different than what you might be used to seeing in HTML. OK? So this is where HTML and JSX start to diverge a little bit. We're going to say source equals, but instead of actually writing an entire URL inside double quotes like you would in HTML, what we're going to do is use curly braces. And we're going to say process.env.PUBLIC_URL.

6:03That PUBLIC URL is all in caps. And we're going to say plus. And then inside a string there, we're going say /my-profile-pic.png. OK, now, this here is going to be a picture that we add to our application in just a minute. But first, let's discuss this basic syntax here. What curly braces do when you see them in JSX is allow us to execute a JavaScript expression inside of them. OK? So whereas with basic HTML, you're usually limited to just writing text content.

6:38With JSX, you can actually execute a JavaScript inside the JSX statements. So what this process.env.PUBLIC_URL thing is, is it's just the URL of our dev server that's running and allowing us to access our app inside the browser. And then, of course, we're putting /my-profile-pic.png on the end. That's the name of the picture we're going to be using just for our own testing purposes here. OK? So we've got that source attribute all written out.

7:10The next thing we're going to do is add some alt text. This is good for accessibility. For this one, we're just going to put Shaun smiling, right? That'll be read out as picture of Shaun smiling. And then, we're going to say height equals 200. And that's it for our image. So underneath that, the next thing we're going to do is have an h2 heading, which will say my profile. Under that, we're going to have all of the different pieces of information about ourselves, so our name, age, bio, birthday, et cetera.

7:45So let's put that like this. We're going to say h3 heading, Name. Underneath that, we'll have a paragraph with my actual name. And please, as you're following along, feel free to use your own name. That would be a little weird if you used my name, I feel like. So feel free to use your own name. All right? So we have Name. Next up, let's do h3. We're going to do Age. Under that, we'll put 100, right? That's the age I feel some days.

8:15And after, that we'll put Bio. So we'll say h3, Bio. And we'll just write a short little biography here. We'll say I like to program. I also like food. That's my bio. Feel free to write your own. Under that, we're going to have birthday. And we'll put something like March 1. It's not my real birthday, but it's close enough.

8:45And finally, we're going to have Interests. And this is going to be a little different than the other pieces of our user interface here. Basically, this is just going to be an unordered list. So we'll make UL tags there. And inside there, we'll have li. And I'm just going to list out some of my interests here. Obviously, programming is one of them. And what else? Data science, I'm into. I like gardening as well. And I'm also a fan of foreign languages.

9:16So we'll put that in here. Feel free to put whatever your interests are here. OK, and that's pretty much it for our profile page. So let's open up our terminal here and run our application. And take a look at what we wrote here. Oops. It looks like I left my completed application running on another port. So what I'm going to do is go over here and stop it from running.

9:47And then I'll go back here. Say no, and try running it again. You can always say yes there. And what it'll do is just run it on local host 3001 instead of local host 3000. OK? So here is our application that we just wrote out in JSX. We can see that it's got our h1 heading here. You can basically see a one to one correspondence between everything we just wrote and everything that's getting displayed in the browser. The one thing we're missing is this picture.

10:17So let's go and add that to our application. So the way we're going to do that is actually add that to our public folder. And what I'm going to do for that is right-click on this. Say reveal in finder. And what that'll do is bring it over here. And I'm just going to drag a picture that I already have from my completed application into the public folder. So I'm just going to copy this here. Go into Public and Friend Tracker and paste it. And that should work out nicely.

10:49So let's close these. Go back to our application. And we should see that the image is now being rendered very nicely. And again, feel free to use a picture of yourself here instead of the picture of me. But I mean, if you insist on doing that, you can probably find a good picture of me on LinkedIn or GitHub. But again, that would be a little weird. So I recommend you use your own. So anyway, that's how to write some basic JSX and render a basic profile page using React. I hope this has been informative for you. And I'd like to thank you for viewing.

0:00[MUSIC PLAYING] OK, so at this point, we've seen how to write some JSX and render it into the user's browser. But at this point, our app still isn't really any better than just writing out a basic static HTML page, right? Basically all of our content is still just plain text that we've explicitly hardcoded into our JSX.

0:36So what we're going to do here is take a look at how to actually insert the values of variables in our programs into our JSX which will be a really big step toward actually being able to use React for useful purposes. So what we're going to do here is, instead of explicitly putting all of our profile information like our name, our age, our bio et cetera, directly into the JSX, we're going to instead define those things as variables and then see what JSX's syntax is for inserting those things into our page.

1:11And just to give you a little bit of a hint before we do this, if you take a look at this source attribute that we defined for the image, that's more or less where we're going to go with this. You'll see what I mean in a minute. So to start off here, above where we say return and all of this JSX, what we're going to do is define some profile data for ourselves. And again, I'm going to use my own data. You should feel free to use your own name, age, bio interests, et cetera. So inside here, let's say const my profile data equals.

1:46And we're just going to define a basic JavaScript Object here with several different properties, basically all of the properties that were displaying down below. So we're going to say for instance, name. I'm going to put Shaun Wassell profile pic URL. And that's going to be the same thing that we have down here, except what we're going to do is actually use a template string to insert the value of process.end, there we go, process.end.publicurl.

2:22And that again is the URL that goes to the public directory wherever our React app is running. And then we're just going to say -my profile pic.png. If your photo is named something different, you're obviously going to want to make that a different string, OK? So from then on, it's pretty simple. We're going to put our age. We're going to put bio. I like to program. I also like food.

2:53Under that, we're going to put our birthday, which is going to be March 1st. And then we're going to have our interests which is going to be an array instead of just a basic string. And we're going to see later on how to actually take an array and create new elements in our JSX for each of the elements in that array. But for now, we're just going to say interests. And we'll put programming, data science, gardening, and foreign languages, OK.

3:33So now that we have all of our profile data defined in an object like this, what we're going to do is actually go through our JSX and insert the values of each of these things where they belong. So we're going to start off here with our name, age, bio, birthday, et cetera. And we're going to leave the image because that one's a little more involved, not too much though. So let's start off with our name. Now, the way that we insert the values of variables into our JSX, we can't just directly name the variable or the value that we want to insert, right?

4:07We can't just say my profile data dot name, for example. Because what React will think is that we want to actually insert, literally this string, my profile data dot name into the page. And that's obviously not what we want to do. So what we need to do instead is, whenever we have a JavaScript expression-- and I said this earlier, I mentioned it-- whenever we have a JavaScript expression and we want to insert the value of it into our JSX somewhere, we just need to wrap that in single curly braces.

4:41So this is how we would insert my profile data name-- which again, we defined up here-- into our JSX. So again, what React will do when it gets here, it will actually evaluate this expression and render the value of it-- in that case, it's going to be Shaun Wassell-- into that spot in the page. So let's do the same thing with the age. We're going to say my profile data.age.

5:12OK, same thing for the bio, we're going to say my profile data.bio. And for the birthday, we're going to say my profile data.birthday. And that's about it for now. Let's go back up to the image and actually insert it there. So we're going to start off with the source. And when we're passing values from JavaScript expressions to attributes as we are here with source, it's pretty much the same thing that we're doing, right? Instead of putting double quotation marks as we are with the Alt text or height, we're actually just going to say the expression that we want to insert the value of, right?

5:53So for source here, we're going to say my profile data.profile pic url. And then we're going to replace the Alt text here with something different as well, right? Instead of just hard coding Shaun smiling, and we're just going to assume that everyone is always going to be smiling in this picture here for our Alt text. What we're going to do instead is we're going to use curly braces. And we're going to say template string, my profile data.name.

6:27And then we're going to say smiling. So notice what we had to do there, right? We had to have the outer pair of curly braces in order for us to specify a template string in React. We can't just substitute back ticks for the double quotes. That's not the correct syntax. So what we had to do was we had to have an outer pair of curly braces to start the template string. And then inside that template string, we had to use the template string syntax for inserting a value where we said, my profile data.name and then the literal string, smiling.

7:04So that's a syntax that can confuse people some of the time. Just keep in mind that there's two separate things going on there. One is inserting the value into JSX, the other is inserting the value into a template string, OK. So that's pretty much all we need for our image. The last thing we're going to look at here is the interests. And for the interests, for now, what we're going to do is instead of actually displaying multiple elements, one for each element of the array that we want to display, we're just going to take the array up here in my profile data and join it all together into a comma separated string, all right.

7:43That's a little lamer than maybe you were hoping. But for now, it will be just fine. And we'll see how to display lists of elements later on. So let's delete this unordered list. And we're just going to replace this with a paragraph. And again, what we want to do here is insert the value of a JavaScript expression. So what we can do is just put two curly braces and directly just say, my profile data.interests.join.

8:16And then we're going to join them together with a comma and a space. So this is just a basic JavaScript expression that we were able to insert directly into our JSX. And as we're going to see, that we'll evaluate to a comma separated string. All right, and that should be all we really need to do. Let's take a look at this in our browser now and just make sure your app is running so that you see all the updates. And we're going to go over here, and we're going to see that pretty much nothing else has changed because for the most part, we use the same data.

8:47But the one thing that has changed is our interests. Instead of the unordered list that we had before, it's now just a comma separated string that was inserted into the page. So that's how we insert values into JSX. I hope this has been informative for you. And I'd like to thank you for viewing.

0:00[MUSIC PLAYING] OK, so at this point, we know how to write basic JSX in our components. And we also know how to insert the values of JavaScript variables into our JSX. The next thing that we want to do, though, is be able to actually write multiple components in our application, each of which we'll be able to reuse when we actually need to.

0:33So to be a little more specific about what we're going to try and do here, this basic DOM structure that we've created right here in our JSX could be reused if we wanted to. It would be nice to be able to display this exact same structure, with the image, and the name, and the age, and the bio, and the birthday, and the interests, et cetera. It'd be nice to be able to display that several times in our site with different user information. I mean, it would be nice to be able to not have to write this out again every time we want to display a different person other than the person that we've defined in this profile data here.

1:12So that's where the concept of reusable components comes in. And we're not going to make our components reusable yet. What we're going to do here is simply see how to create our own React components and display them inside other components. So with the JSX that we've written here, a name that would make sense for this if we were going to create a component for it, which we are, would be something like "profile info." Now, the way that we create components in React, it's actually very simple.

1:45They're just files, just basic JavaScript files. And the name that we give them usually is just the name of the component. So with our app component, the name of the file was "app," and the name of the component here was "app." Pretty straightforward. So let's create our profile info component that will basically allow us to reuse and re-render all of this JSX whenever we need it. So we're going to say ProfileInfo.js and hit Enter.

2:16And inside here is where we're going to create our new component. Now, you may have noticed in the App.js component that components in React are just functions that return some sort of JSX. And this is the JSX that will be rendered in the component's place when React actually renders this component. So for our profile info, all we really need to do is create a function here, which we'll call ProfileInfo.

2:48And we're just going to have this return the same JSX that we defined inside our app component. So we're just going to take all of this here, and we're going to cut that out and put it in our profile info component. So we don't even need that return statement, either. So we have our profile info component now. So in order to actually render this inside our app component, all we need to do is export it.

3:20So we're going to say export function profile info. And it's got our profile data defined here, it's returning some JSX. So let's go into our app component now and import this. We're going to say import profile info from profile info. And then the way that we display one component inside another component in React is going to look something like this. We're going to say Return, and then we're going to use JSX. But instead of using the regular elements that JSX borrows from HTML like div, image, anchor, et cetera, we're going to use the name of the component that we just imported in the JSX.

4:03So we're going to say ProfileInfo. And then you can either have an opening tag and closing tag and not put anything in the middle, or you can just have a single tag like that. OK. And what this does is it tells our app component that we want it to display the profile info component. Now, obviously, we might want to have more things there, right? We might want to have our Friend Tracker heading, for instance. So we might say Friend Tracker, like that.

4:37And for reasons that I'll discuss a little later, we do have to wrap these two elements inside a div. Just put those two in a div. Don't worry about why for now. And we're going to go into our ProfileInfo and remove our Friend Tracker heading from there. And we also don't need this surrounding div here. So the only thing that we want to have inside our profile info component is the reusable code, right? Things that we might want to render in multiple places in our application.

5:10So now that we've gotten it down to that, and we're displaying Friend Tracker here as well, we might want to also rephrase. And we're displaying Friend Tracker here, and we're displaying the heading here as well. Let's take another look at our application. And we're going to see that it looks pretty much the same as it did before, except now all of our ProfileInfo logic is in its own component. So we've seen how to make our JSX a little more modular and move it into its own component.

5:41Two more things we're going to do here. Just to get a little more practice with JSX and creating our own components, we're going to create another component. But first, what we're going to do is actually move this profile data that we've defined here into its own file. This will just make it easier later on, when we want to actually import this data into multiple components. So inside our source directory here, let's create a new file, and we're going to call this file Data.js. And we're just going to cut myProfileData out of that component and paste it inside Data.js.

6:17OK. So let's remove that spacing there. And we're also going to export it from the data file, so that we can import it in our component. So let's say import myProfileData from data. And that's all there is to it. So now just to get a little more practice with creating components, let's create a sort of welcome message component. It'll just be a big welcome message that says "welcome" to the user. So let's create a new component for that and we're going to call it WelcomeMessage.js.

6:55And one thing to note about components is that since they are just functions, we can really use any kind of function syntax we want, right? We're not limited to just using the function keyword, like app happened to do. We can also use arrow function syntax if we want to. So just to show you what that's going to look like, let's define our welcome message component using that. What we're going to do is we're going to say, export const WelcomeMessage equals-- and this is just arrow function syntax.

7:30Pretty much the same thing as we saw here, except it uses parentheses and an arrow, and it doesn't use the function keyword. And then from here, let's just return some basic JSX. We're just going to have an h2 heading here that says something like, "welcome to the Friend-Tracker app." And then, just to get a little more practice inserting values into JSX, let's actually insert the name of the current user into this. So what we're going to do is import the profile data from the data file.

8:04So we're going to say, import myProfileData from data. I'm just going to change those to single quotes there for consistency. And then we're just going to insert the name of that user into here by saying myProfileData.name. And that should be all we need to do. So we've defined this component now. Let's go into our App.js file, and import our welcome message and display it. So we're going to say, import WelcomeMessage from WelcomeMessage.

8:36And down here, right above our ProfileInfo component, we're going to say WelcomeMessage, and close the tag. And if we go back to our application in our browser now, we'll see that our welcome message component is being correctly displayed with the correct name. Well, I hope this has been informative for you, and I'd like to thank you for viewing.