In the beginning of this module I was extolling the virtues of React component and how wonderful it 1
is to be able to break down a large web site into individual compact and reusable components. 2
But up until now we've actually not used any components. 3
So in this lesson that's what we're going to tackle. 4
We're going to learn all about React components. 5
So go ahead and get the starting version of the sandbox from the course resources and then fork it 6
to have your own copy. 7
So if you remember previously when we had our code for the styling practice, you saw that it's kind of 8
getting out of hand right? 9
We actually have to scroll to be up to see the entire page. And a lot of research has actually found 10
that the more that you have to scroll and the longer a single file is, the harder it is to understand 11
the code that's in it. 12
So components really allow us to split up a large file or a complex web structure into smaller components. 13
And we also get the added benefit of reusing each of these components when we need the same functionality 14
which happens a lot on web. 15
So in the starting file, I've got this h1 and a unordered list, 16
so this is a bit of code that I've gotten from one of the previous lessons. And I want to show you how 17
we can actually split up this entire website into smaller components. 18
So the first thing I'm going to do is I'm going to create a heading component. 19
Now while at the moment it's just a simple h1 element and you would question yourself like, 'Do I really 20
need to split this into a separate component?' 21
But in reality as you can imagine once you've added all the styles and you'd probably have a div around 22
the heading you might have some sort of navigation bar. 23
I've kept the code intentionally simple just so we can easily see at a glance what's happening, but know 24
that in reality your head heading component is probably a lot longer and a lot more complex and definitely 25
worth splitting into a separate component. 26
So if I want to create a component that just has this h1, I would start by creating a function. 27
So I would give my function a name and notice how in this case its React convention to give your components 28
a name that is in Pascal case which means that every single word has the first letter capitalized. 29
And so in my case let me call this component heading and let's open up a set of parentheses and open 30
up a set of curly braces. 31
Now in this heading function, all that it's going to do is to return a HTML element that is created using 32
Javascript. 33
So I'm going to cut this h1 and I'm going to make it the output of my heading function. 34
So it's just going to return this h1. 35
Now I can use this custom heading component inside my React code as if it was an HTML element. 36
So I'm going to insert it back where I had it before right here, and I'm going to create it just as I 37
would for any other HTML tag, like so. 38
But notice where this React convention comes in handy. All of our components have names which start with 39
a capital letter using Pascal case. 40
And this allows React to differentiate between the custom components that we're building versus the 41
HTML elements that we're trying to get hold of that exists in the DOM. Now that we've created our heading 42
component and we've inserted in here as if it was an HTML element 43
you can see it shows up in our website in exactly the same position. 44
And what's happening behind the scenes is once it gets to this line, it looks for this custom component 45
called heading which it finds right here and then it triggers this function and outputs the h1 to replace 46
it in the location of this component. 47
Now remember that by convention again if we have a HTML element that has no children, 48
so nothing in between the opening and closing tags, then best practice is to actually have a self closing 49
tag. 50
So the name of the component, a space, a forward slash and the closing angle bracket. And in fact even 51
if you didn't do this and if you're in code sandbox and you've got the linter in place, if you hit save 52
it'll actually just replace it for you. 53
Now if you're wondering where I'm getting hold of all of these supposed best practices, this is the AirBn 54
B React JSX style guide, and it's generally accepted to be a good reference as to how to for example, 55
name things in your code or what to do with spacing 56
for example having a single space after the component and then the closing tags. So be sure to bookmark 57
this and refer to it whenever you are in doubt as to how you should be writing or structuring your code. 58
Now at the end of the day of course the compiler in the browser doesn't actually care, but it's a case 59
of having your code being easily readable by other programmers as well as to make it easy to understand 60
what's going on when you come back to it later on. 61
So in this case I've split off the heading into a separate component called heading but it's still living 62
inside my index.js right? 63
And you can imagine that if I had a very large website and I had all of my components cluttering index 64
.js that would be terrible. 65
So we're going to use a ES6 feature where we import our heading component from a separate file and it's 66
going to be very similar to what we're doing with React and ReactDOM. 67
But in this case we're going to be doing all of the importing and exporting ourselves. 68
So inside our source folder, I'm going to click on this icon to create a new file as it suggests and 69
that file is going to be called heading which is the name of my component, '.jsx'. 70
So I'm going to start using this JSX file name to denote all of my components which are going to 71
be written in JSX. 72
Again if you take a look at the convention we will usually leave index.js as a plain JavaScript 73
file even if we're using some React and some JSX in it. 74
And then we would have all of our components separated into individual files with the JSX extension. 75
Let's go ahead and move our heading component and cut it out of index.js and paste it into our 76
heading. 77
jsx. Now if you remember from previous lessons, I mentioned that in order to actually write this code 78
which is not actually Javascript it's in fact JSX because we have these HTML elements which are 79
intermingling with actual Javascript code and we're only able to do this because the React module actually 80
converts this into real Javascript using real JavaScript functions such as document.createElement 81
etc.. 82
So in order to use this code we of course have to import React from the React module. 83
So I'm going to copy that line and paste it at the top here and you're going to be doing this every 84
time you create a new React component. Now that we've imported React so we're able to write JSX code 85
and we've got this heading function which is a component that we want to use inside our index.js 86
right here, 87
how do we actually get this file to know about this file? 88
Well we have to use the ES6 import export functionality. In the file where we've got our component 89
we're going to export this heading function as the default export. 90
So I'm going to write 'export default Heading' and notice how I'm not going to add the parentheses because 91
this is going to make it return immediately, 92
instead I actually want to use it as a component 93
so inside a HTML tag like so. I've got my export default heading and now I can cap it off with a semicolon. 94
Now this file is creating a heading function and exporting it to whichever file needs it. 95
This is the file that needs it and in order to use it I'm going to import it. 96
So I'm going to import heading from that heading.jsx file. 97
So I'm going to use the relative path 98
so ./, and then heading. 99
jsx 100
But of course in ES6 the extension of the file is actually optional. 101
So if you had a file called heading.js or heading.jsx, you can actually remove the entire 102
extension and just have the name of the file. 103
It'll be able to figure out and find this file just with this amount of information. 104
Now all of our errors are gone and I've now got my heading being rendered in my website using ReactDOM 105
and I'm using my custom heading component which came from the heading file which is the heading. 106
jsx file that I've got right here and it's being created as a function that has an output. 107
Here's your turn to try it out. 108
I want you to create a custom component called list which will comprise of this unordered list and all 109
of the three items in it. 110
Try and see if you can remember how we imported heading from the heading file, how we created our custom 111
component. 112
And if you're successful you should you have to delete all of this and simply just have a list component 113
here and our website should work just as it did before. 114
Pause the video now and try to give this a go. 115
All right. 116
So here's our unordered list which we want to split off into a separate file. 117
So I'm going to go ahead and create a new file inside my source folder. 118
Make sure that you don't press on this button because that's just going to create a new folder and you 119
won't get to do anything with it. 120
So click on this button and let's create a new component. 121
And we said we'd call it list. .jsx is going to be the extension and then hit enter to create it. 122
Now inside all of our React components we mentioned that we need to import the React module in order 123
to actually be able to write JSX. 124
So we've got that import heading in there and then we're going to create a function that's going to 125
return this unordered list item. 126
So let's copy that and over here I'm gonna create my function called list. 127
And then inside this function I'm going to return everything that used to be in my index.js which 128
is my unordered list and the three list items. 129
So now all I have to do to ship this function over to here or any other file that needs it, is to export 130
it as the default. 131
And the thing that I want to export is of course this function called list, without the parentheses. 132
So now that I've created my custom component over here I can now replace all of this with my custom 133
list component which is again going to be a self closing tag because it has no children, so nothing in 134
between the open and closing tags. 135
Now I'm getting an error here because it says list is not defined and that is because we need to import 136
this list from that file ./list. 137
And that way it'll actually know about that function called list and be able to use it in here and 138
render it as the custom component. 139
Now normally what you'll see in the index.js of a lot of React apps is they don't actually have any 140
HTML elements like a div or an h1 or anything like that. 141
Instead, what you'll see is it just has a custom component called App. And instead of all of these things, 142
we would have a custom file called App.jsx and inside here we would have all import statements 143
our import React as well and we would render our component as a function called App which returns a div 144
which contains that heading custom component as well as the list custom component. 145
And then it will export this as the default export and be able to use it inside here by importing App 146
from ./App 147
So this is the most common structure that you'll see. 148
So index.js has pretty much no custom code 149
other than rendering the React app and then in our App.js we've got the start of our component 150
tree and then we start seeing these HTML elements as well as custom components. 151
So in this lesson we've seen how we can split up a very simple structure which we've got here into custom 152
components. 153
And this way our code is now a lot more modular. 154
Each of these files are a lot shorter and a lot more manageable. 155
And remember that each of these components can now be reused as and when we want to. 156
So if I wanted another list down here for some reason, then I can just create another list component 157
without having to write out or the uls or lis etc.. 158
And as we learn more about these components and how to use things such as props, we'll be able to customize 159
these components to an even higher degree. The last thing I want to mention in this lesson is that usually 160
in React apps you will have a lot of component files. And as you can imagine if you have 20 or 30 of 161
these then this whole list is going to start needing some structure. 162
So the very basic thing we should do is to at least create a new directory called components and inside 163
this directory we'll drag in all of our React components. 164
Now of course as your app gets more complex then you would probably start splitting off this component 165
folder into even sub folders like a login screen component or a register screen component or subdivisions 166
just to make your files more easily manageable. 167
But now that we've moved all our components into a separate folder, our index.js is going to break 168
because our App.jsx is no longer at the same level. 169
So we now have to change this relative path to ./components/App and now everything starts 170
working again. In the next lesson we're going to get some more practice with React components and you're 171
going to be separating out some components from a index.js file that is clearly on its way to turning 172
into spaghetti code. 173
So for all of that and more, I'll see there.