Coding

ReactJS Basics – #3 First Component

  • 00:00:01 well that really was a long way to the
  • 00:00:03 first component wasn't it but it was
  • 00:00:05 worth it it's so important to understand
  • 00:00:07 what you're doing and with what you're
  • 00:00:09 working so let's start with the first
  • 00:00:12 component then I told you that react.js
  • 00:00:14 is all about building UIs and well
  • 00:00:17 components so how do we build such
  • 00:00:19 components
  • 00:00:20 it all starts by importing react we're
  • 00:00:23 using es6 import syntax for that
  • 00:00:26 importing it from react that's the
  • 00:00:28 package name and import something from
  • 00:00:34 react dawn now I'm getting some IDE
  • 00:00:37 errors here because my IDE still thinks
  • 00:00:40 I'm writing es6 code so just yeah think
  • 00:00:44 you'll change this no I have paper set
  • 00:00:47 up on my own all the IDE magic here well
  • 00:00:50 so pull in something from react Tom and
  • 00:00:53 to something is the render method which
  • 00:00:55 allows me to render my component later
  • 00:00:57 on to the dawn so with that I got only
  • 00:01:00 required dependencies now it's time to
  • 00:01:02 create a component as well how do you do
  • 00:01:05 it it's actually really simple you
  • 00:01:07 create a new class with this year six
  • 00:01:10 class keyword name it whatever you want
  • 00:01:12 to name it I'm going to name mine app
  • 00:01:14 since it's my first component my root
  • 00:01:17 component kind of and then this is
  • 00:01:20 important it has to extend the base
  • 00:01:24 component in the react package so react
  • 00:01:27 component with that boom you get a new
  • 00:01:32 component but not a very useful one
  • 00:01:34 right now components have a lot of built
  • 00:01:38 in methods you can use and I will come
  • 00:01:40 back to them in a later video when I
  • 00:01:42 talk about the component lifecycle a
  • 00:01:44 very important method you need to have
  • 00:01:47 if you want to have your component do
  • 00:01:50 anything which you can see on the screen
  • 00:01:51 is the render method this method is
  • 00:01:55 called by react.js whenever react.js
  • 00:01:58 thinks it needs to render the component
  • 00:02:00 and I'll come back to when it thinks it
  • 00:02:02 needs to render a component
  • 00:02:04 the labor with you basically it has a
  • 00:02:07 right way of thinking so it will
  • 00:02:09 rerender it when it's necessary and then
  • 00:02:11 you define what it has to do when
  • 00:02:13 rendering this component now you might
  • 00:02:16 have noticed that until now we have no
  • 00:02:18 place where we store the HTML code and a
  • 00:02:21 component of course is not only about
  • 00:02:24 JavaScript it's also about HTML code
  • 00:02:26 right it's about elements which get at
  • 00:02:29 added do to DOM a div a button something
  • 00:02:32 like that now here is where react es can
  • 00:02:37 make you feel uncomfortable if you're
  • 00:02:40 totally new to it and are used to the
  • 00:02:42 clear separation of HTML and JavaScript
  • 00:02:46 this render method needs to return
  • 00:02:48 something and it needs to return what
  • 00:02:51 should be rendered
  • 00:02:52 I'll enclose it in parentheses and then
  • 00:02:56 here is what I want to have rendered a
  • 00:02:58 div and yes
  • 00:03:04 switch to JSX X thank you a div and
  • 00:03:11 let's say then something like a h1 tag
  • 00:03:14 where we say hello whoa that is strange
  • 00:03:21 HTML code in that JavaScript file well
  • 00:03:25 I'm actually not kidding you that is JSX
  • 00:03:29 as the creators of react named it it's
  • 00:03:33 JavaScript mixed with XML or HTML here
  • 00:03:38 and well it looks like we're writing
  • 00:03:42 HTML code while behind the scenes this
  • 00:03:46 will be transferred to JavaScript code
  • 00:03:48 creating the appropriate elements so
  • 00:03:51 you're probably aware that you can treat
  • 00:03:54 the element in plain vanilla JavaScript
  • 00:03:56 with something like document create
  • 00:04:00 element and then you could say a div and
  • 00:04:03 so on and that is what's happening here
  • 00:04:06 in the background but that of course is
  • 00:04:07 a much more convenient way to write it
  • 00:04:09 so we write the code which you want to
  • 00:04:11 have on our page in a chava script file
  • 00:04:14 and it's perfectly fine to do so
  • 00:04:17 so that would be the very simple first
  • 00:04:19 component it only displays hello and
  • 00:04:21 I'll stylus a little bit more soon but
  • 00:04:25 for now let's display it in the
  • 00:04:28 application and that leads us to the
  • 00:04:30 next question how do i render this app
  • 00:04:32 it's nice that we have it but thankfully
  • 00:04:35 react.js is not going to take our page
  • 00:04:38 and replace everything with that HTML
  • 00:04:41 code that would be a rubber bat behavior
  • 00:04:43 instead I'll go back to my index.html
  • 00:04:46 file and I'll set up a hook where I want
  • 00:04:49 to render this it'll be a simple death
  • 00:04:52 with an ID of your choice I'm using app
  • 00:04:55 here and I will tell react.js to
  • 00:04:59 basically render my component in this
  • 00:05:03 place here we already have the point I
  • 00:05:07 was talking about in my first video in a
  • 00:05:10 series react.js doesn't necessarily
  • 00:05:14 create a single page application you can
  • 00:05:17 tell it where to render individual
  • 00:05:19 components in your view you don't have
  • 00:05:22 to control your complete view with
  • 00:05:24 react.js though that's what I'll do in
  • 00:05:27 this serious and what you will see in a
  • 00:05:30 lot of reactions you don't have to do it
  • 00:05:32 you can't just build single widgets or
  • 00:05:35 components which you dump into your
  • 00:05:38 normal view and that is totally fine and
  • 00:05:41 that actually is what react.js was
  • 00:05:44 created for in the beginning so back
  • 00:05:47 into your next chest file we have to
  • 00:05:48 tell react that we want to render it in
  • 00:05:51 this divs place i will call the render
  • 00:05:54 method from react dom for that and then
  • 00:05:58 i first tell it what to render that is
  • 00:06:01 my app and i define it like an HTML tag
  • 00:06:05 if you're coming from angular 2 that
  • 00:06:08 looks familiar that is like you use
  • 00:06:10 these selectors in HTML and angular 2
  • 00:06:13 app here is of course the name of my
  • 00:06:16 class and then I just enclose it in
  • 00:06:18 opening and closing tags whoops that's
  • 00:06:21 the first argument of the render method
  • 00:06:22 the second argument is the place where I
  • 00:06:25 want to render it the place shall be
  • 00:06:27 without a document and then get PI ID
  • 00:06:31 get element by a hoops by ID and then
  • 00:06:35 the ID was app with that it should
  • 00:06:40 render it there that I'm getting an
  • 00:06:41 error let's see yeah that's a rather
  • 00:06:44 annoying error here module that should
  • 00:06:47 be module so restart the web pack
  • 00:06:51 process here didn't throw this error in
  • 00:06:53 these setup video of course because well
  • 00:06:56 there we didn't use react now it should
  • 00:06:58 work and we see hello here so sorry
  • 00:07:01 about this error really annoying but
  • 00:07:04 with that we got our first working
  • 00:07:07 component and before I finish this video
  • 00:07:09 I want to point out an important thing
  • 00:07:12 about this component or about react in
  • 00:07:14 general in this return function here you
  • 00:07:19 can only return one element now you
  • 00:07:22 might say we're returning to yes next
  • 00:07:24 elements that's fine but only one root
  • 00:07:27 element so here a div it wouldn't work
  • 00:07:30 if I have a sibling div next to it that
  • 00:07:34 my ID already doesn't like it that will
  • 00:07:37 not work because here only one element
  • 00:07:41 may be returned and also before I leave
  • 00:07:44 I want to add some styling so I'll head
  • 00:07:47 over to get bootstrap comm to get the
  • 00:07:50 default bootstrap styling so that
  • 00:07:52 everything looks a bit nicer without me
  • 00:07:55 having to write quite a lot of code and
  • 00:07:57 I will import it here in my index file
  • 00:08:00 at the end of the Hat section like that
  • 00:08:02 and with that I'll go back to my
  • 00:08:05 index.js file and use my bootstrap
  • 00:08:07 Styles here now you might think that we
  • 00:08:10 use class like we do but keep in mind it
  • 00:08:14 looks like HTML code here but it isn't a
  • 00:08:17 real HTML code it's JavaScript it just
  • 00:08:21 looks nice or something some syntactical
  • 00:08:24 sugar therefore we have to use class
  • 00:08:27 name here not class and that's just
  • 00:08:30 something you have to keep in mind class
  • 00:08:33 name is it here if you're lucky you
  • 00:08:35 have an IEE which helps you like I do
  • 00:08:37 otherwise that's reaches something to
  • 00:08:39 memorize so this will get the container
  • 00:08:41 class then I'll add a row thankfully
  • 00:08:45 Emmet my plug-in also knows I'm in JSX
  • 00:08:48 here and then I'll just provide some
  • 00:08:53 columns here so that's all just some
  • 00:08:55 bootstrap stuff to make it look nice
  • 00:08:59 basically like so and then I grab my
  • 00:09:04 hello element here again saved is it'll
  • 00:09:09 automatically reload and if you go back
  • 00:09:11 to your application you will see the
  • 00:09:12 restyle thing without having to refresh
  • 00:09:15 the browser that's the great thing about
  • 00:09:17 web page server here it automatically
  • 00:09:19 reloads everything and if you got hot
  • 00:09:21 reloads hot module loading working then
  • 00:09:24 it even does this without reloading the
  • 00:09:27 page automatically it just changes the
  • 00:09:29 page of the background so with that we
  • 00:09:32 built our first component you'll learn
  • 00:09:34 that this render method is very
  • 00:09:36 important that you may only have one
  • 00:09:37 root element in here that you then tell
  • 00:09:40 react where to render this component in
  • 00:09:43 your view and how it gets rendered there
  • 00:09:47 and with that I think we're well
  • 00:09:49 prepared to move on to the next lecture
  • 00:09:51 where I'll have a look at multiple
  • 00:09:53 components working together see you
  • 00:09:56 there