Coding

ReactJS Basics – #4 Multiple Components

  • 00:00:00 welcome back so we had a look at how we
  • 00:00:03 create and load our react component and
  • 00:00:07 that's fine and as I said many times
  • 00:00:09 before you can't create individual
  • 00:00:11 components and then just render them in
  • 00:00:13 the Dom but you can also combine
  • 00:00:15 components together I will do that and
  • 00:00:19 for this I will create a new folder in
  • 00:00:20 my app folder which I'll name components
  • 00:00:23 and that's a good convention in your
  • 00:00:25 react.js projects to store your
  • 00:00:28 components in such a folder now I want
  • 00:00:31 to create two new components in my
  • 00:00:33 application I want to have a home
  • 00:00:37 component basically like the main page
  • 00:00:40 content you will see and a header
  • 00:00:43 component at the top where is say let's
  • 00:00:47 say a split in an application which
  • 00:00:49 makes sense I believe so let's procreate
  • 00:00:52 both a hetero chess file and it's also a
  • 00:00:55 convention to have the uppercase name
  • 00:00:59 you're starting with an uppercase
  • 00:01:00 character like header here and then I'll
  • 00:01:03 create a new file home dot not humor
  • 00:01:06 nothing to do with the simpsons here
  • 00:01:08 home is well let's start with the header
  • 00:01:11 file
  • 00:01:12 I'll pull and react again from react and
  • 00:01:16 I don't need to import render from the
  • 00:01:19 react Dom because I'm not going to
  • 00:01:22 render this component directly into my
  • 00:01:24 HTML file I'll not target an element
  • 00:01:28 mark by me instead I will include it in
  • 00:01:31 this app component later on and you will
  • 00:01:33 see how to do that so I will only need
  • 00:01:36 to create my component here and I will
  • 00:01:38 export it to make it available outside
  • 00:01:40 of this file because I want to use it in
  • 00:01:42 my index dot J's file later on then I
  • 00:01:45 will again create a class header which
  • 00:01:48 should extend my react component that's
  • 00:01:50 the general pattern you follow when
  • 00:01:52 creating components and then I add the
  • 00:01:55 render method to it and any year I
  • 00:01:58 return of course my code again my HTML
  • 00:02:02 code so to say and I'll treat an AF it's
  • 00:02:05 not a navigator an app element for that
  • 00:02:08 give it a class name of nav or
  • 00:02:11 navbar default that's just some
  • 00:02:13 bootstrap styling here to get a nice
  • 00:02:16 looking navigation bar and in there I
  • 00:02:20 want to create a container with Chas
  • 00:02:25 enough navbar header class inside so
  • 00:02:29 that's all bootstrap I definitely check
  • 00:02:32 out bootstrap to learn more about it
  • 00:02:33 that's no bootstrap course just want to
  • 00:02:36 get a nice looking header and then you
  • 00:02:38 could have multiple links here in an
  • 00:02:40 unordered list where I know the class is
  • 00:02:44 not class name the class and snap and
  • 00:02:46 navbar nav so a lot of navbar stuff here
  • 00:02:50 does just how bootstrap named their
  • 00:02:51 classes and then I'll have a list item
  • 00:02:54 with the actual link which won't work
  • 00:02:56 for now by the way so I'll come to
  • 00:02:59 routing in a later video for now I'll
  • 00:03:00 just create this basic link so that's a
  • 00:03:03 lot of code for it's just something
  • 00:03:05 saying home but it should look nice in
  • 00:03:07 the end of that let's go to the home
  • 00:03:09 Chasse file in here I'll again pull in
  • 00:03:12 react from react don't need render here
  • 00:03:15 too because it will use this component
  • 00:03:17 in my app component in the index touch
  • 00:03:19 as file to export it of course home
  • 00:03:24 extend react component so again that's
  • 00:03:27 how you create your components then
  • 00:03:29 define what should get rendered and I
  • 00:03:32 will come to other methods you can use
  • 00:03:34 in future videos too but render is the
  • 00:03:36 most important one basically here and
  • 00:03:39 then just make sure to return something
  • 00:03:43 here to let's say a div and that I'll
  • 00:03:46 say in a new component yay isn't that
  • 00:03:50 great so with that I get my component
  • 00:03:54 set up time to go back to the index.js
  • 00:03:57 file and here I need to make some
  • 00:03:59 adjustments well I will import my newly
  • 00:04:03 created components so it will import
  • 00:04:05 header from my components folder and
  • 00:04:10 then from the header file and you don't
  • 00:04:12 specify your file extension here so you
  • 00:04:15 can leave out the dot j/s that will all
  • 00:04:18 be hemmed by webpack and then i'm just
  • 00:04:20 duplicating this import to also include
  • 00:04:24 I hope component of course also adjusted
  • 00:04:27 here to pull in home and then I can use
  • 00:04:29 both components like HTML tags in my app
  • 00:04:33 component here so I only got my
  • 00:04:36 containers set up here and then I want
  • 00:04:40 to add my header here at the top and I
  • 00:04:42 can simply create an HTML tag named
  • 00:04:45 header for that with that I'll just copy
  • 00:04:48 the row here and create this again but
  • 00:04:53 this time of course name it home to load
  • 00:04:55 my home section and I could also still
  • 00:04:58 include some text in here or something
  • 00:05:01 like that right so I can still write
  • 00:05:03 code in this component itself not only
  • 00:05:06 include other components and actually
  • 00:05:07 I'm doing that with all these divs here
  • 00:05:10 so with that after I save it it already
  • 00:05:13 got updated and you can see here's my
  • 00:05:15 nav bar and my new component is home
  • 00:05:18 component and that is how easily you
  • 00:05:20 create new components the pattern is
  • 00:05:22 always the same and then you include
  • 00:05:24 them like HTML code in your existing
  • 00:05:27 components you can't include these tags
  • 00:05:30 here in the index.html file because well
  • 00:05:33 the browser has no chance of identifying
  • 00:05:36 what that is but react.js has a chance
  • 00:05:39 of doing so because we tell it here at
  • 00:05:41 the top we link everything together and
  • 00:05:44 keep in mind any background this is no
  • 00:05:47 HTML code it's JavaScript code it just
  • 00:05:50 looks nicer but by writing this we're
  • 00:05:53 not really creating an HTML tag which
  • 00:05:56 looks like that instead we're telling
  • 00:05:58 react.js hey please include the
  • 00:06:02 component which you import from there in
  • 00:06:04 this place and that is how you let
  • 00:06:07 components well work together kind of or
  • 00:06:10 combined together regarding you work
  • 00:06:13 together part that's something I'll come
  • 00:06:15 to in the next two videos