Now in this refresher course module here, we'll not write a complex React app because that's simply
not the idea of this module.
We will write a realistic app in the main module later in this course
after this module here where we will work on the course project.
So that's just a refresher here and I focus on the core React elements therefore and not on building
an amazing application.
So, React is all about components and therefore typically we split our app in components.
Now let's start without splitting it though and instead of outputting a h1 tag, here in app, I will
use a div let's say and in that div, let's add more HTML code.
I'm saying HTML here, of course it's jsx but it is translated to HTML, to DOM nodes in the end,
right
but it is jsx.
So here, we could have a h2 tag where we say course goals and below that, we want to have a list, an
unordered list of our course goals and there,
a goal could be that we want to finish the course, that we want to learn all about the course
main topic and that we want to let's say help other students in the course Q&A section and that could
be some goals.
Now a very trivial application,
now I don't have any special spectacular styling here which is why we save that and we get this output.
Now I will add some styling and for that I will add an app.css file here and import that file into
the Javascript file,
this of course is not possible in vanilla Javascript but because of that under the hood tooling which
in the end analyzes our files and then transforms the code, this is possible and this is simply transformed
to inject this CSS code into the HTML file as well.
Now here, I'll give this a CSS class and there is one special thing, the class attribute like this doesn't
exist
in jsx because class is a keyword in Javascript, so it is class name and this is how you add CSS
classes to elements in jsx.
This also of course is kind of a proof or reminds you of the fact that this is not HTML but HTMLish
looking syntax. I'll name this class goal list here and now in here, we can define some styles for
the goal list here and I will simply set list style to none here,
remove a margin or give it a margin of 2rem top and bottom and a padding of 0
and on every goal list item, I will add a margin of 1rem
top and bottom, 0 to left and right
and then simply a border of 1 pixel solid
and then this grayish color here and a padding of 1rem and this is very simple styling because
I don't want to spend a lot of time on writing CSS styles here. Now maybe one adjustment,
let's actually give the list a margin of 2rem in all directions.
Now we have this list of our goals, to adjust the course goals here at the top,
I will also give this div a class name of course goals and then in the CSS file, maybe at the very top,
we can style course goals and there, the h2 tag to be aligned in the center,
just like that. Now
again, very huge goals but that is OK for this course here,
we're just practicing React. So we got these course goals here,
awesome,
this of course is a very simple markup.
Now what you often what do in React as you would split this into more components, you would for example
outsource this list into a separate component to keep every component on its own relatively lean and
focused on one task.
For that you can add a components subfolder here in the source folder and in there, I will add a
GoalList.js file,
this will hold my goal list component.
Now to create such a new component, we first of all have to import React from React
otherwise we can't use this jsx syntax and then I mentioned that a component is a function
and by the way you can also create it with the function keyword or with the function expression or with
the arrow function syntax I used before, which is the syntax I will use here but that is not a must do.
And then here I export my goal list like this
and now in here, I return this unordered list. So I'll cut it here and then add it
here as a return value and if I reformat that, you see automatically these parentheses are added around
it so that this can be nicely formatted across multiple lines,
otherwise this would not be valid Javascript. So this, with the parentheses it is because then Javascript
knows that this block belongs together.
So now we have the goal list in here and in app.js,
we can now import our goal list component,
you can name this here however you want, doesn't have to be the same name as under which you export it
here, only important thing is that it has to start with an uppercase character here in app.js
and I import it from the components folder and there from goal list
and as I mentioned earlier, you can omit the file extension here,
it's not required and then here you use goal list like a regular jsx element, like a regular HTML
element you could say
But since we have no content between the opening and closing tag, we can and we have to write a self
closing tag here,
this would not be allowed,
you always have to close tags in jsx. So this would now be my goal list component and therefore
if we save this, we see the same output as before. We also get the same styling because styles here are
always applied globally,
even if you import them into a specific component file and still it is a good practice to setup the
styles in the CSS file next to the component they belong to,
hence I will add a GoalList.css file,
add my goal list styles there and import that GoalList.css file into the GoalList.js file.
This is not a must do but it makes it easy to find the styles that belong to this component,
keep in mind that styles are not automatically scoped to a component though, the normal CSS rules are
applied because all the CSS files,
no matter where you import them, are applied globally to your entire page.
With that though, we're back to the same result as before.
So why did we do that
then? Why do we split this up if we have the same result as before?