WEBVTT

00:00.740 --> 00:06.650
All right, everyone, in this section, we are going to create our React app that is utilizing the

00:06.650 --> 00:08.270
back end we just created.

00:09.290 --> 00:16.180
So the first thing we need to do is to use the Create React app application.

00:16.190 --> 00:22.100
And so if you Google Create React app, you can see there's a page here.

00:22.100 --> 00:30.170
And if you follow the command in Create React app, my app, it's going to create a directory containing

00:30.290 --> 00:32.930
a sort of a scaffolding for a React app.

00:35.790 --> 00:37.640
So let's go ahead and try and do that.

00:37.650 --> 00:40.860
Npx Create React app.

00:42.180 --> 00:46.590
And then I'm going to type in client as the app name instead.

00:48.330 --> 00:55.410
So it's going to create a new directory inside of Nordstorm folder that's called client, and that's

00:55.410 --> 00:58.050
where we're going to have our React client running.

01:09.620 --> 01:17.930
Now, once this is done, you can see inside you basically have to say CD client and run, yarn start.

01:18.410 --> 01:27.170
So let's go ahead and do that CD client yarn start and now it's going to run the bundler that is creating

01:27.170 --> 01:28.250
the React app.

01:36.860 --> 01:43.880
And once it has done compiling, bundling and so on, you should see you should see a spinning React

01:43.880 --> 01:45.110
logo here.

01:45.950 --> 01:53.870
And I'm going to take my Visual Studio code and drop it right next to the browser so we can see while

01:53.870 --> 01:55.160
we edit the code.

01:55.760 --> 01:59.300
Now let's look inside of the client again.

01:59.300 --> 02:03.890
Just like with Node JS Express, you can have a whole course about React.

02:03.890 --> 02:07.040
Also, there is a whole course out there.

02:07.040 --> 02:14.600
There's lots of courses out on React and I'm not going to go into too much detail and explain everything

02:14.600 --> 02:15.620
about React.

02:15.800 --> 02:21.530
But again, we're going to get something up and running to display the results from the Nordstrom API.

02:23.230 --> 02:31.240
So first of all, what you want to check is inside the App.js file, which is inside the source folder

02:31.240 --> 02:32.710
in the client folder.

02:32.890 --> 02:36.970
This is where we are going to have our app written itself.

02:37.000 --> 02:46.780
And inside React, you have a syntax called JSX, which means you basically have everything inside of

02:46.780 --> 02:52.750
components and you have a mixture of HTML, XML and JavaScript.

02:53.670 --> 02:58.410
So if you're not familiar with drag, this can be quite a bit of a shock.

02:58.440 --> 03:00.120
A lot of things going on.

03:01.160 --> 03:06.270
Uh, again, if you want to learn more about React, go ahead and get our full course for it.

03:06.270 --> 03:11.640
But we're absolutely going to build something that, uh, is displaying the results.