Basic React Concepts & Syntax

0:05Hi, everyone.

0:06It's Shaun Wassell here.

0:07You know, it's hard to think of anything that's

0:09had a bigger impact on the web development

0:11world in the past decade or so than React.

0:13And that's what we're going to be taking

0:15our first look at here today.

0:17So React is a very popular front-end library

0:21that was created by Facebook some years ago.

0:23And from there, it's been open sourced

0:25and gone on to become the most popular front-end library

0:28in the world.

0:30So what we're going to be covering here today,

0:32we're going to be taking a look at some of the main benefits

0:34that React provides us with.

0:36It's going to answer the question of why we would want

0:38to use it in the first place.

0:40And we're also going to be creating and running

0:42our first React project, learning about project

0:45structure, and learning about something

0:47called React components and seeing how they work.

0:50So that's a lot to cover.

0:52Let's get started.

0:00[MUSIC PLAYING]

0:14So let's talk about some of the main benefits of React.

0:17The main benefits of React come down really to two concepts

0:20that we're going to talk about here.

0:22And those are reusable components

0:24and efficient rerendering.

0:27So let's start off by talking about reusable components.

0:30And to start this off, let's imagine that we want

0:32to create a blog site with--

0:35I don't know-- let's say, 100 pages.

0:38So our blog site is going to have,

0:40of course, a home page like that.

0:44It's going to have probably an about page,

0:47and it's going to have lots, and lots, and lots of blog pages.

0:52I'm just going to draw those like this here.

0:55And the problem with this, if we were to write all of our site

1:01in just plain HTML and CSS, is that,

1:05when we get to all of these blog pages--

1:07remember that we could have 100 or 1,000, or 10,000,

1:11or 100,000--

1:12we could have an awful lot of blog pages,

1:15for instance, medium.com.

1:17And if we were to write this in HTML,

1:20we would have to actually have a separate HTML file for each

1:24and every one of those pages.

1:27So the problem with that, of course,

1:29is that these pages are going to have a lot of things

1:32that they have in common.

1:33For instance, it'll probably have some cool header photo

1:37that shows a landscape or something just

1:40to attract the reader's attention.

1:41And it'll probably also have something like subscribe form.

1:45And it may well show that subscribe

1:47form several times in the page if it's like most blogs.

1:52Now, imagine this HTML page--

1:56it's all written out in HTML and duplicated over, let's say--

2:00let's just keep the numbers small, 100 pages.

2:02OK.

2:03If we wanted to make a change to how our blog pages look,

2:08what we would have to do in that case

2:10is go through all 100 or 1,000 or 10,000 et cetera

2:14pages of our site and copy and paste whatever code,

2:20whatever changes it was that we wanted to make.

2:23So in other words, we'd have to make the same exact change

2:26about 10,000, as many times as pages that we have.

2:32Now if that sounds unpleasant, it is.

2:35And that's why libraries like React

2:37have come along with a better way.

2:40So the way that React would handle this situation

2:43is a little bit different.

2:44Instead of having an actual HTML file for each and every blog

2:49page in our application, what React does

2:52through reusable components is, it

2:55allows us to abstract out things that are similar in our site.

2:59So if all of our blog pages in our site

3:02are pretty much the same, then what we can do

3:05is we can actually create a blog page component.

3:09So this thing here would just be a component.

3:11And we would be able to render it 100, 1,000,

3:1510,000 different times with different data.

3:19So this would be our first component.

3:21Inside this blog page, let's say that we

3:24want to display the subscribe form several times on our site.

3:28So in addition to having it on our blog page,

3:31might also want to have it in our about page, for example.

3:35What we would do is, we would simply create a subscribed form

3:39component.

3:41And we would simply include that once inside our blog page

3:45component and once inside our about page component.

3:48So in other words, now, when we want

3:52to make a change to all of the blog pages in our site, what

3:55we can do is we can simply--

3:57let's say that we want to do something

3:58like change the text inside our subscribe form

4:02or change the information that we gather from our readers.

4:06Well, what we could do is simply make

4:08one change to that component, and it would automatically

4:12be reflected across all of the pages in our application.

4:15Now, if this sounds a lot easier to work with than basic HTML,

4:19then that's because it is.

4:21And that's why reusable components

4:24form a very large part of not only React,

4:26but also pretty much all front-end libraries in use

4:30today, such as Vue and Angular and Svelte and all

4:34those other ones out there.

4:35So that's the basic concept of reusable components.

4:38We're going to be seeing how to work with components in React

4:41a little later on and just some of the things

4:44they allow us to do.

4:45But let's move on first to talk about the second main benefit

4:49of React, and that is efficient rerendering.

4:53Now before we get to efficient rerendering,

4:55let's talk about rendering in React first of all.

4:57In React, as you're going to see,

4:59we use a special syntax called JSX, which

5:03looks an awful lot like HTML.

5:05So you might have divs like that with some kind of text

5:08in the middle and a closing tag like that.

5:10So if you've ever worked with HTML, working with JSX

5:13is going to be pretty simple.

5:14We'll talk more about that later on.

5:16But essentially, what React needs

5:18to do, in order for the users of our application

5:21to actually be able to visit our site

5:24and see what our site looks like is,

5:26React has to take this JSX, which

5:29the browser has no idea what to do with and transform it

5:33into actual HTML.

5:35Now, these two things look pretty similar

5:38right now just on this drawing, but they're really

5:43very different things as you'll see later on.

5:48So that's what rendering is-- when

5:50React takes all of the components, all of the React

5:53code that we've written and generates HTML, which can

5:57be displayed in a web browser.

6:00Now, here's where rerendering comes in.

6:03Let's say that we've created some kind of application.

6:06Maybe it's a basic to-do list application.

6:09I'm just going to draw that here.

6:10So it might have a text input and a button here

6:14that allows the user to create new to-dos.

6:17They can Enter, Go to the Grocery Store, hit the button,

6:20and it will create new to-dos in the list, which

6:23is going to be down here.

6:24So let's imagine that we have a list here

6:26of different elements, each of which

6:29contains data about one to-do.

6:32So go to the grocery store.

6:36This could be learn about React--

6:38whatever's on your to-do list.

6:41So let's say that we have this rendered to-do screen.

6:44This is all HTML elements.

6:47There's probably a div surrounding this whole thing.

6:49Each of these is probably its own div.

6:51You have button elements, input elements, et cetera.

6:55Now, let's say that the data changes somehow.

6:58Maybe the user clicks this button and creates a new to-do.

7:02Maybe each of these to-dos has a button

7:04that allows you to remove the to-do,

7:06and the user clicks one of those and removes one.

7:09Well, in that case, we need to change the HTML

7:12that the user is seeing.

7:13We need to basically remove one of these to-dos

7:15or add a new to-do in the HTML.

7:18Now, if you were going to do this with vanilla JavaScript--

7:21and by vanilla JavaScript, I just

7:23mean JavaScript without any kind of libraries or frameworks.

7:27If you were going to do that using vanilla JavaScript, what

7:29you would have to actually do is write code

7:33to specifically remove one of these elements.

7:35So you'd have to find an element by ID, or class, or order,

7:39something like that, and remove it from the DOM.

7:42Or if you were adding an element,

7:43you would have to actually find this container

7:46element around our to-do items and add a new one in there.

7:50Now, that might not sound too bad in the context

7:52of this simple to-do list application

7:54that we're talking about.

7:56But once you start getting into more complex applications--

8:00imagine even something like Trello

8:02where it's a board and things are moving around,

8:05and other people are editing it at the same time.

8:07In situations like that, it gets tremendously complicated

8:11to make sure that what the user is seeing

8:13is actually representative of the data behind the scenes.

8:19So that's what efficient rerendering is all about.

8:21When the data of our application changes,

8:24when the user deletes a to-do in this application

8:27or moves cards around on a Kanban board,

8:30what they see after that has to reflect the new data.

8:34So that's just plain old rerendering-- making sure

8:37that the DOM that the user is looking at

8:39reflects the data behind the scenes.

8:41Efficient rerendering this one step further.

8:45So again, let's imagine that we have this to-do list,

8:49and one of these items changes.

8:52Maybe a user marks a to-do as complete, adds one, et cetera.

8:56What other libraries, such as Angular,

8:59might do in this situation is simply rerender the entire app.

9:03So this whole thing would have to be rerendered from scratch.

9:08And basically, all of these things would be removed.

9:11And then it would go in and insert all of these elements

9:14into the DOM again.

9:16Now, that's not particularly efficient,

9:19and it's also not necessary.

9:21Because, in our case here, if only one of our to-dos

9:24is changing, we shouldn't have to rerender the entire app.

9:28If this to-do is the only one that's marked as complete,

9:32let's say-- if the user clicks the button--

9:34then why do we have to rerender these other to-dos?

9:36They're just going to look the same.

9:38Why do we have to remove them from the DOM

9:40and then put them back in?

9:42Now, that's where React comes in.

9:44And React has some special algorithms

9:46for doing this in a very efficient way

9:49and only rerendering the things that need

9:51to be rerendered on the page.

9:53Now, again, in much larger applications or more complex

9:57applications, this can end up really improving performance

10:00if done correctly.

10:02Now, optimizing for this stuff is

10:04something we're going to talk about much later.

10:06But for now, just realize that this efficient rerendering

10:10thing that we've talked about here

10:11is a major benefit of working with React.

10:16And those are really be two main benefits of React.

10:19One is reusable components, and the other

10:22was efficient rerendering.

10:23I hope this has been informative for you,

10:25and I'd like to thank you for viewing.

0:00[MUSIC PLAYING]

0:12All right, so the first thing that we're

0:13going to take a look at here is how to actually create

0:15a new React project.

0:18Now, in general, the way that we create new React projects isn't

0:21by creating each of the files one-by-one

0:24and setting it up manually, we actually

0:26usually use something called Create

0:28React App to do this for us.

0:30OK, so the name of Create React App

0:32should be pretty self-explanatory, right?

0:34It's basically a script that we can

0:36run from the command line that will automatically

0:39generate all of the files and boilerplate code for us.

0:43So before we actually see how to use

0:45Create React App to get our first React app up and running,

0:48you're going to want to make sure

0:50that you have the right software installed on your computer.

0:53So mainly, we need two things.

0:55And they're both installed simultaneously.

0:59The first thing is node.

1:00And you can check the version of that

1:01by typing node-v in your terminal.

1:05And the other thing is NPM, which usually

1:08comes packaged with nodes.

1:09So you we don't usually have to worry

1:11about packaging it separately.

1:13So what you should see is a version

1:15pretty similar to mine, right?

1:17You'll want to have at least version 14 point

1:19something of node and version 6 point something of npm.

1:24In general, the closer you are to the versions that I have,

1:27or better yet, you have versions that are

1:29higher than mine, the better.

1:31Now, if you don't have node or npm installed,

1:34if you get some kind of error when you run these two

1:37commands, or if your versions are a little out of date, what

1:40you're going to want to do is actually

1:41head over to nodejs.org and install these things.

1:46Now, you're going to want to install the long-term support

1:49version here.

1:49Of course, if you're feeling adventurous,

1:51you can always install the current version, which

1:54has all the latest features.

1:55But I generally recommend people use the long-term support

1:58version.

2:00So what you're going to want to do

2:01is just download that, run the installer.

2:04It takes all of 10 to 15 seconds to install.

2:07And once you've done that, continue on with the course.

2:10So now that we've made sure we have the right versions of node

2:14and npm installed, the next thing we're going to want to do

2:17is actually create our React app using Create React App.

2:22So the way we do that is first you're

2:24going to want to change directories into the directory

2:27where you normally keep all of your projects.

2:30For my own React projects, I just

2:32have a directory called React.

2:35And once you're inside of there, we're

2:37going to generate our project by typing the command npx

2:41create-react-app, and then the name of the project

2:47you want to create.

2:48So we'll just call ours my first react app for now.

2:52And before we move on, it's important to know

2:54that the default package manager for create React app projects

2:58is actually YARN.

3:00Now, YARN is mainly packaged with Create React App

3:04because Facebook created YARN.

3:07And the alternative, which many people, including myself prefer

3:11is NPM.

3:12Now, again, since I prefer to use NPM

3:15that's what we're going to do here.

3:16But we do have to add a little flag to this script

3:20we're running here to make sure that it

3:21uses that instead of YARN.

3:24And that is we simply have to say --use-npm.

3:28And then we're going to hit Enter, which

3:30will create our project for us

3:33And there we go.

3:34So once Create React App has finished running,

3:36our new app is ready to go.

3:38So what we're going to do is we're just

3:40going to change directories into the new app directory we

3:44created, which is going to have the same name as what

3:47we typed after the script.

3:49So 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

3:58to see what it looks like.

4:00And the way that you do that is, again, inside the directory,

4:03we're going to run the script npm run start, and hit Enter.

4:08And that will open up our app in localhost 3000 on our computer.

4:14OK, so you can see that it has this cool little spinning React

4:16logo thing.

4:17It's got some text underneath it.

4:19And it's got a link to learn React, which basically it

4:22takes you to React's documentation site.

4:25And that's how you create and run a new React

4:28app using create React app.

4:29I hope this has been informative for you,

4:31and I'd like to thank you for viewing.

0:00[MUSIC PLAYING]

0:12OK.

0:13So now that we have learned how to create a React app

0:16and actually run it, let's take a closer look

0:18at all of the files that Create React App has actually

0:21generated for us.

0:22So what we're going to do is stop our app for now.

0:25And we're going to open up this file in our IDE.

0:29So if you're using Visual Studio Code like I

0:32am-- and I would highly recommend it.

0:34Although if you have your own preferences, that's fine too.

0:36If you're using Visual Studio Code, what

0:38you can do is if you're inside your terminal in the directory,

0:42you can simply type code and then dot and hit Enter,

0:46and that will open that up for you.

0:47And that's what I'm going to do, because that's

0:49much easier to do.

0:50So once we've done that, you should

0:54be able to go over to the file tree

0:55here and see all of the different files

0:57that Create React App has set up for us.

1:00And just by looking at how many files there are here,

1:03it becomes a little more clear why

1:04it is that we use a React boilerplate

1:06generator in the first place, instead of just setting up

1:09all of the files and the project for ourselves.

1:13Now, what I want to do here is actually take

1:16a look at some of the files that it's generated for us,

1:19just to kind of give us an idea of how

1:22the project is organized.

1:23So first of all, out here in the main directory,

1:25we just have some of the files that you'll

1:27find in your average JavaScript project.

1:30We have the package.json file, which

1:32just contains a lot of configuration for our project,

1:36right?

1:36It's got the name of our project, some versioning,

1:40whether or not it's private on the NPM directory.

1:43And it also has a list of dependencies, scripts,

1:47browser compatibility, lots of stuff

1:49that we'll be using later on.

1:51Now besides that, we also have this packagelock.json file.

1:54This is just a more detailed version

1:56of our package.json file.

1:59It basically just contains the exact versions

2:01of all of our dependencies' dependencies.

2:05OK.

2:07And besides that, we have the gitignore file,

2:09which just contains all of the files

2:10that we don't want to commit to GitHub.

2:13And we also have a readme, which contains some instructions.

2:17It tells us what commands we can run in order

2:19to do certain things inside the React app we've generated.

2:23OK.

2:23Now, besides those things, we also

2:25have this public directory.

2:27The public directory contains a lot

2:29of the static files that are going to be loaded by our React

2:32app-- things like images.

2:34And it also has this index.html file, which

2:37our React is rendered inside.

2:39We'll talk about how that works and some

2:41of the implications of that in much more detail later on.

2:45OK.

2:46So that's the public folder.

2:47The one that we're most interested in our React project

2:51is this source directory.

2:53The source directory basically contains all of the React code

2:58that we care about.

2:59So just to go through this in order, if you will,

3:02we have our App.js and App.css files.

3:06Now, the App.js contains the top-level component

3:11of our React application.

3:13React applications are organized into these reusable components

3:16that we can configure in different ways,

3:18and the App component is basically

3:20the top-level one that contains all the other components

3:23in our application.

3:24We'll see how this is used a little later on.

3:27And one other thing that you can see in this component

3:29is, remember the app that we ran inside our browser, right?

3:33Which if you haven't hit Refresh in your browser,

3:35it's probably still up, even though the React app isn't

3:38running in the background.

3:40If you take a look at the code inside our App.js file,

3:44you'll see that it has this message Edit src/App.js

3:48and save to reload.

3:49You see that that's right there.

3:51You see that we have this Learn React thing.

3:54That's what this is right here.

3:56So essentially, inside this HTML-like syntax--

4:00and I say HTML-like because it's not actually HTML,

4:04as we'll talk about shortly.

4:06Inside this HTML-like syntax, we have all of the contents

4:09that we're currently seeing in our browser.

4:12Now, just to take this one step further, if you want,

4:14what you can do is actually run the app again with npm run

4:17start.

4:19And if you go back to App.js now and make some changes

4:22to the code--

4:23maybe if we say--

4:24maybe instead of Edit src/App.js and save to reload,

4:28we could say something like, This is amazing!

4:32I'm learning React!

4:36OK.

4:36And if we save our file, what we're actually going to see

4:39is that without even refreshing the page, when we go back

4:42to it, it's already rendered and displayed the new text.

4:46Now, this is something called hot reloading in React,

4:50and it's a very important part of modern web development.

4:53Essentially what the dev server in the background-- that's

4:57basically a very simple server that's running and serving

5:01all of our React files so that we

5:02can access them in a browser.

5:04What the dev server does is it senses whenever we make changes

5:07to our files, and it will automatically update that,

5:10and those changes will be reflected in the browser,

5:13without having to refresh.

5:15Now, there are some times when you have to refresh.

5:17But in general, it will handle that for you.

5:22OK, so that's our App component.

5:24And again, we'll be going into much more detail about all

5:26of this stuff and how it works later on.

5:29So don't worry about all this funny syntax

5:31and how that works right now.

5:33Another thing to notice is that there's also App.css.

5:36This basically contains all of the styles for our App

5:39component.

5:40And there's this App.test.js file,

5:43which contains all of the tests for our App component.

5:47All right, so you can tell pretty much by the naming

5:49schemes of the files how it is that they relate to some

5:53of the other files, right?

5:55So all of our App files here are related to one another.

6:00So next up, we have the index.css file.

6:02This just contains the global styles for our application.

6:06So just like how App.css contains

6:09only the styles for our App component,

6:12index.css contains things that will be applied globally

6:15throughout our application.

6:17Under that, we have index.js.

6:19Now, this is what's called the entry point of our React

6:23application.

6:23Basically, this ReactDOM.render call

6:27is what will eventually take all of the React code

6:31that we've written and render it into the browser.

6:34So basically, it'll take all of our components

6:36that we've created and basically transform that

6:40into HTML, which will be inserted into the page.

6:45Again, we're going to see this in much more detail later on.

6:47So don't worry too much about it.

6:49Just know that this is the entry point file.

6:52OK.

6:52So that's the index.js.

6:54Next up, we just have logo.svg.

6:57That's just the spinning React logo that we have right here.

7:00Under that, we have reportWebVitals.

7:02This is just for basically monitoring our application

7:06in production.

7:07So don't worry too much about that.

7:09We're not really going to use that at all.

7:11And after that, we have setupTests,

7:12which just contains some imports if we

7:15need to add certain things to our testing flow, right?

7:19If we need to install packages like Jest,

7:23for example, which we'll talk about later on.

7:27So that's pretty much all the files

7:28that Create React App has generated for us.

7:30Hopefully, that's helped you to start understanding

7:33what all of these files mean and how

7:36they relate to the overall React project that we're working on.

7:40Well, I hope this has been informative for you,

7:43and I'd like to thank you for viewing.

0:00[MUSIC PLAYING]

0:12All right, so the next thing that we're going to do

0:14is go a little bit deeper with React.

0:16And instead of just playing around

0:18with the basic boilerplate code that they've given us,

0:20we're actually going to start working

0:21on her own project, which will give us some really

0:24nice hands-on experience with all

0:26of the nitty-gritty details of React,

0:28the basic syntax, et cetera.

0:31So, let me just, first of all, discuss the app

0:33that we're going to be building.

0:34I've already built it, so I've got it running in my browser

0:37here.

0:37And the app that we're going to be building

0:39is basically going to be a friend tracker app.

0:42In fact, that's what I've called it up here.

0:44And what it's going to allow users to do

0:47is basically keep track of their friends, right?

0:49Keep track of which ones are their favorites.

0:51It'll allow them to add and remove friends

0:54from their favorites.

0:55It'll allow them to edit their friends' information, right?

0:58So adding notes about them, changing their age,

1:01editing their birthday, that kind of thing.

1:04It'll allow them to edit those things and save them.

1:07It will also allow them to add new friends

1:10to their application, just by entering all of those things

1:13into a form.

1:15And finally, it will allow them to view and edit

1:17their own information, and add things

1:20like interests, their own birthday, bio, et cetera.

1:23So that's the basic friend tracker app

1:25that we're going to be working on here.

1:27It's got lots of good concepts in it

1:29that will allow you to really get a feel for how React works,

1:33and how to think in React.

1:35So without further ado, let's get

1:37started creating this thing.

1:39Now, we could just use the basic app that we created here.

1:43And really, all we would have to do is change the name.

1:45But in order to get more experience with creating React

1:49apps, so that your fingers just get used to typing out

1:52npx create-react-app, why don't we just create

1:55a new app for this one?

1:56So, let's change directories back into where

1:59we keep all of our projects.

2:00Again, for me, that's React.

2:02For you, that might be documents or repos

2:05or something like that.

2:06And inside here, we're going to run that command again.

2:09We're going to say npx create-react-app.

2:13And let's call this app friends-tracker.

2:19Oops, I guess I made it singular there.

2:20So let's make it friend-tracker.

2:22And after that, again, we're going to use --use-npm flag.

2:28And we'll hit Enter.

2:29And that will generate our project for us.

2:35And there we go.

2:36We have our new project created.

2:38So let's change directories into that new project.

2:41So we'll say cd friend-tracker, and then we're

2:44going to open that up in our IDE.

2:46Again, with VSCode, you can usually do that by typing code

2:49and then dot.

2:50If not, just do Control O, and open it

2:52that way, whatever you're comfortable with.

2:54So let's open this one up.

2:59And we're going to see that it's got exactly the same files

3:02as our previous app had.

3:04All right?

3:04So it's got the public folder.

3:06It's got the source directory, which

3:07we're going to be writing all of our code inside of.

3:10And it's also got, gitignore, package-lock.json,

3:12package.json, README, all that good stuff.

3:16So let's get started creating our app.

3:19What we're going to do here is take a closer look

3:21at this funny looking HTML like syntax that React uses.

3:26Now, first of all, this is called JSX.

3:30It's just a fancy name for basically HTML code

3:34that you can write inside JavaScript files.

3:37Now, the purpose of JSX is to make it easier

3:40for us to structure our applications visually, right?

3:44So just like how HTML allows us to very quickly see

3:47the basic structure of a page, JSX

3:51basically builds on top of that, and allows

3:54us to use this inside our JavaScript files.

3:57So first of all, what we're going to do

3:59is delete a lot of the basic code

4:01that the React boilerplate generator has given us since we

4:04don't really need it anymore.

4:06So what we're going to do here is delete

4:08this JSX inside of here.

4:10Don't worry.

4:11We'll be writing some a little later on.

4:13And I'm just going to adjust the indentation here

4:16since React automatically does it with two spaces,

4:18and I tend to prefer four.

4:23So we're going to delete all that JSX.

4:24We're going to delete this import logo from logo SVG

4:28up here since we don't need that either.

4:29And the next thing we're going to do

4:31is actually write some basic JSX that

4:35will be the start of our friend tracker application.

4:38So the first thing we're going to do

4:39is display our own profile on the page, right?

4:42Remember how it had our picture?

4:45It had our name.

4:46It had our age, et cetera.

4:48We're just going to display that inside this app

4:50component, which, remember, is the top level component

4:54in a React application.

4:56So here's what this is going to look like.

4:58And this is going to be mostly basic HTML that you've seen,

5:01even though, technically, JSX is not HTML.

5:06So first of all, we're going to wrap

5:08everything inside of a DIV.

5:10Inside here, we're going to have an h1 heading.

5:13That's going to be the main heading of our application.

5:16So we'll say Friend Tracker.

5:21Under that, we're going to have a DIV, which will contain

5:23all of our profile information.

5:25So first thing, it's going to have our profile image.

5:29And in JSX, use the same exact tag as in HTML.

5:33It is the image tag.

5:35And the attributes here are actually

5:36going to look a little different than what you might

5:39be used to seeing in HTML.

5:41OK?

5:41So this is where HTML and JSX start to diverge a little bit.

5:46We're going to say source equals, but instead

5:49of actually writing an entire URL inside double quotes

5:53like you would in HTML, what we're going

5:55to do is use curly braces.

5:58And we're going to say process.env.PUBLIC_URL.

6:03That PUBLIC URL is all in caps.

6:06And we're going to say plus.

6:08And then inside a string there, we're going say

6:11/my-profile-pic.png.

6:16OK, now, this here is going to be

6:18a picture that we add to our application in just a minute.

6:21But first, let's discuss this basic syntax here.

6:24What curly braces do when you see them in JSX

6:27is allow us to execute a JavaScript expression

6:31inside of them.

6:32OK?

6:32So whereas with basic HTML, you're

6:35usually limited to just writing text content.

6:38With JSX, you can actually execute a JavaScript

6:42inside the JSX statements.

6:46So what this process.env.PUBLIC_URL thing

6:47is, is it's just the URL of our dev server that's running

6:53and allowing us to access our app inside the browser.

6:57And then, of course, we're putting /my-profile-pic.png

7:01on the end.

7:02That's the name of the picture we're

7:03going to be using just for our own testing purposes here.

7:06OK?

7:07So we've got that source attribute all written out.

7:10The next thing we're going to do is add some alt text.

7:13This is good for accessibility.

7:15For this one, we're just going to put Shaun smiling, right?

7:21That'll be read out as picture of Shaun smiling.

7:25And then, we're going to say height equals 200.

7:29And that's it for our image.

7:30So underneath that, the next thing we're going to do

7:33is have an h2 heading, which will say my profile.

7:38Under that, we're going to have all

7:39of the different pieces of information about ourselves,

7:42so our name, age, bio, birthday, et cetera.

7:45So let's put that like this.

7:46We're going to say h3 heading, Name.

7:50Underneath that, we'll have a paragraph with my actual name.

7:53And please, as you're following along,

7:56feel free to use your own name.

7:57That would be a little weird if you used my name, I feel like.

8:00So feel free to use your own name.

8:02All right?

8:03So we have Name.

8:04Next up, let's do h3.

8:06We're going to do Age.

8:09Under that, we'll put 100, right?

8:12That's the age I feel some days.

8:15And after, that we'll put Bio.

8:17So we'll say h3, Bio.

8:20And we'll just write a short little biography here.

8:23We'll say I like to program.

8:27I also like food.

8:30That's my bio.

8:31Feel free to write your own.

8:33Under that, we're going to have birthday.

8:39And we'll put something like March 1.

8:41It's not my real birthday, but it's close enough.

8:45And finally, we're going to have Interests.

8:47And this is going to be a little different than the other pieces

8:50of our user interface here.

8:53Basically, this is just going to be an unordered list.

8:56So we'll make UL tags there.

8:59And inside there, we'll have li.

9:01And I'm just going to list out some of my interests here.

9:03Obviously, programming is one of them.

9:06And what else?

9:07Data science, I'm into.

9:10I like gardening as well.

9:14And I'm also a fan of foreign languages.

9:16So we'll put that in here.

9:18Feel free to put whatever your interests are here.

9:23OK, and that's pretty much it for our profile page.

9:27So let's open up our terminal here and run our application.

9:31And take a look at what we wrote here.

9:37Oops.

9:37It looks like I left my completed application running

9:41on another port.

9:42So what I'm going to do is go over here and stop it

9:46from running.

9:47And then I'll go back here.

9:49Say no, and try running it again.

9:52You can always say yes there.

9:53And what it'll do is just run it on local host 3001 instead

9:57of local host 3000.

10:00OK?

10:01So here is our application that we just wrote out in JSX.

10:05We can see that it's got our h1 heading here.

10:08You can basically see a one to one correspondence

10:11between everything we just wrote and everything that's getting

10:14displayed in the browser.

10:15The one thing we're missing is this picture.

10:17So let's go and add that to our application.

10:20So the way we're going to do that is actually

10:22add that to our public folder.

10:24And what I'm going to do for that is right-click on this.

10:27Say reveal in finder.

10:32And what that'll do is bring it over here.

10:34And I'm just going to drag a picture that I already

10:37have from my completed application

10:39into the public folder.

10:41So I'm just going to copy this here.

10:43Go into Public and Friend Tracker and paste it.

10:47And that should work out nicely.

10:49So let's close these.

10:50Go back to our application.

10:52And we should see that the image is now

10:54being rendered very nicely.

10:56And again, feel free to use a picture of yourself here

11:01instead of the picture of me.

11:02But I mean, if you insist on doing that, you can probably

11:05find a good picture of me on LinkedIn or GitHub.

11:07But again, that would be a little weird.

11:09So I recommend you use your own.

11:11So anyway, that's how to write some basic JSX

11:13and render a basic profile page using React.

11:17I hope this has been informative for you.

11:19And I'd like to thank you for viewing.

0:00[MUSIC PLAYING]

0:14OK, so at this point, we've seen how to write some JSX

0:17and render it into the user's browser.

0:20But at this point, our app still isn't really

0:22any better than just writing out a basic static HTML page,

0:26right?

0:28Basically all of our content is still just plain text

0:31that we've explicitly hardcoded into our JSX.

0:36So what we're going to do here is take a look

0:37at how to actually insert the values of variables

0:41in our programs into our JSX which

0:44will be a really big step toward actually being able to use

0:49React for useful purposes.

0:51So what we're going to do here is,

0:52instead of explicitly putting all of our profile information

0:56like our name, our age, our bio et cetera, directly

1:00into the JSX, we're going to instead define

1:03those things as variables and then see

1:06what JSX's syntax is for inserting

1:09those things into our page.

1:11And just to give you a little bit of a hint

1:13before we do this, if you take a look at this source

1:16attribute that we defined for the image,

1:19that's more or less where we're going to go with this.

1:21You'll see what I mean in a minute.

1:23So to start off here, above where

1:25we say return and all of this JSX, what we're going to do

1:29is define some profile data for ourselves.

1:33And again, I'm going to use my own data.

1:35You should feel free to use your own name, age,

1:38bio interests, et cetera.

1:40So inside here, let's say const my profile data equals.

1:46And we're just going to define a basic JavaScript Object here

1:49with several different properties, basically

1:52all of the properties that were displaying down below.

1:55So we're going to say for instance, name.

1:58I'm going to put Shaun Wassell profile pic URL.

2:04And that's going to be the same thing that we have down here,

2:08except what we're going to do is actually use a template string

2:11to insert the value of process.end, there we go,

2:18process.end.publicurl.

2:22And that again is the URL that goes to the public directory

2:26wherever our React app is running.

2:29And then we're just going to say -my profile pic.png.

2:34If your photo is named something different,

2:35you're obviously going to want to make

2:38that a different string, OK?

2:40So from then on, it's pretty simple.

2:42We're going to put our age.

2:44We're going to put bio.

2:46I like to program.

2:49I also like food.

2:53Under that, we're going to put our birthday, which

2:59is going to be March 1st.

3:01And then we're going to have our interests which

3:04is going to be an array instead of just a basic string.

3:08And we're going to see later on how to actually take an array

3:10and create new elements in our JSX for each

3:14of the elements in that array.

3:16But for now, we're just going to say interests.

3:18And we'll put programming, data science, gardening,

3:27and foreign languages, OK.

3:33So now that we have all of our profile data

3:36defined in an object like this, what we're going to do

3:39is actually go through our JSX and insert

3:42the values of each of these things where they belong.

3:45So we're going to start off here with our name, age, bio,

3:48birthday, et cetera.

3:49And we're going to leave the image

3:51because that one's a little more involved, not too much though.

3:55So let's start off with our name.

3:57Now, the way that we insert the values of variables

4:00into our JSX, we can't just directly

4:03name the variable or the value that we want to insert, right?

4:07We can't just say my profile data dot name, for example.

4:12Because what React will think is that we

4:14want to actually insert, literally this string,

4:17my profile data dot name into the page.

4:21And that's obviously not what we want to do.

4:23So what we need to do instead is,

4:26whenever we have a JavaScript expression--

4:29and I said this earlier, I mentioned it-- whenever we have

4:31a JavaScript expression and we want to insert the value of it

4:36into our JSX somewhere, we just need

4:38to wrap that in single curly braces.

4:41So this is how we would insert my profile data name--

4:45which again, we defined up here--

4:47into our JSX.

4:49So again, what React will do when it gets here,

4:51it will actually evaluate this expression

4:54and render the value of it--

4:58in that case, it's going to be Shaun Wassell--

5:00into that spot in the page.

5:04So let's do the same thing with the age.

5:05We're going to say my profile data.age.

5:12OK, same thing for the bio, we're

5:14going to say my profile data.bio.

5:19And for the birthday, we're going

5:21to say my profile data.birthday.

5:26And that's about it for now.

5:27Let's go back up to the image and actually insert it there.

5:30So we're going to start off with the source.

5:32And when we're passing values from JavaScript expressions

5:35to attributes as we are here with source,

5:39it's pretty much the same thing that we're doing, right?

5:42Instead of putting double quotation marks

5:44as we are with the Alt text or height,

5:47we're actually just going to say the expression that we want

5:51to insert the value of, right?

5:53So for source here, we're going to say

5:55my profile data.profile pic url.

5:59And then we're going to replace the Alt text here

6:02with something different as well, right?

6:05Instead of just hard coding Shaun smiling,

6:09and we're just going to assume that everyone is always

6:12going to be smiling in this picture here for our Alt text.

6:15What we're going to do instead is

6:16we're going to use curly braces.

6:18And we're going to say template string, my profile data.name.

6:27And then we're going to say smiling.

6:30So notice what we had to do there, right?

6:32We had to have the outer pair of curly braces in order for us

6:36to specify a template string in React.

6:40We can't just substitute back ticks for the double quotes.

6:45That's not the correct syntax.

6:47So what we had to do was we had to have

6:50an outer pair of curly braces to start the template string.

6:54And then inside that template string,

6:55we had to use the template string syntax

6:58for inserting a value where we said,

7:00my profile data.name and then the literal string, smiling.

7:04So that's a syntax that can confuse

7:06people some of the time.

7:08Just keep in mind that there's two separate things going

7:10on there.

7:11One is inserting the value into JSX,

7:14the other is inserting the value into a template string, OK.

7:19So that's pretty much all we need for our image.

7:21The last thing we're going to look at here is the interests.

7:24And for the interests, for now, what we're going to do

7:27is instead of actually displaying multiple elements,

7:31one for each element of the array that we want to display,

7:35we're just going to take the array up here

7:37in my profile data and join it all together

7:41into a comma separated string, all right.

7:43That's a little lamer than maybe you were hoping.

7:46But for now, it will be just fine.

7:49And we'll see how to display lists of elements later on.

7:52So let's delete this unordered list.

7:54And we're just going to replace this with a paragraph.

7:57And again, what we want to do here

7:59is insert the value of a JavaScript expression.

8:04So what we can do is just put two curly braces and directly

8:10just say, my profile data.interests.join.

8:16And then we're going to join them together

8:18with a comma and a space.

8:19So this is just a basic JavaScript expression

8:22that we were able to insert directly into our JSX.

8:26And as we're going to see, that we'll evaluate

8:28to a comma separated string.

8:31All right, and that should be all we really need to do.

8:34Let's take a look at this in our browser

8:36now and just make sure your app is running so

8:38that you see all the updates.

8:39And we're going to go over here, and we're

8:41going to see that pretty much nothing else has

8:43changed because for the most part, we use the same data.

8:47But the one thing that has changed is our interests.

8:49Instead of the unordered list that we had before,

8:53it's now just a comma separated string that

8:56was inserted into the page.

8:59So that's how we insert values into JSX.

9:03I hope this has been informative for you.

9:05And I'd like to thank you for viewing.

0:00[MUSIC PLAYING]

0:12OK, so at this point, we know how

0:14to write basic JSX in our components.

0:17And we also know how to insert the values of JavaScript

0:20variables into our JSX.

0:22The next thing that we want to do,

0:24though, is be able to actually write

0:26multiple components in our application,

0:29each of which we'll be able to reuse when we actually need to.

0:33So to be a little more specific about what

0:35we're going to try and do here, this basic DOM structure

0:39that we've created right here in our JSX

0:42could be reused if we wanted to.

0:44It would be nice to be able to display

0:46this exact same structure, with the image, and the name,

0:51and the age, and the bio, and the birthday,

0:53and the interests, et cetera.

0:54It'd be nice to be able to display

0:56that several times in our site with different user

1:00information.

1:01I mean, it would be nice to be able to not

1:03have to write this out again every time we want to display

1:07a different person other than the person

1:09that we've defined in this profile data here.

1:12So that's where the concept of reusable components comes in.

1:16And we're not going to make our components reusable yet.

1:19What we're going to do here is simply

1:22see how to create our own React components

1:25and display them inside other components.

1:28So with the JSX that we've written here,

1:31a name that would make sense for this

1:33if we were going to create a component for it, which we are,

1:36would be something like "profile info."

1:40Now, the way that we create components in React,

1:43it's actually very simple.

1:45They're just files, just basic JavaScript files.

1:49And the name that we give them usually

1:51is just the name of the component.

1:53So with our app component, the name of the file was "app,"

1:56and the name of the component here was "app."

1:58Pretty straightforward.

2:00So let's create our profile info component that will basically

2:05allow us to reuse and re-render all of this JSX

2:09whenever we need it.

2:10So we're going to say ProfileInfo.js and hit Enter.

2:16And inside here is where we're going

2:17to create our new component.

2:19Now, you may have noticed in the App.js component

2:23that components in React are just functions

2:26that return some sort of JSX.

2:29And this is the JSX that will be rendered

2:30in the component's place when React actually

2:34renders this component.

2:36So for our profile info, all we really need to do

2:40is create a function here, which we'll call ProfileInfo.

2:48And we're just going to have this

2:50return the same JSX that we defined inside our app

2:54component.

2:55So we're just going to take all of this here,

3:01and we're going to cut that out and put it in our profile info

3:05component.

3:06So we don't even need that return statement, either.

3:10So we have our profile info component now.

3:13So in order to actually render this inside our app component,

3:18all we need to do is export it.

3:20So we're going to say export function profile info.

3:24And it's got our profile data defined here,

3:26it's returning some JSX.

3:28So let's go into our app component now and import this.

3:31We're going to say import profile info from profile info.

3:37And then the way that we display one component

3:40inside another component in React

3:43is going to look something like this.

3:44We're going to say Return, and then we're going to use JSX.

3:49But instead of using the regular elements

3:51that JSX borrows from HTML like div, image, anchor, et cetera,

3:58we're going to use the name of the component

4:00that we just imported in the JSX.

4:03So we're going to say ProfileInfo.

4:06And then you can either have an opening tag and closing tag

4:09and not put anything in the middle,

4:10or you can just have a single tag like that.

4:15OK.

4:16And what this does is it tells our app component

4:18that we want it to display the profile info component.

4:22Now, obviously, we might want to have more things there, right?

4:26We might want to have our Friend Tracker heading, for instance.

4:33So we might say Friend Tracker, like that.

4:37And for reasons that I'll discuss a little later,

4:40we do have to wrap these two elements inside a div.

4:44Just put those two in a div.

4:46Don't worry about why for now.

4:48And we're going to go into our ProfileInfo

4:50and remove our Friend Tracker heading from there.

4:53And we also don't need this surrounding div here.

4:58So the only thing that we want to have inside our profile info

5:01component is the reusable code, right?

5:05Things that we might want to render in multiple

5:07places in our application.

5:10So now that we've gotten it down to that,

5:14and we're displaying Friend Tracker here as well,

5:16we might want to also rephrase.

5:18And we're displaying Friend Tracker here,

5:22and we're displaying the heading here as well.

5:24Let's take another look at our application.

5:26And we're going to see that it looks pretty much the same

5:29as it did before, except now all of our ProfileInfo logic

5:34is in its own component.

5:36So we've seen how to make our JSX a little more modular

5:38and move it into its own component.

5:41Two more things we're going to do here.

5:42Just to get a little more practice with JSX

5:45and creating our own components, we're

5:46going to create another component.

5:48But first, what we're going to do

5:50is actually move this profile data

5:52that we've defined here into its own file.

5:54This will just make it easier later on,

5:56when we want to actually import this data

5:59into multiple components.

6:01So inside our source directory here, let's create a new file,

6:05and we're going to call this file Data.js.

6:10And we're just going to cut myProfileData out

6:14of that component and paste it inside Data.js.

6:17OK.

6:18So let's remove that spacing there.

6:20And we're also going to export it from the data file,

6:23so that we can import it in our component.

6:26So let's say import myProfileData from data.

6:35And that's all there is to it.

6:36So now just to get a little more practice

6:38with creating components, let's create a sort

6:40of welcome message component.

6:43It'll just be a big welcome message that

6:45says "welcome" to the user.

6:47So let's create a new component for that

6:49and we're going to call it WelcomeMessage.js.

6:55And one thing to note about components

6:58is that since they are just functions,

7:01we can really use any kind of function syntax we want, right?

7:05We're not limited to just using the function keyword,

7:07like app happened to do.

7:10We can also use arrow function syntax if we want to.

7:13So just to show you what that's going to look like,

7:15let's define our welcome message component using that.

7:19What we're going to do is we're going to say,

7:21export const WelcomeMessage equals--

7:27and this is just arrow function syntax.

7:30Pretty much the same thing as we saw here,

7:32except it uses parentheses and an arrow,

7:35and it doesn't use the function keyword.

7:37And then from here, let's just return some basic JSX.

7:40We're just going to have an h2 heading here

7:43that says something like, "welcome

7:45to the Friend-Tracker app."

7:50And then, just to get a little more practice inserting values

7:53into JSX, let's actually insert the name of the current user

7:58into this.

7:59So what we're going to do is import the profile data

8:02from the data file.

8:04So we're going to say, import myProfileData from data.

8:07I'm just going to change those to single quotes

8:09there for consistency.

8:12And then we're just going to insert the name of that user

8:18into here by saying myProfileData.name.

8:22And that should be all we need to do.

8:23So we've defined this component now.

8:25Let's go into our App.js file, and import our welcome message

8:30and display it.

8:31So we're going to say, import WelcomeMessage

8:33from WelcomeMessage.

8:36And down here, right above our ProfileInfo component,

8:39we're going to say WelcomeMessage, and close

8:43the tag.

8:44And if we go back to our application in our browser now,

8:47we'll see that our welcome message

8:49component is being correctly displayed

8:51with the correct name.

8:53Well, I hope this has been informative for you,

8:55and I'd like to thank you for viewing.