Let's set up a basic react application we can work with,
for that I'll add two files in the containers folder, a users.js file and a pizza.js file because
I want to show a pizza in my project, again it won't be super useful but it will use an image, it will
use lazy loading. In the components,
I'll then add my PizzaImage.js component,
whoops, that should be without
js though, that's just the folder name,
so PizzaImage and in there, I want to have my PizzaImage.js file and my PizzaImage.css
file
and I plan on using css modules here.
Now I won't create a users component because I don't really need one,
I'll code everything I want to display there into that users file. With that
let's work on the PizzaImage and for that, we of course need an image.
Now you can find one attached to this lecture and I'll just put it into the assets folder,
that's the pizza.jpeg file
I'll use. In the PizzaImage.js
file,
I'll then create this as a functional component, pizzaImage
will get some props eventually
then I want to output a div here which should get a class, className of and there, I want to use css
components and css modules,
so here this will have a class PizzaImage.
Now for that I need to import that so import classes from ./PizzaImage.css
and since we use jsx here, I also need to import react from react and export this as a
default.
Now you might notice that react of course isn't installed yet, we'll do this in the next lecture where
we install all the dependencies we need, for now I'll import it
but nothing will work here,
we don't have a workflow and we don't even install react, just writing the bare code.
So inside my pizzaImage div, I then want to have an image, self-closing where I want to import that image
and output it here as a source.
Now for that, I will import my PizzaImage from, whoops, from
and now I want to navigate to that assets folder and there grab that pizza.jpeg file and my build
workflow should essentially copy that file to a new destination then and give me a link to that file in
this constant which I can therefore output here, like this.
So this is my pizzaImage component,
I'll also give this image a class which can be classes pizzaImage.
Now I need to give this some styling and I should rename PizzaImage here to PizzaImg maybe because I already
have PizzaImage for the overall component style, so pizzaImage is the div here,
I'll give this a width of 80% and a height of let's say 300px, a margin of 20px and
auto to left and right and I want to center any text
and since the image is an inline style, it should be centered for that reason. I'll then have my pizzaImg
which is the image itself and there I want to set the max-width to 100% and the max-height
to 100% so that it respects the boundaries of the container while still keeping the aspect ratio.
Let's see if that works,
we can always fine tune these later.
With that we got our image configured,
now to the Pizza container, there I'll import react and the component from react and then here, I will create
a new class pizza which extends component and where I will have a render method of course, in that render
method, method
I'll return some jsx and here I want to use my pizza info and my pizzaImage, excuse me.
So I'll import pizzaImage from
and now I need to go to the components folder, pizzaImage and get that PizzaImage.js file and
then here, I'll have a wrapping div let's say
and in there, I'll have a h1 tag where I'll say The Pizza
but more importantly below that, I'll include my PizzaImage component like this and that should give
me this pizza,
well, component with the class based approach. I'll then of course export pizza the class as a default,
I'm now copying this and putting it into the users.js file.
Now I won't import my pizzaImage here
and the component will be named users but here I'll then say the users and maybe I'll put a paragraph
too where I'll say awesome users on board of these course
and that's just any dummy content I want to output.
Now I've got two containers,
now I also want to load them via routing.
So in my app.js file, my root component I'll also import react and component like this from react
and then I'll create my class app which extends component and in there, I'll have my render method of
course return some jsx
and here we now want to use routing.
So first of all I'll add a div to wrap everything and in here,
I'll then have another div where I want to have two links.
So there I'll now import something from react router which we also haven't installed yet,
I'll import the link component from react-router-dom, again we will install these dependencies
in the next lecture and then I'll add my link here to just slash let's say, there with this link
I want to reach my users and the pizza part should be lazy loaded
so add just a pipe symbol and a whitespace to have some separator between the links.
So here, /pizza that is another link
but this component should eventually be lazy loaded
so here I'll name this pizza.
The interesting part now comes below that div here with the links,
here's the div where I want to render the routes and for that I'll import route from react-router-
dom.
Now here, there will be two routes,
the first route is simple, for the slash path which I want to match exactly,
I want to load a component and that should be my users component so I'll jump up to the imports and
import users from ./containers users.js
but then I'll also import the pizza
so here I'll add another import where I also import the pizza component from containers pizza
and with that I can now say that for the first route here, I want to render users, it's a self-closing element
for the second
where the path is /pizza, I want to render another component but this one should now be lazy loaded
and we learned how to load stuff lazily,
we wrote the code for this in the routing section, so I'll quickly grab the code from there,
you can also find it attached to this lecture or you get it from your own routing project,
the one you wrote when following along maybe
and this is a new higher order component which I want to add.
So I'll create a higher order component folder in the source folder and there I'll name it AsyncComponent.js
.
and now I'll quickly add that code we wrote in the routing section and I'll paste it into this
AsyncComponent.js file,
It's the same code as we wrote in the routing section.
Now we can use that and I want to use it in my app.js file,
so here, I'll import AsyncComponent from ./hoc AsyncComponent.js, by the way all the file
extensions are missing because I want to have the same set up as in create react app where it's
automatically adding these file extensions.
So now I import that, I won't import pizza like this anymore
instead this should now happen asynchronously.
So now what I'll do in my app.js file, I'll create a new constant outside of the class declaration and I'll name it
asyncPizza,
the name is up to you.
Important is that I'll use my asyncComponent function here and as you might remember, we need to pass
an anonymous function to it so I'll do that and in here,
I now want to return a dynamic import
and here I now point to the path I want to import from
so that's containersPizza, like this.
Now we can use the asyncPizza here as a component we want to load when navigating to /pizza.
This is my app set up thus far
now of course we need to mount this app, for that I need to go to the index.js file where thus far I only
import my css,
here I want to import react of course from react and I want to import react-dom from react-dom because
I need to render my react app to the dom
and again we will install all these dependencies soon.
I also need to import the browser router from react-router-dom and then I can create a new constant,
app that's optional where I will use the browser router as a wrapper
and I want to wrap my app component with it so I need to import that too, I will import app from
./app, like this.
So this gets wrapped here, that's the component,
so this part is what I actually want to mount to the dom, so I'll add react-dom render here at the bottom
to then render app in the place of this root element,
so this div with the ID root in the index.html file.
So for that, I'll now reach out to it with document_getElementById and then pick the root element here.
Now with all of that, our react application is mounted, it should be ready to work,
we'll see if it works once we actually can see it in action
and that's the part I'll start working on in the next lecture,
creating a workflow so that we can build this project and see if it does work.