Coding

ReactJS Tutorial for Beginners – Getting Started with React

  • 00:00:00 welcome to this video great to have you
  • 00:00:03 here this video here is a collection of
  • 00:00:06 my extremely comprehensive react course
  • 00:00:09 I offer on udemy a link to the course of
  • 00:00:12 course can be found in the video
  • 00:00:13 description with a nice discount this
  • 00:00:16 course on udemy is an extremely deep
  • 00:00:19 diving react course starting at the
  • 00:00:21 basics and then moving through all the
  • 00:00:23 core topics like react router redux
  • 00:00:26 animations authentication and much more
  • 00:00:28 in this video here I give you a very
  • 00:00:30 extensive sneak peek into the course
  • 00:00:32 covering the entire first and second
  • 00:00:35 module of my react course I hope you
  • 00:00:38 enjoy it and I hope you learned a lot
  • 00:00:39 about react obviously it would be great
  • 00:00:41 to also welcome you in the udemy course
  • 00:00:44 if you like this
  • 00:00:53 welcome to discourse about react it's
  • 00:00:56 great to have you on board
  • 00:00:57 my name is Maximilian Schwarz Miller and
  • 00:01:00 I'm a freelance web developer and react
  • 00:01:02 developer I worked with react a lot and
  • 00:01:05 I can tell you it's an amazing library
  • 00:01:07 for creating highly reactive and super
  • 00:01:09 fast JavaScript driven web applications
  • 00:01:12 the JavaScript driven part is especially
  • 00:01:15 important because since react is a
  • 00:01:18 JavaScript library it's of course about
  • 00:01:20 writing your web apps in JavaScript and
  • 00:01:22 dead and turn is amazing because since
  • 00:01:25 JavaScript runs in the browser it allows
  • 00:01:28 you to create super fast web apps that
  • 00:01:30 feel like mobile apps users don't have
  • 00:01:33 to wait for Pedro loads now react is
  • 00:01:36 probably the most popular JavaScript
  • 00:01:39 library you can learn these days and for
  • 00:01:42 a good reason you will learn all of its
  • 00:01:45 core features throughout this course and
  • 00:01:46 way more than that you will learn what
  • 00:01:49 reactor's about how it works and why you
  • 00:01:52 might want to use it you will learn how
  • 00:01:54 to build components with react how to
  • 00:01:56 use read acts for better state
  • 00:01:58 management how to use the react router
  • 00:02:00 and you'll not just learn this in simple
  • 00:02:03 projects or a theory
  • 00:02:04 no we will build an entire react
  • 00:02:07 application throughout this course the
  • 00:02:09 Burger builder which is an amazing
  • 00:02:12 application utilizing all the concepts
  • 00:02:14 you'll learn in this course so that you
  • 00:02:16 have a really solid understanding of all
  • 00:02:19 the concepts taught throughout this
  • 00:02:21 course by the end of the course you'll
  • 00:02:23 therefore have way more than just a
  • 00:02:25 solid understanding of react and you'll
  • 00:02:28 be able to dive deeper into more
  • 00:02:30 challenging projects and apply for react
  • 00:02:33 developer chops or become a react
  • 00:02:35 developer as a freelancer whatever your
  • 00:02:37 goal is
  • 00:02:45 so let's get started with react what why
  • 00:02:48 and how let's start with the what is
  • 00:02:51 react question and let me cite a phrase
  • 00:02:54 from the official react page react is a
  • 00:02:57 JavaScript library for building user
  • 00:02:59 interfaces now that's a nice sentence
  • 00:03:02 but what does it mean
  • 00:03:03 the first important part is the
  • 00:03:05 JavaScript library part it is a
  • 00:03:07 JavaScript library it is about building
  • 00:03:10 JavaScript driven apps react apps run in
  • 00:03:14 the browser they don't run on the server
  • 00:03:16 they run in the browser and that gives
  • 00:03:18 us a great advantage things happen
  • 00:03:21 instantly since they happen the users
  • 00:03:23 browser we don't have to wait for a
  • 00:03:25 server response to get a new page or to
  • 00:03:27 render something new the other important
  • 00:03:30 part in that sentence is the user
  • 00:03:32 interfaces part user interfaces are
  • 00:03:35 basically what the user sees and react
  • 00:03:38 is all about using components for
  • 00:03:41 building these if you think about it you
  • 00:03:44 can split up any web page into
  • 00:03:46 components here's an example this is
  • 00:03:49 just any random web page we can think of
  • 00:03:51 we might have this header area a sidebar
  • 00:03:54 and then on the right some content now
  • 00:03:57 we clearly can split this up into
  • 00:03:59 components we would have a header
  • 00:04:01 component a sidebar component and then a
  • 00:04:04 headline and an article content
  • 00:04:06 component now why is thinking like this
  • 00:04:09 important or useful because if we split
  • 00:04:13 up our web app our website into such
  • 00:04:16 components we can build these building
  • 00:04:20 blocks these components as contained
  • 00:04:23 pieces of code we don't have to build
  • 00:04:26 our entire web page as one bigger
  • 00:04:28 picture we can build all these tiny
  • 00:04:31 things on their own this of course makes
  • 00:04:33 working in teams easier but even if
  • 00:04:35 we're working alone it makes it easy for
  • 00:04:37 us to keep our code manageable if we
  • 00:04:41 change the headline later on we only
  • 00:04:43 have to go into that component and
  • 00:04:45 update it and we don't have to find that
  • 00:04:47 code on our entire web page code we also
  • 00:04:50 can easily reuse components then if we
  • 00:04:53 have a list item component and we want
  • 00:04:55 to output a list of these well list
  • 00:04:58 items
  • 00:04:59 we only have to write the code once and
  • 00:05:01 can then easily reuse it because and
  • 00:05:04 that's important react components can be
  • 00:05:07 thought of as custom HTML elements in
  • 00:05:10 the end you're just writing custom HTML
  • 00:05:13 elements this is what react is about and
  • 00:05:17 it therefore solves the problem of
  • 00:05:19 having to build complex user interfaces
  • 00:05:22 with what HTML and JavaScript gives you
  • 00:05:25 by writing maintainable manageable and
  • 00:05:28 reusable pieces of that code which you
  • 00:05:32 then can throw into your web app
  • 00:05:33 wherever you need to use it let's have a
  • 00:05:36 look at some examples
  • 00:05:44 so in the last lecture I explained that
  • 00:05:47 react is all about components and that
  • 00:05:49 components are awesome let's actually
  • 00:05:52 see this on a real webpage
  • 00:05:54 here's react.js org which is the
  • 00:05:57 official web page of the react team and
  • 00:06:00 if we have a look at it it is actually
  • 00:06:02 built with react of course this looks
  • 00:06:05 like a normal webpage and it is of
  • 00:06:07 course but we can't split this up into
  • 00:06:09 components we got this header component
  • 00:06:12 and in there we got these single
  • 00:06:14 navigation item components we got this
  • 00:06:17 starting image call-to-action component
  • 00:06:20 here and we got all our elements down
  • 00:06:24 here where they advertise react and what
  • 00:06:27 it is about we see more components here
  • 00:06:30 like these image code snippet components
  • 00:06:33 here with some descriptions to the left
  • 00:06:35 of it all these things are basically
  • 00:06:37 building blocks which we can of course
  • 00:06:39 easily consider as reusable pieces and
  • 00:06:42 actually they are reusing this element
  • 00:06:45 here we got one element here and then
  • 00:06:48 the same element with different content
  • 00:06:50 being used below it
  • 00:06:52 now of course you can hard code all that
  • 00:06:54 with just HTML Javascript and CSS but
  • 00:06:58 then you will have to repeat your coat
  • 00:06:59 over it over again here with components
  • 00:07:02 you build your own HTML elements so to
  • 00:07:05 say and then you just reuse that element
  • 00:07:07 and behind the scenes this HTML element
  • 00:07:10 has all this content already inside of
  • 00:07:13 it and we'll see this in detail in a
  • 00:07:15 second another good example would be
  • 00:07:19 udemy here on the udemy page where i
  • 00:07:21 searched for you KS and alternative to
  • 00:07:24 react dare we see we get a lot of
  • 00:07:26 components – we got the whole header
  • 00:07:28 with the search bar component then we
  • 00:07:31 got these search results summary
  • 00:07:32 component here where it also allows us
  • 00:07:34 to filter the search results and then
  • 00:07:37 the search results themselves
  • 00:07:39 we got reused list item components here
  • 00:07:42 each of them has an image in a different
  • 00:07:44 title but in the core they all are the
  • 00:07:47 same they all have the same structure
  • 00:07:48 and udemy also uses a JavaScript
  • 00:07:52 framework to achieve this and to have an
  • 00:07:54 easier time developing and then that's
  • 00:07:57 important
  • 00:07:57 maintaining and updating this page so
  • 00:08:00 this is why components are awesome and
  • 00:08:02 why we as a developer probably want to
  • 00:08:04 use components and dadoes while react is
  • 00:08:07 all about components
  • 00:08:15 now that we know what react actually is
  • 00:08:18 it's time to get our hands dirty and for
  • 00:08:21 that I was at code pen dot IO that is
  • 00:08:25 like a web editor which allows us to
  • 00:08:27 write very simple HTML CSS and
  • 00:08:30 JavaScript apps or really more like a
  • 00:08:32 playground we won't really use that to
  • 00:08:35 build real projects in this course we
  • 00:08:37 will use a local set up for that but it
  • 00:08:40 is great to dive into react so on code
  • 00:08:43 PennDOT IO
  • 00:08:44 you can click on create and create a
  • 00:08:46 so-called pen that is simply a workspace
  • 00:08:49 where you can write HTML CSS and
  • 00:08:51 JavaScript code now in this editor
  • 00:08:54 you've got three areas for HTML CSS and
  • 00:08:57 JavaScript and now let's write a very
  • 00:09:00 simple application a demo to see how we
  • 00:09:03 write something with normal HTML
  • 00:09:05 javascript and so on and how we then add
  • 00:09:08 react you maybe have an easier time
  • 00:09:10 creating such an application weird add
  • 00:09:13 in the HTML part of this editor altered
  • 00:09:16 a new div and you can quickly create
  • 00:09:18 this by typing div and hitting tab this
  • 00:09:20 will automatically expand this and then
  • 00:09:22 there I will now add a h1 tag and
  • 00:09:25 somebody output max my name and below
  • 00:09:29 that a paragraph phrase say your age 28
  • 00:09:33 this is my age and of course feel free
  • 00:09:34 to use your data here so this now leads
  • 00:09:38 to the output below it updates
  • 00:09:39 automatically now let's quickly give to
  • 00:09:42 some styling let's simply give this TIFF
  • 00:09:46 maybe a class of let's say person the
  • 00:09:49 name is up to you and add this person
  • 00:09:51 CSS class with some normal CSS code
  • 00:09:53 where I simply give this say a border
  • 00:09:56 one pixel solid and this gray with CCC
  • 00:09:59 and a box shadow off 0 2 pixels 2 pixels
  • 00:10:04 and let's say the same gray let's maybe
  • 00:10:08 lose us use a slightly brighter one here
  • 00:10:12 for the border
  • 00:10:13 let's now also gift us a width of let's
  • 00:10:16 say 200 pixels and a padding of 20
  • 00:10:20 pixels and now we have this card like
  • 00:10:23 look you see below there now that is
  • 00:10:26 such a person card information
  • 00:10:29 holding information about a person let's
  • 00:10:31 say we can also set this to
  • 00:10:35 display:inline-block and give it a
  • 00:10:39 margin of 10 pixels because now what I
  • 00:10:41 can do is I can of course replicate this
  • 00:10:44 and add a second person let's say menu
  • 00:10:47 who has a age of 29
  • 00:10:50 that's my colleague so now we've got
  • 00:10:53 these two person cards and you could
  • 00:10:55 easily think of this as a normal web
  • 00:10:59 application where you output some
  • 00:11:00 information about users or about the
  • 00:11:03 team behind your blog you're creating
  • 00:11:06 something like that we're using only
  • 00:11:08 HTML and CSS here now we can already see
  • 00:11:11 one limitation kind of we're always
  • 00:11:14 reusing the same HTML code here now that
  • 00:11:18 isn't too problematic here it would be
  • 00:11:21 more problematic if we would do
  • 00:11:22 something with each of these snippets
  • 00:11:24 with JavaScript even but even without
  • 00:11:27 that we can think of this part here as a
  • 00:11:29 component this person did always is
  • 00:11:33 structured in the same way just the data
  • 00:11:35 inside of it varies this is where react
  • 00:11:38 comes in though react shines the most as
  • 00:11:41 we connect this to JavaScript logic tube
  • 00:11:43 but still we can already use react to
  • 00:11:46 create reusable components here for that
  • 00:11:49 let's add react I'm going to shrink this
  • 00:11:51 CSS part a tiny bit and any JavaScript
  • 00:11:54 area I first of all have to import react
  • 00:11:57 you can click on that gear icon next to
  • 00:12:00 JavaScript and then you can download or
  • 00:12:03 import some external javascript
  • 00:12:05 libraries and react is such an external
  • 00:12:08 library actually it's so popular that on
  • 00:12:11 code pen you can go to the quick add
  • 00:12:14 drop-down and simply scroll to react and
  • 00:12:17 this will add it now here it adds
  • 00:12:20 version 15 dot 6.1 might differ at the
  • 00:12:23 point of time you're viewing this in
  • 00:12:25 this course I will cover version 16 so
  • 00:12:28 you're learning the latest react and
  • 00:12:30 then the local setup we'll use in this
  • 00:12:32 course we'll also use that latest react
  • 00:12:35 version no worries here however we're
  • 00:12:37 using an older one but for the demo here
  • 00:12:39 this does not matter at all we also need
  • 00:12:42 two quick
  • 00:12:43 reiax Dom that is another package from
  • 00:12:46 the react team react itself kind of
  • 00:12:50 histologic we need for creating these
  • 00:12:52 react components I told you that react
  • 00:12:54 is all about components react Dom is
  • 00:12:57 then about rendering these components to
  • 00:13:00 the real Dom with these two packages
  • 00:13:03 added were almost there but react uses a
  • 00:13:06 special JavaScript syntax and a lot of
  • 00:13:08 next generation JavaScript features I'll
  • 00:13:11 come back to this later in the course
  • 00:13:13 I'll have a whole module where I
  • 00:13:15 introduce you to the most important
  • 00:13:17 next-gen features react users so to
  • 00:13:20 unlock the usage of these features enter
  • 00:13:23 special syntax in the JavaScript
  • 00:13:25 preprocessor drop-down you have to
  • 00:13:28 choose babel dan simply is a tool which
  • 00:13:30 compiles the next generation JavaScript
  • 00:13:33 code you're writing here to code that
  • 00:13:35 runs fine in the browser so that we
  • 00:13:37 write code with all features we want but
  • 00:13:40 ship code that works in the browser and
  • 00:13:42 with that you can click Save and close
  • 00:13:44 and now we can start writing our react
  • 00:13:47 app here in the JavaScript section so
  • 00:13:49 why don't we do that let's create a
  • 00:13:51 react component so that we have a
  • 00:13:54 reusable custom HTML element we can use
  • 00:13:57 instead of repeating this HTML code here
  • 00:14:00 on the left in its most basic form and
  • 00:14:03 you're going to learn about a different
  • 00:14:04 form in this course q its most basic
  • 00:14:07 form a react component is just a
  • 00:14:09 function so we can create a new function
  • 00:14:12 and maybe name this person make sure it
  • 00:14:15 starts with a capital P doesn't require
  • 00:14:18 to use it correctly with react this
  • 00:14:21 person component is a normal function
  • 00:14:24 but it has to return the code you
  • 00:14:27 actually want to render to the DOM and
  • 00:14:29 here react uses a special syntax which
  • 00:14:32 is called JSX I'm using parentheses here
  • 00:14:35 to be able to write or to return some
  • 00:14:38 multi-line code and now I'm going to
  • 00:14:40 copy the code here from the left and
  • 00:14:43 paste it into my return statement here
  • 00:14:45 and this certainly looks strange now it
  • 00:14:48 looks like HTML in JavaScript which
  • 00:14:51 wouldn't work normally and it wouldn't
  • 00:14:54 if we hadn't added babe
  • 00:14:56 here as a preprocessor Babel if
  • 00:14:59 configured correctly which it
  • 00:15:01 automatically is here allows us to use
  • 00:15:03 this special syntax which looks like
  • 00:15:05 HTML but which isn't and it will dive
  • 00:15:08 deeper into that syntax in the next
  • 00:15:10 course modules it's called JSX
  • 00:15:13 and it's just some tactical sugar behind
  • 00:15:15 the scenes this gets compiled to normal
  • 00:15:18 JavaScript code we can use it here
  • 00:15:21 though to have an easier time writing
  • 00:15:23 what we actually want to render fine so
  • 00:15:26 now we got that function and I said that
  • 00:15:28 this is a react component but of course
  • 00:15:31 right now it's just a function to turn
  • 00:15:34 this into a react component we actually
  • 00:15:36 have to use react to render it to the
  • 00:15:39 screen so I'll get rid of my person here
  • 00:15:42 on the left and instead I'll add a new
  • 00:15:45 div here and I'll give it an ID of let's
  • 00:15:48 say p1 you can choose any ID you want
  • 00:15:52 though
  • 00:15:52 now the react package we imported is
  • 00:15:56 responsible for correctly parsing this
  • 00:15:59 code here this JSX code the other packet
  • 00:16:02 we imported was react Dom if you
  • 00:16:05 remember you can always check here on
  • 00:16:07 the gear icon react on this actually
  • 00:16:10 exposes an object react Dom written like
  • 00:16:13 that with Dom all being Capitol
  • 00:16:15 characters which has a render method
  • 00:16:18 this method allows us to render a
  • 00:16:22 JavaScript function as a component to
  • 00:16:25 the real Dom and that treat it as a
  • 00:16:29 component part is exactly what react
  • 00:16:31 takes care about we can then render this
  • 00:16:34 function but not by referencing it like
  • 00:16:37 this but by actually turning it into a
  • 00:16:40 HTML element again behind the scenes
  • 00:16:44 using this JSX syntax which is
  • 00:16:46 understood by react so I write this as
  • 00:16:49 my custom self closing HTML element and
  • 00:16:53 render then takes another argument where
  • 00:16:56 I specify where to render this there I
  • 00:16:59 reach out to the document and I can use
  • 00:17:01 a query selector so normal JavaScript
  • 00:17:04 code to select any element with the ID
  • 00:17:07 p1 and that again is normal
  • 00:17:09 javascript code the normal query
  • 00:17:11 selector with that
  • 00:17:14 I'm telling react that I want to render
  • 00:17:19 this function a person component in this
  • 00:17:22 place here on the left and it does now
  • 00:17:26 the styling is lost because class
  • 00:17:28 actually is a keyword in JavaScript so
  • 00:17:30 react turns this into class name and
  • 00:17:33 that's the best proof that this looks
  • 00:17:35 like HTML but isn't it uses a custom
  • 00:17:38 salute X which in 99% of the cases is
  • 00:17:41 like HTML but behind the scenes it's
  • 00:17:43 transformed JavaScript and now you see
  • 00:17:46 we have our person class here again max
  • 00:17:49 treat it as a custom component which we
  • 00:17:53 can also verify by the fact that our
  • 00:17:55 inline block styling here is kind of
  • 00:17:58 ignored because we're wrapping this in a
  • 00:18:01 custom element which is treated as a
  • 00:18:03 block statement now I'll dive into
  • 00:18:05 styling in this course for now let's
  • 00:18:08 just be happy that we got our component
  • 00:18:11 rendered here it's not really reusable
  • 00:18:13 too though if I had a second hook in my
  • 00:18:19 HTML file here in my HTML part let's say
  • 00:18:23 with ID p2 and I wanted to render a
  • 00:18:25 different component a different person I
  • 00:18:28 would have to hard code the values into
  • 00:18:30 that and actually create a new component
  • 00:18:32 the great thing about react and why
  • 00:18:35 components are so awesome and save us a
  • 00:18:37 lot of time is that we can configure
  • 00:18:40 them dynamically as we need them so here
  • 00:18:44 what I'll do is I'll actually add an
  • 00:18:47 argument to this person function which
  • 00:18:49 we'll name props you can choose any name
  • 00:18:51 you want but the concept I'm using here
  • 00:18:53 is called props react automatically
  • 00:18:57 gives me an argument in that function I
  • 00:19:00 turned into a component with this syntax
  • 00:19:02 down here with the person JS Xcode and
  • 00:19:05 prop simply contains all the attributes
  • 00:19:09 I add to my own component so I could add
  • 00:19:11 name max and age let's say 28 like this
  • 00:19:16 and if I do this now we can output this
  • 00:19:20 in our person component
  • 00:19:22 we just need to dynamically access this
  • 00:19:25 props element this props argument we
  • 00:19:28 output dynamic content and react with
  • 00:19:30 curly braces opening and closing and
  • 00:19:32 only one pair no double curly braces
  • 00:19:34 only one pair of curly braces and there
  • 00:19:37 we reach out to props and then dot name
  • 00:19:40 to get this name attribute I passed and
  • 00:19:43 props age to output that age property I
  • 00:19:46 pass the props age and now we're using
  • 00:19:49 the properties the attributes we're
  • 00:19:52 passing to our own component and that's
  • 00:19:54 pretty cool because now if we repeat
  • 00:19:57 this react Dom render call here for p2
  • 00:20:01 so make sure to exchange this in the
  • 00:20:03 second query selector we can pass
  • 00:20:06 different props to death component like
  • 00:20:09 menu and 29 and now both components use
  • 00:20:13 the same base as you can see they use
  • 00:20:15 the same function which is turned into a
  • 00:20:17 component by react but we're really
  • 00:20:19 taking advantage of the component
  • 00:20:21 concept because we only wrote the HTML
  • 00:20:25 code once and now we can reuse it over
  • 00:20:28 and over again and I bet you can see the
  • 00:20:30 potential of this in very big
  • 00:20:32 applications you can compose the entire
  • 00:20:35 application of reusable pieces and this
  • 00:20:37 component isn't even using any logic it
  • 00:20:40 does listen to clicks or stuff like that
  • 00:20:43 in apps such as the app we build in this
  • 00:20:46 course we will of course do that we will
  • 00:20:48 append our own logic to our components
  • 00:20:50 and then we have small reusable
  • 00:20:53 maintainable and easy to manage pieces
  • 00:20:56 with their own logic contained in them
  • 00:20:58 which we can use anywhere to build
  • 00:21:00 amazing applications that's the idea
  • 00:21:03 behind react and that is why it's so
  • 00:21:05 great and why this component concept is
  • 00:21:07 so great now let me do one more thing
  • 00:21:10 though right now I'm calling react on
  • 00:21:12 render twice there's nothing wrong with
  • 00:21:14 that but actually we can also do this a
  • 00:21:17 bit differently we could have one div
  • 00:21:19 here in the HTML part which has an idea
  • 00:21:22 of app or route doesn't matter any idea
  • 00:21:25 of your choice now I'll get rid of the
  • 00:21:27 second react on render call and I will
  • 00:21:30 add a variable here this variable I'll
  • 00:21:34 name app but this name is also up to you
  • 00:21:36 but this variable also will hold some
  • 00:21:38 JSX code and I'm just wrapping this in
  • 00:21:41 parentheses so that I can write this
  • 00:21:43 code over multiple lines now here what I
  • 00:21:45 can do is I can now output my person
  • 00:21:52 component as I did before we have to
  • 00:21:57 wrap it with a diff though because JSX
  • 00:21:59 has the requirement of only having one
  • 00:22:01 root element so adjacent elements are
  • 00:22:04 not allowed I will also talk about this
  • 00:22:07 and of course though there are ways
  • 00:22:08 around this limitation so now I added
  • 00:22:11 two person component usages to my app
  • 00:22:14 variable here and now I simply mount the
  • 00:22:18 app variable in the place of this
  • 00:22:21 element with the ID app which I select
  • 00:22:25 by adjusting my query selector and now
  • 00:22:28 you see I got the two elements now next
  • 00:22:31 to Java because now they're rendered in
  • 00:22:34 the same hook in the same element so to
  • 00:22:37 say in the same div and this method of
  • 00:22:41 only having one hook one react on render
  • 00:22:44 call and then creating a up there with
  • 00:22:47 nested components is the far more
  • 00:22:49 popular way of creating react apps it is
  • 00:22:52 the way I will use in this course and in
  • 00:22:54 the next lectures I will talk about this
  • 00:22:56 where is this Y alternative with
  • 00:22:58 multiple react on render calls but be
  • 00:23:01 aware this is the way you will see far
  • 00:23:03 more often with this approach you create
  • 00:23:06 so called
  • 00:23:07 single page applications now this is our
  • 00:23:11 first react app now let's dive deeper
  • 00:23:13 into react and let's continue with the
  • 00:23:16 course and really get started with react
  • 00:23:26 so we already got our hands dirty and we
  • 00:23:29 saw how Ebola react app now this already
  • 00:23:33 answers a bit why we might want to use
  • 00:23:36 react there's also more there are more
  • 00:23:38 reasons why we want to use react react
  • 00:23:41 helps us with a problem we'll encounter
  • 00:23:44 with normal JavaScript DUI state becomes
  • 00:23:48 difficult to manage in bigger JavaScript
  • 00:23:52 applications you have to manually target
  • 00:23:55 elements in your DOM and if you then
  • 00:23:57 change the structure of your HTML code
  • 00:23:59 chances are you need to change the way
  • 00:24:02 you targeted your elements because you
  • 00:24:04 used query selector or even if you use
  • 00:24:07 jQuery traversing the Dom is easier but
  • 00:24:10 it's still always something you have to
  • 00:24:12 keep in mind and if you got more complex
  • 00:24:14 web apps where you dynamically add and
  • 00:24:17 remove elements this quickly can become
  • 00:24:19 cumbersome in our course project we
  • 00:24:23 build app which is highly dynamic where
  • 00:24:26 we are able to build a burger and
  • 00:24:27 dynamically add and remove ingredients
  • 00:24:30 if you write this with normal JavaScript
  • 00:24:32 code it's going to be a nightmare so
  • 00:24:34 react helps us by making this whole UI
  • 00:24:38 state management a non-issue it allows
  • 00:24:41 us to focus on our business logic
  • 00:24:43 instead of keeping our application from
  • 00:24:45 exploding
  • 00:24:45 and additionally react is maintained by
  • 00:24:49 a big community so chances are the react
  • 00:24:52 code is written better than we could
  • 00:24:55 have ever written it so therefore it's
  • 00:24:57 highly efficient and fast and the bigger
  • 00:24:59 your application gets the more this
  • 00:25:01 matters too and finally react features a
  • 00:25:05 huge ecosystem and an extremely active
  • 00:25:08 community which means that there's a
  • 00:25:10 great chance that for a given problem
  • 00:25:12 you face you'll find a solution or an
  • 00:25:14 extra package you can add to fix it all
  • 00:25:17 these are reasons why react is awesome
  • 00:25:19 and why you definitely should consider
  • 00:25:21 it for your next project and why you
  • 00:25:23 made the right choice to start with this
  • 00:25:25 course
  • 00:25:32 now there's not just react there are
  • 00:25:35 also alternatives react of course is
  • 00:25:38 what we'll cover in this course but
  • 00:25:39 there also is angular and there would be
  • 00:25:41 voce s and there are others like
  • 00:25:44 backbone or ember but angular and view
  • 00:25:46 are the most popular alternatives and I
  • 00:25:49 can only recommend diving into these two
  • 00:25:51 to really pick your favorite I also got
  • 00:25:54 courses on them if you are interested
  • 00:25:56 all three of them are great at creating
  • 00:25:59 highly scalable web applications that
  • 00:26:02 look and feel good to the user not so
  • 00:26:05 much an alternative is jQuery you might
  • 00:26:08 think it is one but jQuery is really
  • 00:26:11 only about traversing the DOM and
  • 00:26:13 targeting elements in the Dom now as you
  • 00:26:16 saw in our example react is about just
  • 00:26:19 declaring what you see and focusing on
  • 00:26:22 the logic instead on focusing on the how
  • 00:26:24 and therefore react angular and view
  • 00:26:27 allow you to create more powerful
  • 00:26:30 applications because you can focus on
  • 00:26:32 the logic and your business model and
  • 00:26:35 not so much on the technical side of
  • 00:26:37 actually reaching that element you want
  • 00:26:40 it to change
  • 00:26:47 when we talk about react or all's about
  • 00:26:51 angular and view as a side note we also
  • 00:26:54 have to keep in mind that we can
  • 00:26:55 essentially both two kinds of web
  • 00:26:57 applications with all these libraries
  • 00:26:59 and frameworks we can build a single
  • 00:27:01 page application or a multi page
  • 00:27:03 application now what's the difference in
  • 00:27:06 a single page application we only get
  • 00:27:09 back one single HTML file by the server
  • 00:27:12 and we get back this fall at the first
  • 00:27:14 time the user wizards the page so the
  • 00:27:16 first time the user wizards example.com
  • 00:27:18 thereafter everything is managed with
  • 00:27:22 JavaScript with react the entire page
  • 00:27:25 consists of components which are
  • 00:27:28 rendered and handled by JavaScript on
  • 00:27:31 the other hand in a multi-page
  • 00:27:33 application we get back multiple HTML
  • 00:27:36 pages where each page has the content
  • 00:27:39 for a given route given URL we visited
  • 00:27:42 for example.com an example that come
  • 00:27:45 slash users we get back two different
  • 00:27:48 pages that's important now on multi-page
  • 00:27:51 applications we might also use react but
  • 00:27:54 only to create little of widgets so to
  • 00:27:56 say so individually contained components
  • 00:27:59 we dump into that page but not the
  • 00:28:02 entire page is managed by react we also
  • 00:28:05 see this on some pages but the more
  • 00:28:07 popular approach these days is the
  • 00:28:09 single page application approach because
  • 00:28:11 if you manage the entire page with Java
  • 00:28:14 Script
  • 00:28:14 you never have to go back to the server
  • 00:28:16 and reload the page and that is an
  • 00:28:18 amazing user experience because
  • 00:28:20 everything happens instantly and even if
  • 00:28:23 the user needs to wait you're showing a
  • 00:28:25 spinner or you're still presenting a
  • 00:28:27 reactive web app you're not just showing
  • 00:28:30 a loading page where the user can't do
  • 00:28:32 anything so in single page applications
  • 00:28:35 our page is built up with components and
  • 00:28:38 every component is a react component and
  • 00:28:41 the entire page also is managed by a
  • 00:28:44 root react component and is just under
  • 00:28:48 reacts control in the multi page
  • 00:28:50 application on the other hand we also
  • 00:28:53 could split up our app into theoretical
  • 00:28:55 components but actually a lot of the
  • 00:28:58 page is just going to be normal HTML and
  • 00:29:00 CSS
  • 00:29:01 code and some widgets we dump in like an
  • 00:29:04 image gallery or something like that is
  • 00:29:06 managed by react so the entire page is
  • 00:29:09 not under react control the individual
  • 00:29:11 widgets don't know of each other's
  • 00:29:14 existence therefore in the single
  • 00:29:17 application case which is the case we'll
  • 00:29:19 cover in this course we typically only
  • 00:29:22 have one react Dom render call this
  • 00:29:24 method you saw in the previous lectures
  • 00:29:27 where we trained our first app now we
  • 00:29:30 only need one because we have one root
  • 00:29:32 app component there which is mounted to
  • 00:29:34 the Dom which hosts all other react
  • 00:29:37 components in the multi-page application
  • 00:29:40 we would typically call react on render
  • 00:29:42 more often to render our different
  • 00:29:44 components in different places of the
  • 00:29:45 app you saw that react on render allows
  • 00:29:48 you to pick a place in your HTML code
  • 00:29:50 where you want to render your app and
  • 00:29:52 therefore you have these widgets which
  • 00:29:55 don't know of each other's existence now
  • 00:29:59 you can build such an application to you
  • 00:30:01 and the react code you write won't
  • 00:30:04 differ so this course actually covers
  • 00:30:06 both but I will focus on a single page
  • 00:30:08 application case since Ted also allows
  • 00:30:11 us to use some libraries like react
  • 00:30:13 router and is the most popular way of
  • 00:30:16 creating web apps these days and also
  • 00:30:19 the approach I can only recommend to you
  • 00:30:29 so now that we had a look at the basics
  • 00:30:31 of react what reactors about let me
  • 00:30:34 explain what this course is about and
  • 00:30:36 what we're going to cover in this course
  • 00:30:37 we're almost done getting started only a
  • 00:30:41 couple of more words I want to spend on
  • 00:30:43 how you get the most out of this course
  • 00:30:44 and then we'll be leaving this module
  • 00:30:47 thereafter you'll actually find an
  • 00:30:50 optional second module in this optional
  • 00:30:53 module I will walk you through the most
  • 00:30:55 important next-generation JavaScript
  • 00:30:58 features we're going to use in this
  • 00:31:00 course when writing react applications
  • 00:31:03 you typically use quite a lot of these
  • 00:31:05 next-gen features like arrow functions
  • 00:31:08 or classes you do this because this
  • 00:31:11 allows you to write cleaner react code
  • 00:31:13 and it's the de facto standard to use
  • 00:31:15 all these features if you already feel
  • 00:31:18 comfortable using next-generation
  • 00:31:19 JavaScript features so if you already
  • 00:31:22 know yes six and so on then you can skip
  • 00:31:25 the next module and I will mention this
  • 00:31:27 there too otherwise you've got a nice
  • 00:31:29 module we're all ensure that we're all
  • 00:31:32 on the same page and that you've got
  • 00:31:34 solid fundamentals about all these
  • 00:31:36 features we're about to use and you can
  • 00:31:38 always go back to that module if you
  • 00:31:40 later in the course encounter something
  • 00:31:41 that looks strange or new to you after
  • 00:31:45 this optional module the real second
  • 00:31:47 module is the module where we dive into
  • 00:31:50 the react basics that's of course a
  • 00:31:52 super important module you will learn
  • 00:31:55 how you can create react components that
  • 00:31:58 there is more than one way of doing so
  • 00:32:00 and how you can communicate between
  • 00:32:02 components how and react application is
  • 00:32:05 generally built this section also
  • 00:32:07 includes things like how we can we
  • 00:32:09 output lists or how can we render some
  • 00:32:12 content conditionally there after it's
  • 00:32:15 time to dive into debugging because we
  • 00:32:17 all make mistakes you will write code
  • 00:32:20 that fails that's natural that happens
  • 00:32:23 to everyone it's super important that
  • 00:32:25 you then know how to recover how to
  • 00:32:28 debug your application how to find that
  • 00:32:30 error that makes your program crash
  • 00:32:33 we'll have a look at this in this
  • 00:32:35 debugging module after debugging will
  • 00:32:38 dive into styling how can we style our
  • 00:32:42 react
  • 00:32:43 and how can we make sure that the
  • 00:32:45 styling we apply to a component only
  • 00:32:47 gets applied to that component and not
  • 00:32:50 to other components as well we'll take a
  • 00:32:52 look at that in this module thereafter
  • 00:32:55 we'll dive deeper into components we'll
  • 00:32:58 already have learned a lot about them
  • 00:33:00 but here we will learn which lifecycle
  • 00:33:03 they follow we will learn how we can
  • 00:33:05 cleverly control whether react should
  • 00:33:08 check for updates often component or not
  • 00:33:11 and much more
  • 00:33:12 so that is truly an important module
  • 00:33:14 which will make sure that you understand
  • 00:33:17 the internals of react and that you got
  • 00:33:19 the tools you need for bigger or more
  • 00:33:21 advanced react applications after that
  • 00:33:25 you will have learned a lot about
  • 00:33:26 components but we're far from being done
  • 00:33:28 well then dive into HTTP requests how
  • 00:33:32 can we connect our react application to
  • 00:33:35 the outside world how can we fetch data
  • 00:33:37 from a server or ascended to that server
  • 00:33:40 how can we do all of that in a single
  • 00:33:43 page or all in a multi-page application
  • 00:33:45 with asynchronous HTTP requests Ajax
  • 00:33:49 that is what we'll have a look at in
  • 00:33:51 this module and thereafter we'll dive
  • 00:33:54 into routing routing is a core feature
  • 00:33:56 when building single page applications
  • 00:33:59 because with routing we can actually
  • 00:34:01 handle different URLs like slash user
  • 00:34:05 and slash products and render different
  • 00:34:08 pages even though technically we only
  • 00:34:12 have one HTML page and we simply parse
  • 00:34:15 the URL with JavaScript and rerender the
  • 00:34:19 parts of the Dom that need to be
  • 00:34:21 rendered to display a new page
  • 00:34:24 that sounds very complex and that is why
  • 00:34:27 we will use a package for this routing
  • 00:34:29 is a super important and key module of
  • 00:34:32 this course therefore now one important
  • 00:34:34 note at this point all these concepts
  • 00:34:37 are always taught in theory and with
  • 00:34:40 tiny demo projects we will also have an
  • 00:34:43 overarching course project the burger
  • 00:34:46 bowler and we will regularly go back to
  • 00:34:49 that project and apply the features to
  • 00:34:51 learn the previous module cue the course
  • 00:34:54 project so what we'll start
  • 00:34:56 planning and creating it then we will
  • 00:34:58 use advanced component concepts we will
  • 00:35:00 apply styling and will also apply
  • 00:35:02 routing there so that we can gradually
  • 00:35:04 see our project become better and better
  • 00:35:07 and so that you always have a great way
  • 00:35:10 of seeing all these things not just in
  • 00:35:12 theory or in tiny demo projects but in a
  • 00:35:16 real project so the things I mentioned
  • 00:35:19 here are only the overarching topics
  • 00:35:21 this course actually has more modules
  • 00:35:23 because we have all these in-between
  • 00:35:25 practice orientated modules back to the
  • 00:35:28 outline here though after routing will
  • 00:35:30 dive into forms and validation in almost
  • 00:35:33 any web application you build you need
  • 00:35:35 to fetch user input and in this module I
  • 00:35:37 will show you how to do this in a
  • 00:35:39 dynamic way and how to also validate
  • 00:35:41 user input and thereafter it's time for
  • 00:35:44 Redux redux and more Redux will dive
  • 00:35:47 deeply into redux which is an
  • 00:35:50 independent third-party library but
  • 00:35:52 which of course is used in many react
  • 00:35:54 projects we'll start at the basics we'll
  • 00:35:56 learn why we might want to use redux and
  • 00:35:59 then we will learn more advanced use
  • 00:36:00 cases like using asynchronous actions in
  • 00:36:04 redux and way more this is an important
  • 00:36:06 module and I can't wait to dive into
  • 00:36:09 this and then also apply to the course
  • 00:36:11 project together with you after Redux
  • 00:36:14 will dive into authentication probably
  • 00:36:17 every web application has some sort of
  • 00:36:19 authentication allowing users to sign up
  • 00:36:21 and sign in here I will show you how to
  • 00:36:24 implement this I will always as an all
  • 00:36:26 these modules focus on the client side
  • 00:36:28 so on the react side and not on the
  • 00:36:31 server side but of course I will explain
  • 00:36:33 how to implement authentication so that
  • 00:36:37 it works with any back-end that supports
  • 00:36:39 this kind of authentication will of
  • 00:36:41 course also apply this to the course
  • 00:36:43 project after authentication will dive
  • 00:36:46 into testing only an introduction to be
  • 00:36:49 honest because testing is enough content
  • 00:36:52 where you can create enough content
  • 00:36:54 about testing to fill an entire course
  • 00:36:56 but I want to introduce you to how your
  • 00:36:59 tests react applications which tools you
  • 00:37:01 use and how to think about testing react
  • 00:37:04 apps after testing will of course all
  • 00:37:07 learn how to deploy and react
  • 00:37:08 application so how
  • 00:37:09 to reshape it to a real server and
  • 00:37:12 thereafter I got loads of bonus content
  • 00:37:15 for example a whole module about
  • 00:37:18 animating react applications possible
  • 00:37:20 next steps where you could dive into
  • 00:37:22 after finishing this module a module
  • 00:37:24 about next j/s which is basically a
  • 00:37:28 library building up on react and making
  • 00:37:30 server-side render duplications a breeze
  • 00:37:33 module where we will build our own
  • 00:37:35 workflow our own project from scratch
  • 00:37:38 with web pack and a couple of build
  • 00:37:40 tools and way more so a lot of content
  • 00:37:44 in this course it has the length it has
  • 00:37:46 for a reason in the end and I can't wait
  • 00:37:49 to dive into it together with you so why
  • 00:37:51 don't we do that and just start with the
  • 00:37:53 course
  • 00:38:01 now that we had a look at what reactors
  • 00:38:03 and why we might want to use it as well
  • 00:38:05 as now that we built our first react app
  • 00:38:08 let's dive into all the cool react
  • 00:38:11 concepts and the base syntax of react
  • 00:38:13 and this module we'll have a look at
  • 00:38:16 what it takes to build a real react app
  • 00:38:18 and with that of course I also mean
  • 00:38:20 locally on our machine and not on code
  • 00:38:23 pen and you will learn which core
  • 00:38:26 features react offers and how you use
  • 00:38:28 them so let's dive right into that and
  • 00:38:30 let's learn how we set up a local react
  • 00:38:33 project on our machine
  • 00:38:43 so we want to set up a local react
  • 00:38:45 project with local I mean we don't use
  • 00:38:49 coat pan but instead we will have a
  • 00:38:51 project on our machine where we can work
  • 00:38:53 in with our own IDE or editor this of
  • 00:38:56 course is the way we want to work with
  • 00:38:58 react we want to have it on our machine
  • 00:39:00 we have more features available there
  • 00:39:02 it's more convenient than using some web
  • 00:39:04 editor and code pen which we used before
  • 00:39:07 or jsbin which we used in the optional
  • 00:39:09 second module are really more
  • 00:39:11 playgrounds than real work environments
  • 00:39:14 for real projects so we will set up a
  • 00:39:16 local project and react is actually more
  • 00:39:19 than just importing the two files we
  • 00:39:22 imported in code pen we need a more
  • 00:39:24 elaborate workflow for real projects and
  • 00:39:27 this is recommended for both single page
  • 00:39:30 and multi page applications the question
  • 00:39:32 of course is why do we need a more
  • 00:39:35 complex workflow and how do we then
  • 00:39:36 achieve it let me start with the why we
  • 00:39:40 when building a real app we want to
  • 00:39:43 actually optimize our code we didn't
  • 00:39:46 care about this in the demo project in
  • 00:39:48 the first course module on code pen but
  • 00:39:51 for a big react application we want a
  • 00:39:53 ship code that is as small as possible
  • 00:39:57 and as optimized as possible obviously
  • 00:40:00 because that increases the performance
  • 00:40:02 of our app additionally and that is
  • 00:40:05 super important we want to use these
  • 00:40:07 next generation JavaScript features I
  • 00:40:09 taught you about in the last optional
  • 00:40:12 module now we want to use that because
  • 00:40:15 it makes our life as a developer much
  • 00:40:17 easier and that's the de facto standard
  • 00:40:20 for react apps to use all these next-gen
  • 00:40:22 features because the code is leaner
  • 00:40:24 easier to read faster less error-prone
  • 00:40:27 and many other reasons so you should
  • 00:40:30 really use these features it's not just
  • 00:40:33 something nice optional I strongly
  • 00:40:35 recommend using these features it is
  • 00:40:37 considered the best practice and it is
  • 00:40:39 what I teach you in this course because
  • 00:40:41 obviously I want to teach you best
  • 00:40:43 practices so we want to use
  • 00:40:45 next-generation JavaScript features to
  • 00:40:47 have an easier time to write less
  • 00:40:48 error-prone code and with all that we
  • 00:40:52 need a word flow that supports these
  • 00:40:54 features even
  • 00:40:56 cold pen we implicitly did this remember
  • 00:40:59 that preprocessor drop down where we
  • 00:41:01 switch to Babel that behind the scenes
  • 00:41:03 unlocked a couple of built tools that
  • 00:41:06 would parse our code and support JSX
  • 00:41:10 this HTML in JavaScript syntax for
  • 00:41:13 example so we want to use these next-gen
  • 00:41:15 features essentially we want to be able
  • 00:41:18 to write es6 or above code and still
  • 00:41:21 ship code in the end that runs on as
  • 00:41:24 many browsers as possible and not that
  • 00:41:27 many browsers support all these next-gen
  • 00:41:29 features that is why we need a build
  • 00:41:31 workflow that actually compiles these
  • 00:41:33 features finally in the end we want to
  • 00:41:36 be more productive this includes
  • 00:41:38 next-generation JavaScript features
  • 00:41:40 which often allow us to write more
  • 00:41:42 condensed code but it also includes
  • 00:41:44 things like CSS Auto prefixing you might
  • 00:41:48 know that CSS prefixes are a think you
  • 00:41:50 achieve the broadest possible browser
  • 00:41:53 support for CSS features now manually
  • 00:41:56 adding these prefixes is quite annoying
  • 00:41:58 so automatically adding them is nice or
  • 00:42:00 consider linting so a tool which
  • 00:42:03 actually warns you if you are writing
  • 00:42:05 sub-optimal code that would be nice to
  • 00:42:08 have – not strictly required but a nice
  • 00:42:11 feature and all these things should be
  • 00:42:14 part of a build workflow now to
  • 00:42:16 implement them there we need a couple of
  • 00:42:18 tools that actually let them run over
  • 00:42:20 our code to either warn us in the case
  • 00:42:23 of linting or to compile the code to
  • 00:42:26 code that runs on as many browsers as
  • 00:42:29 possible whilst we as developer are
  • 00:42:31 writing very modern code that would on
  • 00:42:34 its own not run on that many browsers so
  • 00:42:38 that's the why a couple of reasons why
  • 00:42:40 writing this kind of code is desirable
  • 00:42:43 and why we need a more complex build
  • 00:42:45 workflow that actually allows us to
  • 00:42:48 write this code that actually optimizes
  • 00:42:50 the code for us and for that the how of
  • 00:42:53 course is relevant how do we achieve
  • 00:42:55 such a workflow we first of all need a
  • 00:42:58 dependency management tool dependencies
  • 00:43:00 are simply third-party libraries
  • 00:43:02 third-party JavaScript packages react
  • 00:43:05 for examples of dependency react Dom as
  • 00:43:07 a dependency and also
  • 00:43:09 all the built tools we will need in the
  • 00:43:12 end our dependencies so the compiler for
  • 00:43:15 next-gen JavaScript – current gen
  • 00:43:17 JavaScript
  • 00:43:18 dead is a dependency and we will use npm
  • 00:43:21 here yarn would be another tool you
  • 00:43:23 could use but we will use npm nodes
  • 00:43:25 package manager a tool which just allows
  • 00:43:29 us to manage packages and which is the
  • 00:43:31 de facto standard for managing
  • 00:43:34 dependencies also on front-end projects
  • 00:43:37 besides that dependency management tool
  • 00:43:39 we need a bundler because we wanna write
  • 00:43:43 modular code and split it up over
  • 00:43:46 multiple files so that each file has a
  • 00:43:49 clear task a clear focus and therefore
  • 00:43:51 it's easier for us to maintain and
  • 00:43:52 manage but then we want to make sure
  • 00:43:55 that all this code gets bundled into a
  • 00:43:58 couple of files in the end when we ship
  • 00:44:01 it because browsers don't even support
  • 00:44:03 split up files older browsers at least
  • 00:44:06 don't do and it might also even if they
  • 00:44:09 did support it not be that optimal to
  • 00:44:11 make thousands of requests to all these
  • 00:44:13 tiny focused files so we want to have
  • 00:44:16 that bundler and we will use webpack
  • 00:44:18 which is the de facto standard for
  • 00:44:20 bundling these days the cool thing about
  • 00:44:22 WebP egg is it doesn't just bundle files
  • 00:44:25 it also allows us to apply a couple of
  • 00:44:27 other build steps before it does this
  • 00:44:30 bundling for example the mentioned
  • 00:44:32 compilation of next-gen JavaScript that
  • 00:44:36 requires a number tool Babel we need a
  • 00:44:38 compiler that does this javascript
  • 00:44:41 compilation which means translation from
  • 00:44:44 modern features to workarounds that also
  • 00:44:47 work on older browsers and we will use
  • 00:44:49 babel plus presets which can be hooked
  • 00:44:53 into the web pack configuration so that
  • 00:44:55 they are part of this bundling and
  • 00:44:57 optimization process and finally in the
  • 00:45:00 end we want to use a development server
  • 00:45:02 to test our app locally on our machine
  • 00:45:05 development server is a web server but
  • 00:45:08 one running on our machine we could open
  • 00:45:11 a HTML file by double-clicking on it but
  • 00:45:14 this will use the file protocol and
  • 00:45:16 would not correctly emulate the app
  • 00:45:18 running as it runs on a web server so we
  • 00:45:22 need a web server and we
  • 00:45:23 can of course run one on our local
  • 00:45:25 machine the server is then only
  • 00:45:27 accessible by us but that's all we need
  • 00:45:29 as a developer and there we can really
  • 00:45:31 see the app run as it will run in the
  • 00:45:33 end on a real server we need all these
  • 00:45:36 things and it sounds like that's super
  • 00:45:38 complex to set up the good thing is it's
  • 00:45:41 not I will present you a tool that will
  • 00:45:45 create a project supporting all these
  • 00:45:47 things out of the box with zero
  • 00:45:49 configuration in the next lectures we
  • 00:45:53 will install this tool together and it
  • 00:45:55 is a tool created by the react team and
  • 00:45:58 community and the officially recommended
  • 00:46:00 way of creating you react apps because
  • 00:46:03 that's the general theme of this course
  • 00:46:04 I will teach you things in the best
  • 00:46:07 practice and recommended way so all of
  • 00:46:10 the setup is quite easy and as a side
  • 00:46:13 note if you still want to dive into how
  • 00:46:16 this works behind the scenes and you
  • 00:46:18 want to set this up from scratch I also
  • 00:46:20 got a module for dad towards the end of
  • 00:46:23 the course where we will build a react
  • 00:46:25 app a react project from scratch now
  • 00:46:28 with that you know what we need and how
  • 00:46:30 now let's dive into that tool I
  • 00:46:32 mentioned and let's learn how we
  • 00:46:34 actually get started with a new react
  • 00:46:36 project supporting all these features
  • 00:46:46 in the last lecture I highlighted why we
  • 00:46:48 wanna set up a project which gives us
  • 00:46:51 some additional features which make our
  • 00:46:53 life as a developer easier now as I also
  • 00:46:56 mentioned there is a tool which creates
  • 00:46:58 such a project for us
  • 00:47:00 it's called create react app and you can
  • 00:47:02 simply Google for it to find a link to
  • 00:47:05 its official github repository as I said
  • 00:47:08 it's maintained by basically Facebook or
  • 00:47:11 a community around Facebook so it's the
  • 00:47:14 officially recommended tool for creating
  • 00:47:17 react projects on that github page you
  • 00:47:21 will find installation instructions and
  • 00:47:23 a detailed explanation about what it
  • 00:47:25 does and how it works
  • 00:47:27 feel free to read through that of course
  • 00:47:29 you're also going to learn all about
  • 00:47:31 that throughout this course let's start
  • 00:47:33 with the installation we install it
  • 00:47:36 globally with NPM and NPM is simply
  • 00:47:40 notes package manager a tool you
  • 00:47:43 automatically get when installing
  • 00:47:44 node.js which makes it easy to manage
  • 00:47:48 third-party packages other JavaScript
  • 00:47:51 packages in the end and create reactive
  • 00:47:53 is just such a package do you use NPM
  • 00:47:56 you need to install node.js which you
  • 00:48:00 can download and install from node.js
  • 00:48:02 org now there you should pick the latest
  • 00:48:05 version 8.5 in my case here but if
  • 00:48:09 you're facing any issues with that
  • 00:48:11 also try out which the 6.11 or whatever
  • 00:48:14 the long-term support version is in your
  • 00:48:16 case when you're viewing this page now
  • 00:48:19 no worries we're not going to write any
  • 00:48:22 node.js code here you don't need to know
  • 00:48:25 note J s we only needed to use its
  • 00:48:28 package manager and also for this
  • 00:48:31 development server which will be spun up
  • 00:48:33 for us automatically so simply click
  • 00:48:36 these buttons download Noches
  • 00:48:38 and it will spin up installer through
  • 00:48:41 which you can walk once you did finish
  • 00:48:43 the installation you should be able to
  • 00:48:45 run the npm command here on your machine
  • 00:48:48 so let's do this together in the next
  • 00:48:50 step to install create react app through
  • 00:48:54 NPM you should go into the terminal or
  • 00:48:57 command prompt
  • 00:48:58 of your machine and there you can now
  • 00:49:00 run npm install this is available since
  • 00:49:03 we installed node then create react app
  • 00:49:08 one word with dashes between the supper
  • 00:49:11 words and then dash G this flag at the
  • 00:49:15 end installs it globally on our machine
  • 00:49:17 so that we can run it anywhere on the
  • 00:49:19 machine which of course is what we want
  • 00:49:21 to do because we want to be able to
  • 00:49:22 create new react projects wherever we
  • 00:49:25 want now on mac and linux you might need
  • 00:49:30 to add a sudo in front of all of that to
  • 00:49:32 get the right permissions of running
  • 00:49:34 this command and if you do add it you're
  • 00:49:36 probably prompted for your password too
  • 00:49:39 now once you did enter it and again this
  • 00:49:42 is not required on Windows you will
  • 00:49:44 install create react app on your machine
  • 00:49:47 once this is finished you can start
  • 00:49:50 creating new react projects with it the
  • 00:49:53 command can also be found on this github
  • 00:49:56 page I showed you earlier here but will
  • 00:49:58 of course run it together
  • 00:49:59 you simply run create react app so the
  • 00:50:03 package name in the end and then the
  • 00:50:06 name of the app this will be the name of
  • 00:50:08 the folder which gets created where the
  • 00:50:10 default configuration and a lot of
  • 00:50:12 starting files will be placed in I will
  • 00:50:15 name it react complete guide but you can
  • 00:50:18 name it whatever you want hit enter and
  • 00:50:21 this will automatically create the
  • 00:50:23 folder and install all the dependencies
  • 00:50:25 it needs as you can see here already
  • 00:50:28 that is react itself react Daum to
  • 00:50:32 access the Dom and react scripts which
  • 00:50:35 is a package bundling all these
  • 00:50:37 different tools I was referring to you
  • 00:50:39 on the slide in the last lecture once
  • 00:50:42 this setup finished you can navigate
  • 00:50:45 into this newly created folder with CD
  • 00:50:47 and then the name of the project you
  • 00:50:50 chose in my case react complete guide
  • 00:50:52 and in there simply run NPM start now
  • 00:50:56 for me it's showing yarn start and all
  • 00:50:58 these yarn commands because I have yard
  • 00:51:00 installed an alternative to NPM but you
  • 00:51:03 don't need that you can just run NPM and
  • 00:51:05 start and this will now spin up a
  • 00:51:08 development server
  • 00:51:10 and open new page already this page here
  • 00:51:14 this is the starting page this project
  • 00:51:17 gives you it is basically a starting
  • 00:51:19 point we will start editing it later on
  • 00:51:21 and you should always keep this process
  • 00:51:24 you started with npm start running this
  • 00:51:28 is the development server i was
  • 00:51:29 referring to which loads your
  • 00:51:32 application on the browser simulates it
  • 00:51:34 to run as on a real web page and reloads
  • 00:51:38 the page whenever you change the code
  • 00:51:40 you can also find the address where it's
  • 00:51:42 serving it here in the terminal so
  • 00:51:45 always keep this process running if
  • 00:51:47 you're working on your application if
  • 00:51:48 you want to close it you can always do
  • 00:51:50 this with ctrl c but then you will not
  • 00:51:53 be able to wizard this page here again
  • 00:51:55 now with that we got our project setup
  • 00:51:58 let's now have a look at what's inside
  • 00:52:00 there and what was created for us in the
  • 00:52:03 next lecture
  • 00:52:11 in the last lecture we created our
  • 00:52:14 project with create react app and as I
  • 00:52:16 mentioned make sure that npm start this
  • 00:52:19 process is running whenever you're
  • 00:52:21 working on your code i now open the
  • 00:52:24 folder which was created with microsoft
  • 00:52:27 visual studio code this is the ide i'm
  • 00:52:30 going to use throughout the course but
  • 00:52:32 you can use any ide or editor you want
  • 00:52:34 to use for example all the webstorm
  • 00:52:37 would be an alternative or a sublime or
  • 00:52:40 atom or any other editor you like now
  • 00:52:43 here i installed a theme and some
  • 00:52:44 extensions and you can find the exact
  • 00:52:47 configuration I'm using here described
  • 00:52:49 in a PDF document attached to this video
  • 00:52:51 just in case you want to use the same
  • 00:52:53 but feel free to use your favorite setup
  • 00:52:56 whatever the theme and setup you use you
  • 00:52:59 will have the same amount of files and
  • 00:53:01 folders in your project so let's now
  • 00:53:03 walk through all the files and folders
  • 00:53:05 we have here on the root level we get a
  • 00:53:08 couple of configuration files these
  • 00:53:10 locked files here can basically be
  • 00:53:12 ignored
  • 00:53:13 they're just locking in the versions of
  • 00:53:14 the dependencies we're using the general
  • 00:53:17 dependencies our project heads are the
  • 00:53:19 finally packaged up Jason file and there
  • 00:53:22 you can see we have three dependencies
  • 00:53:24 in this project and this was all created
  • 00:53:26 by create react app as you can see we
  • 00:53:29 obviously import react
  • 00:53:31 here I'm using a release candidate
  • 00:53:33 version of react 16 at the point of time
  • 00:53:35 you're viewing this this should be
  • 00:53:37 released react Dom it's the same and
  • 00:53:39 react scripts as I mentioned it's a
  • 00:53:41 package offering all this build workflow
  • 00:53:44 this development server the next
  • 00:53:46 generation JavaScript feature support
  • 00:53:49 and all these things were using in this
  • 00:53:51 project in the package to adjacent file
  • 00:53:54 there are also a couple of strips
  • 00:53:55 defined you can run these scripts with
  • 00:53:58 NPM run and then the script name the
  • 00:54:01 exceptions start which you can also run
  • 00:54:03 with NPM start the command we execute it
  • 00:54:06 and as you can see it uses this react
  • 00:54:08 scripts package to then also execute
  • 00:54:11 some start command there that's simply a
  • 00:54:13 command this package makes available and
  • 00:54:15 this command happens to start this
  • 00:54:17 development server watch all our code
  • 00:54:20 compile our code optimized code and do
  • 00:54:23 all these things once you're ready for
  • 00:54:25 deploying your app you would run npm run
  • 00:54:27 bill to optimize it even more not launch
  • 00:54:30 a development server but instead get
  • 00:54:33 your optimized code stored in a folder
  • 00:54:36 because right now you won't see your
  • 00:54:38 compiled code anywhere here everything
  • 00:54:40 happens in memory but i'll come back to
  • 00:54:42 deploying the application later in the
  • 00:54:44 course so let's close this package doc
  • 00:54:46 jason filed for now the node modules
  • 00:54:49 folder holds all the dependencies and
  • 00:54:52 sub dependencies of our project this is
  • 00:54:55 why we have that many we only had react
  • 00:54:57 react Dom and react scripts but react
  • 00:55:00 strips has a lot of other dependencies
  • 00:55:02 all these little built tools which
  • 00:55:04 compiled code and so on you shouldn't
  • 00:55:07 edit anything in the node modules folder
  • 00:55:09 it's generated automatically if you run
  • 00:55:12 npm install in your project folder and
  • 00:55:14 this was automatically done by create
  • 00:55:17 react scripts the public folder is more
  • 00:55:20 interesting it's basically the root
  • 00:55:22 folder which gets served by the web
  • 00:55:24 server in the end though here it only
  • 00:55:27 holds two files we can add it the script
  • 00:55:30 files are edited in a source folder here
  • 00:55:33 we got one important file index.html
  • 00:55:35 this is a normal HTML page and it is the
  • 00:55:39 single page we have here we will never
  • 00:55:42 add more HTML pages in this project if
  • 00:55:45 you're creating a multi-page project you
  • 00:55:48 would create multiple such projects here
  • 00:55:50 with create react app you wouldn't add
  • 00:55:52 more HTML files here or you need your
  • 00:55:55 own workflow if you want to do that so
  • 00:55:58 this is the single page where in the end
  • 00:56:00 our script files will get injected by
  • 00:56:03 that build workflow which is why you
  • 00:56:05 don't see a script import here and you
  • 00:56:08 can edit this file but we won't write
  • 00:56:10 any HTML code here I want to highlight
  • 00:56:12 this div here with the ID root this will
  • 00:56:16 become important because this will be
  • 00:56:17 where we actually mount our react
  • 00:56:20 application later and we will of course
  • 00:56:22 work and react but if you need to add
  • 00:56:25 any imports to let's say our libraries
  • 00:56:28 CSS libraries or want to add some meta
  • 00:56:31 tags you can do that here in the HTML
  • 00:56:34 file you could also add more HTML here
  • 00:56:36 but again you probably want to do this
  • 00:56:38 in react the manna-fest adjacent fall is
  • 00:56:42 there because create react app gives us
  • 00:56:44 a progressive web of out-of-the-box a
  • 00:56:47 very basic one at least and gives us
  • 00:56:49 this manifesto Jason fall where we can
  • 00:56:52 define some metadata about our
  • 00:56:53 application interesting for us is the
  • 00:56:57 source folder here we get a couple of
  • 00:56:59 files and these are actually the files
  • 00:57:02 we will work in this is actually our
  • 00:57:04 react application most important for us
  • 00:57:07 right now
  • 00:57:08 the index.js file gets access to this
  • 00:57:11 root element and our Dom in our HTML
  • 00:57:15 file so the element with the ID root
  • 00:57:17 which of course is this diff we saw in
  • 00:57:20 the index.html file this one and there
  • 00:57:24 as you can see it renders our react
  • 00:57:27 application with the rendered method now
  • 00:57:31 here it references some app object or
  • 00:57:34 element which we import from an app file
  • 00:57:38 the extension dot J S is left out
  • 00:57:42 because it's automatically added by our
  • 00:57:44 build workflow and if we have a look at
  • 00:57:46 this app dot J's file therefore this is
  • 00:57:49 where we see our first and only react
  • 00:57:53 component we have in this starting
  • 00:57:55 project right now here we see some JSX
  • 00:57:58 and it won't dive deeply into what we
  • 00:58:00 see here exactly in the next lectures
  • 00:58:03 for now let's remove all the content in
  • 00:58:06 this wrapping div and let's simply add a
  • 00:58:10 h1 tag here where I'll say hi I'm a
  • 00:58:15 react app let's close it of course also
  • 00:58:20 and then let's save it that's always
  • 00:58:22 important don't forget to save your
  • 00:58:24 files now since you have NPM start
  • 00:58:27 running this will automatically trigger
  • 00:58:29 a recompilation and it should
  • 00:58:32 automatically reload your page too which
  • 00:58:34 is why you should now see hi I am a
  • 00:58:36 react app instead of the old content
  • 00:58:38 with dad we can also remove this logo
  • 00:58:40 don't SVG file because we no longer use
  • 00:58:43 it in our project and now we got a bit
  • 00:58:46 of a leaner source folder now what else
  • 00:58:49 did create react app crate for us it
  • 00:58:52 gave us this app dot CSS file which
  • 00:58:54 basically defines some stylings we use
  • 00:58:57 in this app dot J's file though I will
  • 00:59:00 say that these are not scoped to this
  • 00:59:02 file these are still global stylings and
  • 00:59:04 I will actually remove everything but
  • 00:59:08 this first app class definition in that
  • 00:59:10 file and save it there after we also get
  • 00:59:13 an index CSS file which also applies
  • 00:59:16 styles globally and which should be used
  • 00:59:19 for some general setup as here for the
  • 00:59:21 body of our application the registered
  • 00:59:25 service worker J's file is as the name
  • 00:59:27 implies important for registering a
  • 00:59:29 service worker which is generated
  • 00:59:31 automatically that's related to this
  • 00:59:33 progressive web app we get out of the
  • 00:59:35 box it will basically precache our
  • 00:59:39 script files we don't need to configure
  • 00:59:41 anything there and the test file well
  • 00:59:44 we'll dive into testing later in the
  • 00:59:46 course it basically allows us to create
  • 00:59:48 unit tests for the different units for
  • 00:59:51 example components in our application
  • 00:59:53 this is the general setup and for the
  • 00:59:56 majority of this course will work in app
  • 00:59:58 dot j/s or our new components we create
  • 01:00:02 speaking off that let's analyze this
  • 01:00:05 file let's understand the syntax we see
  • 01:00:07 there let's get rid of that logo import
  • 01:00:10 because we remove the logo file now did
  • 01:00:12 I see it and let's dive into JSX what
  • 01:00:15 exactly that is and how we add more
  • 01:00:17 components to our application
  • 01:00:26 in the last lecture I walked you through
  • 01:00:28 the folder structure which was created
  • 01:00:30 by a create react app and we added our
  • 01:00:33 app dot JS file let's now dive deeper
  • 01:00:36 into what we see here we see a react
  • 01:00:39 component as I explained react as all
  • 01:00:42 about creating components basically
  • 01:00:44 custom HTML elements you could say which
  • 01:00:47 you can then use to construct your
  • 01:00:49 application this app component actually
  • 01:00:52 gets used me in X J's file where we
  • 01:00:55 render it into the place of this route
  • 01:00:57 element and we could be render a normal
  • 01:01:00 HTML element here to test for example
  • 01:01:03 this would work this is now no react
  • 01:01:06 component if I save this I see this h1
  • 01:01:09 tag but of course then we have no real
  • 01:01:12 react application we're rendering a
  • 01:01:14 normal HTML element but we're not
  • 01:01:17 rendering our own react component now
  • 01:01:20 you could of course use multiple react
  • 01:01:23 on renders and render all the HTML code
  • 01:01:26 you want to use in your app that's not
  • 01:01:29 really how you create your react apps
  • 01:01:31 though typically you render one route
  • 01:01:35 component the app component but you can
  • 01:01:37 name it whatever you want one route
  • 01:01:40 component in our case it is the app
  • 01:01:42 component named app and in there you
  • 01:01:46 would nest all the other components your
  • 01:01:48 application might need and of course
  • 01:01:51 these components can then also be nested
  • 01:01:53 into each other but all the way up to
  • 01:01:56 the top you only have one route
  • 01:01:58 component you could reach out to
  • 01:02:00 multiple notes in your HTML file and
  • 01:02:03 mount different route components for
  • 01:02:05 different react apps all in the same
  • 01:02:08 project that would be possible but it's
  • 01:02:11 not what we do here in the end you can
  • 01:02:13 of course simply replicate what you
  • 01:02:14 learn in this course for multiple
  • 01:02:16 applications in one at the same HTML
  • 01:02:18 file but let's stick to the general or
  • 01:02:22 typical usage of react we have this app
  • 01:02:24 component which is the find the app dot
  • 01:02:27 JS file here we see one way one of two
  • 01:02:31 ways of defining a react component we
  • 01:02:33 create a JavaScript class with the class
  • 01:02:36 keyword and then we use the extends
  • 01:02:38 keyword to inherit
  • 01:02:40 from this component object or class to
  • 01:02:43 be precise which is imported up here
  • 01:02:46 from the react library actually we
  • 01:02:50 import two things react which is a
  • 01:02:53 response alors required for rendering
  • 01:02:56 anything anything to the Dom we always
  • 01:02:59 need to import that enough file where we
  • 01:03:01 define a component and of course the
  • 01:03:03 component class itself I will soon show
  • 01:03:05 you a different way of creating
  • 01:03:07 components though now this class has one
  • 01:03:10 method the render method it needs to
  • 01:03:13 have that because react will call this
  • 01:03:16 method to render something to the screen
  • 01:03:19 there's one important job every react
  • 01:03:22 component has to do it has to return or
  • 01:03:26 render some HTML code which can be
  • 01:03:30 rendered to Dom to the screen you can do
  • 01:03:33 other things in there to reach out to
  • 01:03:35 the Internet do some calculations listen
  • 01:03:38 to events whatever you need in your
  • 01:03:40 application we will see all of that in
  • 01:03:43 that course but you always also need to
  • 01:03:46 render some HTML to the Dom this is so
  • 01:03:50 important to keep in mind we then export
  • 01:03:54 this app class as the default export of
  • 01:03:57 this file this is a es6 feature and
  • 01:04:00 simply means if you import this whole
  • 01:04:02 file you simply import this class
  • 01:04:05 because it's the default export we do
  • 01:04:08 use this in the index.js file where we
  • 01:04:11 import app from the app file again
  • 01:04:14 omitting this extension because it's
  • 01:04:16 added by our build workflow
  • 01:04:18 automatically for JavaScript files this
  • 01:04:21 app name here by the way is chosen
  • 01:04:24 arbitrarily but typically you use the
  • 01:04:26 name of the component you also use in
  • 01:04:28 the file and they you also use as the
  • 01:04:30 file name when sidenote you might also
  • 01:04:34 see these components with dot JSX
  • 01:04:38 as a file extension instead of j/s the
  • 01:04:41 reason for this is this code here I
  • 01:04:44 refer to it as HTML which is returned
  • 01:04:48 but in the end this is not HTML it looks
  • 01:04:52 like it
  • 01:04:53 is JSX so it is javascript looking a bit
  • 01:04:58 different and this can be confusing at
  • 01:05:01 first when you're learning react this
  • 01:05:03 might be one of the most confusing
  • 01:05:04 things actually important to know is
  • 01:05:07 this is just some some tactical sugar it
  • 01:05:10 was basically invented by the react team
  • 01:05:13 and we can write it in a JavaScript
  • 01:05:15 files because of the build workflow
  • 01:05:17 we're using here it will basically
  • 01:05:19 automatically transpile it to valid
  • 01:05:21 JavaScript in the end it's not connected
  • 01:05:25 to the file extension you're using it
  • 01:05:27 works in dot J's and dot JSX files and
  • 01:05:30 the convention nowadays is pretty much
  • 01:05:32 to you always use dot J's files which is
  • 01:05:35 why we do it here too and it simply is
  • 01:05:38 code or a syntax we can use to write
  • 01:05:42 HTML in quotation marks whilst in the
  • 01:05:46 end not writing it sounds confusing let
  • 01:05:50 me show you what this actually is
  • 01:05:52 compiled to in the next lecture
  • 01:06:01 in the last lecture I walked you through
  • 01:06:03 this component and how it generally is
  • 01:06:05 structured now let's dive deeper into
  • 01:06:07 this JSX
  • 01:06:09 thing for this i'll comment out this
  • 01:06:11 block here so that it's not used anymore
  • 01:06:14 and i'll return something else i can use
  • 01:06:17 the react object we're importing up here
  • 01:06:20 and call a method on it create element
  • 01:06:24 this by the way is also the reason why
  • 01:06:26 we have to import react because this
  • 01:06:29 code here isn't the end compiled to what
  • 01:06:32 we're writing here even though we don't
  • 01:06:34 see that create element as a method and
  • 01:06:37 it takes free arguments actually takes
  • 01:06:39 an infinite amount of arguments but at
  • 01:06:41 least free the first one is the element
  • 01:06:46 we want to render to the Dom this could
  • 01:06:48 be a div this can be a normal HTML
  • 01:06:52 element like a div it could also be your
  • 01:06:55 own component if you have one available
  • 01:06:57 here we don't though because we're
  • 01:07:00 inside a component we can't render that
  • 01:07:02 we could render any other component
  • 01:07:04 we're importing but we have no such
  • 01:07:06 component the second argument is
  • 01:07:09 basically the configuration for this and
  • 01:07:13 there we would pass a JavaScript object
  • 01:07:15 this is optional we can also pass null
  • 01:07:19 and we'll do this for now because it
  • 01:07:20 don't one can do configure it the third
  • 01:07:23 argument here then is any amount of
  • 01:07:26 children and we could have multiple
  • 01:07:28 arguments separated by commas children
  • 01:07:32 means what's nested inside this div now
  • 01:07:35 in this case we want to nest h1 element
  • 01:07:38 let's try by adding h1 and then as
  • 01:07:43 another argument let's add this text
  • 01:07:46 here with multiple exclamation marks and
  • 01:07:49 let's escape this quotation mark here
  • 01:07:52 with a backslash so that we can identify
  • 01:07:55 that this was rendered by discrete
  • 01:07:57 element method now with that let me save
  • 01:08:01 this code create element with four
  • 01:08:03 arguments div null h1 and the text make
  • 01:08:08 sure you save the file in visuals to
  • 01:08:11 your code you see that it is saved if
  • 01:08:12 you see across
  • 01:08:13 and no dot and then let's go back to our
  • 01:08:17 application here we see h1 hi
  • 01:08:21 I'll react app and if we inspect this in
  • 01:08:24 the developer tools and Chrome here in
  • 01:08:26 my case which I strongly recommend using
  • 01:08:28 you see we got a div with two text notes
  • 01:08:31 inside h1 and hi I'm a react app so we
  • 01:08:36 didn't render h1 element we rendered
  • 01:08:38 text and this is actually the default
  • 01:08:40 behavior age one here is interpreted as
  • 01:08:44 text it's not rendered as element if we
  • 01:08:49 want to render another element inside
  • 01:08:51 the div what we have to do is replace
  • 01:08:54 this code here with a novel call to
  • 01:08:57 react create element to create a new
  • 01:09:00 HTML element at the end here we now pass
  • 01:09:03 h1 then null as configuration and then
  • 01:09:08 the text we want to render so here let's
  • 01:09:11 mix this up and say does this work now
  • 01:09:14 now if we save this file and we go back
  • 01:09:17 to the application we see a h1 tag does
  • 01:09:20 this work now and we can also see this
  • 01:09:23 if we inspect it in the developer tools
  • 01:09:24 we get a div wrapping an h1 tag now what
  • 01:09:30 we don't see is two CSS styling getting
  • 01:09:33 applied because we don't see the class
  • 01:09:36 being added in our JSX code we added a
  • 01:09:40 CSS class with class name not with class
  • 01:09:45 by the name by the way
  • 01:09:46 I'll come back to why we use classname
  • 01:09:48 in the next lecture so we add class name
  • 01:09:51 in our create element call we would
  • 01:09:55 simply not pass null as configuration
  • 01:09:57 but a JavaScript object and there we can
  • 01:10:01 define class name and assign any CSS
  • 01:10:05 classes we want to add for example app
  • 01:10:08 the same class we're applying here we
  • 01:10:12 now save this file again it reloads and
  • 01:10:15 we now see the updated styling with the
  • 01:10:18 center text we see the CSS class being
  • 01:10:21 applied here on the dev tool this is
  • 01:10:24 super important to understand
  • 01:10:26 the code we just wrote here with react
  • 01:10:30 create element and the nested react
  • 01:10:33 create element is the exact equivalent
  • 01:10:36 of this JSX code and it's actually –
  • 01:10:40 what this code here will get compiled by
  • 01:10:43 one of the many built tools we get out
  • 01:10:45 of the box in this project it is the
  • 01:10:48 reason why we need to import react even
  • 01:10:51 though we're not using it at all when
  • 01:10:53 using this syntax because behind the
  • 01:10:56 scenes we will use it once it is
  • 01:10:58 compiled of course writing the code like
  • 01:11:01 this with create element is really
  • 01:11:03 cumbersome especially as you add and
  • 01:11:06 nest more and more elements this is why
  • 01:11:10 we typically don't use this code but
  • 01:11:12 instead this code we started with this
  • 01:11:15 is the reason why we use JSX but it's
  • 01:11:18 super important to understand the
  • 01:11:20 internals and understand what this
  • 01:11:22 compiles to and also most important of
  • 01:11:25 all understand that whilst it does look
  • 01:11:27 I like HTML it isn't this is JavaScript
  • 01:11:32 in the end it gets compiled to this code
  • 01:11:42 in the last lecture I had a look at what
  • 01:11:45 JSX actually is and it's so important to
  • 01:11:48 understand this now in this lecture I
  • 01:11:51 want to highlight some of the
  • 01:11:53 restrictions we face
  • 01:11:54 for example this class name thing here
  • 01:11:58 JSX clearly looks like HTML and it
  • 01:12:01 should it should allow us to write HTML
  • 01:12:03 as code in our JavaScript files still
  • 01:12:07 since it is in a JavaScript file and
  • 01:12:08 since it is JavaScript some words can't
  • 01:12:11 be used class for example which we would
  • 01:12:14 use in normal HTML to assign our CSS
  • 01:12:17 class can't be used because as I
  • 01:12:20 reserved the word in JavaScript we
  • 01:12:22 already use it here by the way you
  • 01:12:24 create a new class this is why we have
  • 01:12:26 to use class name all these elements we
  • 01:12:29 can use here like def and h1 are
  • 01:12:32 actually managed or provided by the
  • 01:12:35 react library we are not using the real
  • 01:12:39 HTML tags react is converting them
  • 01:12:42 behind the scenes and react the finds
  • 01:12:44 the attributes in quotation marks I
  • 01:12:47 should say we can define on all these
  • 01:12:49 elements and we don't have the class
  • 01:12:51 attribute as we have on the regular HTML
  • 01:12:54 element we have the class name attribute
  • 01:12:58 here to add a CSS class as you can see
  • 01:13:02 in our final code disease translated to
  • 01:13:04 class though it's not class name here
  • 01:13:07 once it has been rendered now another
  • 01:13:11 restriction we face is that when we
  • 01:13:14 return something here let's say we also
  • 01:13:17 want to return and never heading we
  • 01:13:21 actually can't do this here our JSX
  • 01:13:24 expression must have one root element
  • 01:13:27 now with react 16 this is kind of
  • 01:13:30 loosened and we will see in the scores
  • 01:13:34 that we can actually return adjacent
  • 01:13:37 elements in the end it is a typical
  • 01:13:39 thing and a typical best practice to
  • 01:13:42 wrap everything into one root element
  • 01:13:46 per component though this also makes
  • 01:13:48 sense since you typically want to style
  • 01:13:50 your components and want to add the CSS
  • 01:13:53 class which is responsible for styling
  • 01:13:55 queue
  • 01:13:56 element as we do here so typically you
  • 01:13:59 nest everything in one single root
  • 01:14:02 element you return and if you're
  • 01:14:04 wondering about these parentheses here
  • 01:14:06 these are simply used so that we can
  • 01:14:08 write the HTML and I'm always saying
  • 01:14:11 HTML but keep in mind it's JSX it's
  • 01:14:14 JavaScript so that you can return this
  • 01:14:17 HTML code nicely structured across
  • 01:14:20 multiple lines without receiving errors
  • 01:14:22 this is why we use the parentheses so if
  • 01:14:25 that I could add a paragraph here where
  • 01:14:28 I say this is really working and that's
  • 01:14:32 closer to now with that we see that
  • 01:14:35 paragraph here Q and we had a look at
  • 01:14:37 some of the restrictions or things to
  • 01:14:39 watch out when using JSX
  • 01:14:41 because again it isn't HTML but in most
  • 01:14:44 cases it actually works just like it
  • 01:14:54 we already learned a lot about the core
  • 01:14:57 fundamentals of react especially this
  • 01:14:59 JSX thing which is super important to
  • 01:15:02 get right and to understand but I also
  • 01:15:05 mentioned in the first module of the
  • 01:15:07 course that react is all about
  • 01:15:09 components you build your application
  • 01:15:11 with components and react as a library
  • 01:15:14 which makes building these components so
  • 01:15:16 easy well right now we're only using one
  • 01:15:19 component time to change this and for
  • 01:15:22 this I'll add a new file in the source
  • 01:15:24 folder of our project I'll actually even
  • 01:15:27 add a new folder and I'll name it person
  • 01:15:29 with a capital P this is kind of the
  • 01:15:32 convention react you don't have to do
  • 01:15:34 that but you give your components the
  • 01:15:37 files where you create them capital
  • 01:15:40 starting characters and you describe
  • 01:15:43 what this component is basically
  • 01:15:44 therefore and here I want to render some
  • 01:15:47 information about a person inside that
  • 01:15:50 person folder which is stored in the
  • 01:15:52 source folder I'll trade a person dot
  • 01:15:54 J's file again following this convention
  • 01:15:58 of having a capital starting character
  • 01:16:00 and describing what this component is
  • 01:16:02 about now in there I want you to create
  • 01:16:05 a component and we already did this
  • 01:16:08 actually we got this out of the box in
  • 01:16:11 the app dot J's file by extending the
  • 01:16:14 component class from the react library
  • 01:16:17 we can absolutely use this approach and
  • 01:16:20 it will become more important later when
  • 01:16:22 you also learn about state which
  • 01:16:25 basically allows you to change your
  • 01:16:28 component at the runtime you could say
  • 01:16:29 but most of the time you should use a
  • 01:16:33 different form of component or of
  • 01:16:36 creating components a bear function a
  • 01:16:39 simple JavaScript function because in
  • 01:16:43 its simplest form a component is just a
  • 01:16:46 function which returns some JSX some
  • 01:16:50 HTML you could say now of course you
  • 01:16:53 can't create a function with the
  • 01:16:54 function keyword you could name a person
  • 01:16:56 here with lower case starting character
  • 01:16:59 which all this kind of convention your
  • 01:17:00 you could use a capital of one though
  • 01:17:02 and then you could return some JSX here
  • 01:17:06 you can't absolutely do that
  • 01:17:08 you could also use the es5 syntax off
  • 01:17:11 creating a variable which holds a
  • 01:17:13 function which in the end would result
  • 01:17:15 in the same but I will use es6 in this
  • 01:17:19 course which is strongly recommend doing
  • 01:17:21 it is kind of the best practice when
  • 01:17:23 creating react projects it gives you
  • 01:17:25 access to many new and modern features
  • 01:17:28 hence I will create a variable not with
  • 01:17:31 the water keyword but with the Const
  • 01:17:33 keyword because I don't plan on changing
  • 01:17:35 this variable effectively making it a
  • 01:17:37 constant and hence you should mark it as
  • 01:17:39 such I'll name it person with a
  • 01:17:42 lowercase character as I said you could
  • 01:17:45 choose person with a pro case P but you
  • 01:17:48 often see the function name being all
  • 01:17:51 lowercase it should otherwise be the
  • 01:17:53 same name as your file name though or as
  • 01:17:56 the component name you want to use then
  • 01:17:59 I will assign a value to this variable
  • 01:18:02 or constant to be precise and this
  • 01:18:05 should be a function now I could again
  • 01:18:07 use function here but actually I want to
  • 01:18:10 use the es6 function syntax this arrow
  • 01:18:13 function syntax so I will say equal
  • 01:18:17 argument list arrow function body this
  • 01:18:22 is just the es6 equivalent to the
  • 01:18:24 function created with the function
  • 01:18:26 keyword it holds some advantages
  • 01:18:29 especially when it comes to this keyword
  • 01:18:31 though so strongly recommend using this
  • 01:18:34 syntax if this is brand new to you now
  • 01:18:38 you know it and in general you might be
  • 01:18:40 interested in also diving into some es6
  • 01:18:43 courses or learning materials you will
  • 01:18:46 simply learn about all the awesome
  • 01:18:48 features es6 has to offer like this one
  • 01:18:51 back to this syntax though we
  • 01:18:54 effectively have a function here and as
  • 01:18:57 I said in its simplest form a component
  • 01:18:59 as a function returning some JSX
  • 01:19:02 so let's do that let's return some JSX
  • 01:19:05 and we could simply return a paragraph
  • 01:19:08 here where I say I'm a person now this
  • 01:19:15 alone creates a valid function which we
  • 01:19:18 could use as a component but we also
  • 01:19:20 have to do
  • 01:19:21 to other things do you have an idea what
  • 01:19:25 we have to do for one we need to import
  • 01:19:31 react because keep in mind this JSX
  • 01:19:34 syntax is transformed to react create
  • 01:19:37 element and to be able to call this
  • 01:19:40 method we need to import react with a
  • 01:19:43 capital R from the react package like
  • 01:19:47 this so just as we do in app J s here we
  • 01:19:52 don't need to component though because
  • 01:19:55 here we're not using a class which
  • 01:19:57 extends component instead we're creating
  • 01:19:59 a function we still need to export that
  • 01:20:03 function though as default of this file
  • 01:20:06 here we export this person constant
  • 01:20:09 which holds this function with that
  • 01:20:12 let's save the file so that this dot up
  • 01:20:15 here
  • 01:20:16 disappears and we only see the cross and
  • 01:20:18 now we can start using this component in
  • 01:20:21 other files of our project namely in the
  • 01:20:25 only our component our route component
  • 01:20:28 we have yet in the app dot JS file there
  • 01:20:32 I will add an import and I will import
  • 01:20:36 person this name is now totally up to
  • 01:20:39 you but it should be the name of your
  • 01:20:41 components starting with a capital
  • 01:20:42 character from dot slash because it's a
  • 01:20:49 relative path the person folder so
  • 01:20:54 referring to this folder which is in the
  • 01:20:56 same path as the app dot JS file and
  • 01:20:58 there the person dot JS file though we
  • 01:21:02 can omit the dot J s because it's added
  • 01:21:05 automatically by the build workflow now
  • 01:21:08 it's important that you gift is a name
  • 01:21:10 which starts with a uppercase character
  • 01:21:13 you could choose any other name it
  • 01:21:15 doesn't have to be person though it
  • 01:21:17 makes sense to use the name of your
  • 01:21:19 component but it should have a appliques
  • 01:21:21 character because in reactant JSX all
  • 01:21:25 elements starting with lowercase
  • 01:21:27 characters like therefore h1 are
  • 01:21:29 reserved for the native HTML elements so
  • 01:21:33 you could create your own component
  • 01:21:35 which you named if with an uppercase D
  • 01:21:37 and then react could use that because it
  • 01:21:41 wouldn't interfere with the normal death
  • 01:21:43 and for the same reason you should give
  • 01:21:46 your person the uppercase character so
  • 01:21:48 that react identifies it as a custom
  • 01:21:51 component so let's use person here and
  • 01:21:54 we can either use an opening and closing
  • 01:21:56 tag like this or since we don't nest
  • 01:22:00 anything between I'll come back to that
  • 01:22:02 in the next lectures too you can also
  • 01:22:05 use a self closing tag with slash and
  • 01:22:08 then the greater than sign at the end
  • 01:22:11 with that if you save this file to and
  • 01:22:14 you now go back to your application with
  • 01:22:16 NPM start still running in a terminal
  • 01:22:18 you see I'm a person being rendered
  • 01:22:21 below our app component content this is
  • 01:22:25 now coming from our own component and if
  • 01:22:28 we inspect it we see in the end we don't
  • 01:22:30 see our custom element we just see the
  • 01:22:33 paragraph we're exporting in the
  • 01:22:34 function and that is actually how it
  • 01:22:36 should be so this is now our own
  • 01:22:39 component getting used of course using
  • 01:22:43 it like this is already nice but what
  • 01:22:45 exactly is to benefit of creating it
  • 01:22:49 like this instead of simply adding the
  • 01:22:52 code right into the app dot J's file
  • 01:22:54 let's do more with this component to see
  • 01:22:57 that benefit in the next lecture
  • 01:23:06 in the last lecture we created our own
  • 01:23:09 component the person component the
  • 01:23:12 question is what's the big advantage of
  • 01:23:14 this components are awesome because we
  • 01:23:18 can focus our code in each file and
  • 01:23:21 hence make it much more maintainable not
  • 01:23:24 put everything into the after J's file
  • 01:23:26 which can really get crowded for bigger
  • 01:23:28 apps and this component is also reusable
  • 01:23:33 and configurable now come back to the
  • 01:23:36 configuring part reusing it is quite
  • 01:23:38 simple we can simply copy it and paste
  • 01:23:41 it as often as we want maybe three times
  • 01:23:44 and by simply doing this and saving that
  • 01:23:47 file we get the output multiple times
  • 01:23:50 and that is a super easy way of reusing
  • 01:23:53 it anywhere in our application and if
  • 01:23:55 our application would contain more and
  • 01:23:57 more components this would make it super
  • 01:24:00 easy to build it up with all these
  • 01:24:03 components and use them wherever we need
  • 01:24:05 to use them in our app this is now
  • 01:24:07 effectively our custom HTML element we
  • 01:24:11 also can configure it though
  • 01:24:14 before we do that let's change something
  • 01:24:18 else about our react code because right
  • 01:24:20 now it's all static still we have our
  • 01:24:23 custom component but in there we still
  • 01:24:25 just have some static HTML text some
  • 01:24:29 HTML content at the end now oftentimes
  • 01:24:33 your templates your JSX code should be
  • 01:24:36 dynamic should output different things
  • 01:24:39 depending on the state of your
  • 01:24:41 application or on some user input now we
  • 01:24:44 will do this a lot for the course but
  • 01:24:46 let's lay the foundations for that in
  • 01:24:48 the next lecture
  • 01:24:57 in the last lecture we replicated the
  • 01:24:59 person component let's now dive into
  • 01:25:02 outputting some dynamic content in react
  • 01:25:06 thus far we always hard-coded some HTML
  • 01:25:08 elements and I'm always saying HTML you
  • 01:25:12 know it's JSX just because it looks like
  • 01:25:14 HTML I'm saying that and some text in
  • 01:25:17 between now let's say we want to say I
  • 01:25:19 am a person and I am X years old but X
  • 01:25:27 should actually be a random number now
  • 01:25:31 we can simply do that we can replace X
  • 01:25:34 with math.random you get a random number
  • 01:25:40 between 0 & 1
  • 01:25:41 maybe multiply this with 30 and also use
  • 01:25:48 math.floor to round it down now if we do
  • 01:25:55 this and save that code well we see this
  • 01:25:59 output as a text which makes sense
  • 01:26:02 how would react note you execute this as
  • 01:26:05 JavaScript after all maybe we want to
  • 01:26:08 output it as a text if we have some
  • 01:26:11 dynamic content in our JSX part which we
  • 01:26:16 want to run as JavaScript code and not
  • 01:26:19 interpret as text we have to wrap it in
  • 01:26:23 single curly braces so let's wrap this
  • 01:26:27 in single curly braces one in front of
  • 01:26:30 math.floor and one after the closing
  • 01:26:32 parenthesis now if we save this we let
  • 01:26:37 this reload we see I'm 0 9 and 20 years
  • 01:26:40 old and if we reload this again we see
  • 01:26:43 different values because it's random now
  • 01:26:47 this is super important because this now
  • 01:26:50 shows us that we can output dynamic
  • 01:26:53 content as part of our JSX content we
  • 01:26:57 can't define a javascript class in there
  • 01:27:01 or anything like that we can execute
  • 01:27:04 one-line expressions short simple
  • 01:27:07 expressions like simple calculations or
  • 01:27:10 in calls here that is important by the
  • 01:27:12 way I could call a function and this
  • 01:27:16 function might then do more complex
  • 01:27:18 stuff will actually see us calling
  • 01:27:20 functions once we add event handlers now
  • 01:27:24 that we're able to output dynamic
  • 01:27:27 content why don't we take it to the next
  • 01:27:29 level and make our component more
  • 01:27:32 dynamic so that we can leave out putting
  • 01:27:35 some generic content like person and a
  • 01:27:37 random number and instead do something
  • 01:27:41 else pass some configuration from the
  • 01:27:44 app dot JS file maybe some HTML
  • 01:27:46 attributes we passed a person to
  • 01:27:49 configure what we want to output for
  • 01:27:52 each usage of the person component
  • 01:28:02 now that we know how to output dynamic
  • 01:28:04 content let's make our component
  • 01:28:07 configurable flexible and dynamic for
  • 01:28:11 normal HTML elements we can pass
  • 01:28:14 attributes like class name which we can
  • 01:28:16 add to any HTML attribute input element
  • 01:28:20 also would have the value attribute for
  • 01:28:22 example now for personal it would be
  • 01:28:24 nice if you could say name and maybe
  • 01:28:26 pass max an age and maybe pass 28 and
  • 01:28:32 for the sect usage we maybe want to pass
  • 01:28:36 menu and the age of 29 and for the third
  • 01:28:41 usage we maybe want to use Stephanie and
  • 01:28:45 pass an age of 26
  • 01:28:48 that's not my girlfriend by the way so
  • 01:28:51 if we do that we want to output this and
  • 01:28:55 maybe we even want to take it further
  • 01:28:57 and for menu we also want to split this
  • 01:29:01 in our opening and closing tag and also
  • 01:29:04 output some additional information like
  • 01:29:08 my hobbies which could be racing now
  • 01:29:13 with all of that in place we have to
  • 01:29:16 change something in our person component
  • 01:29:18 to handle that input because by default
  • 01:29:20 of course if we save this and we reload
  • 01:29:23 the app our output is unchanged because
  • 01:29:27 we're not using this information how
  • 01:29:29 would we how would react know what to do
  • 01:29:31 with that well it actually is able to
  • 01:29:35 take these attributes and gives us
  • 01:29:38 access inside our receiving component on
  • 01:29:42 object named prompts now actually the
  • 01:29:45 name here is up to you but you will
  • 01:29:47 receive one argument in your function
  • 01:29:49 one argument which is passed into it by
  • 01:29:52 default by react which is an object with
  • 01:29:55 all the properties of this component and
  • 01:29:58 properties means the attributes you add
  • 01:30:02 on your component now in react land this
  • 01:30:06 is referred to as props which is why I
  • 01:30:08 named its argument props and I strongly
  • 01:30:10 recommend doing so so that everyone else
  • 01:30:13 understands your code cue
  • 01:30:14 theoretically you're free to name this
  • 01:30:17 differently though so now that we have
  • 01:30:20 props we can get access to that name and
  • 01:30:23 age thing so we could say I am and now
  • 01:30:26 use single curly braces to output
  • 01:30:28 something dynamic I am props name and I
  • 01:30:32 am years old now here I will keep the
  • 01:30:38 curly braces but replace the random
  • 01:30:42 calculation with props age
  • 01:30:44 I'm props name and I'm props years old
  • 01:30:48 let's now save this and let's see what
  • 01:30:53 happens if this now reloads in our
  • 01:30:55 application if it doesn't reload reload
  • 01:30:57 manually you should see IMAX and 20
  • 01:31:01 years old menu and Stephanie and all the
  • 01:31:04 ages so now we're having the best of
  • 01:31:06 both worlds we have a reusable component
  • 01:31:09 which has a clearly defined template but
  • 01:31:12 in there we use dynamic content which we
  • 01:31:16 set from outside in the place where we
  • 01:31:19 actually use our component this makes it
  • 01:31:22 really real think about all the
  • 01:31:25 possibilities which we will also explore
  • 01:31:27 in this course having an input component
  • 01:31:29 where you can set the type from outside
  • 01:31:32 having this person component which might
  • 01:31:35 be styled like a card to output dynamic
  • 01:31:38 or different content for the different
  • 01:31:40 persons that is truly an amazing world
  • 01:31:43 of features we can access here and it's
  • 01:31:46 one important step towards really
  • 01:31:48 building great and flexible components
  • 01:31:51 what about the hobbies here though let's
  • 01:31:56 have a look at how we can use content
  • 01:31:58 which is passed
  • 01:31:59 not as a attribute but between the
  • 01:32:02 opening and closing tags in the next
  • 01:32:05 lecture
  • 01:32:12 in the last lecture we learned how to
  • 01:32:15 use props how to receive them as an
  • 01:32:17 argument and output them dynamically in
  • 01:32:19 our code now I also want to output
  • 01:32:23 whatever we pass between the opening and
  • 01:32:25 closing tag of our custom component and
  • 01:32:28 this is actually super simple too there
  • 01:32:31 is a special prop we can access react
  • 01:32:34 gives us access to it to be precise in
  • 01:32:37 the person component where we want to
  • 01:32:39 receive it in the end I will wrap my
  • 01:32:42 paragraph in normal parentheses so that
  • 01:32:46 I can write this over multiple lines
  • 01:32:48 because I now also want to create a
  • 01:32:50 wrapping element simply a div and I want
  • 01:32:55 you wrap the paragraph inside of this
  • 01:32:58 div and also add another element after
  • 01:33:02 this paragraph this our element should
  • 01:33:06 also be a paragraph maybe but it should
  • 01:33:10 be a paragraph which outputs this part
  • 01:33:14 we pass in between we can simply do that
  • 01:33:18 by using single Collie braces to output
  • 01:33:22 something dynamic accessing props and
  • 01:33:25 then here the special children property
  • 01:33:30 this is a reserved word we didn't pass
  • 01:33:34 anything as children on our persons we
  • 01:33:37 only pass name and age children refers
  • 01:33:41 to any elements and just includes plain
  • 01:33:44 text as we have it here between the
  • 01:33:46 opening and closing tag off our
  • 01:33:48 component and you could nest complex
  • 01:33:52 HTML code in between – this doesn't have
  • 01:33:54 to be just text could be an unordered
  • 01:33:57 list with multiple list items could be
  • 01:33:59 our react components anything can go
  • 01:34:02 between here and these children are now
  • 01:34:06 output with this syntax of course you
  • 01:34:09 don't have to wrap it in a paragraph you
  • 01:34:11 can use it anywhere in your JSX code and
  • 01:34:13 after saving this we see my hobbies
  • 01:34:17 racing for menu where as Max and
  • 01:34:20 Stephanie still output the outer content
  • 01:34:22 only because there we don't pass any
  • 01:34:25 children
  • 01:34:26 we inspected we see that an empty
  • 01:34:29 paragraph is rendered though so the
  • 01:34:31 paragraphs there it's just empty because
  • 01:34:35 props children is basically undefined
  • 01:34:38 it's null because we have nothing
  • 01:34:40 between opening and closing tag this is
  • 01:34:43 important to know you can put your
  • 01:34:46 content into your component from outside
  • 01:34:51 not only by passing props like this but
  • 01:34:54 if you want to pass some structured HTML
  • 01:34:57 content also by placing it between the
  • 01:35:00 opening and closing tag and accessing it
  • 01:35:03 with props children
  • 01:35:12 in the last lectures we had a look at
  • 01:35:14 props props simply an object giving us
  • 01:35:18 access to all the attributes we pass to
  • 01:35:21 our own components now sometimes you
  • 01:35:24 don't want to get some information from
  • 01:35:26 outside but you want to have it inside a
  • 01:35:30 component and change it from inside
  • 01:35:32 there too so for example here in our app
  • 01:35:36 JS file let's say we also want to add a
  • 01:35:41 button which if we click it simply
  • 01:35:45 switches one of the names we use here so
  • 01:35:48 where we simply put a caption of switch
  • 01:35:51 name maybe well we'll come to handling
  • 01:35:55 this click event in the next lectures
  • 01:35:57 but first of all we need to define these
  • 01:36:01 names here in a non hard-coded way right
  • 01:36:05 now it's hard-coded into our JSX code
  • 01:36:08 and this is okay here but if we later
  • 01:36:10 want to change it we have to store it in
  • 01:36:13 some variable or something like that
  • 01:36:15 well this actually is a class and a
  • 01:36:19 class has properties this is not just
  • 01:36:23 the case in JavaScript but in other
  • 01:36:25 programming languages too you can kind
  • 01:36:28 of think of a property as a variable of
  • 01:36:31 class so in normal JavaScript code you
  • 01:36:35 would simply write var something equals
  • 01:36:37 some value this doesn't work in a class
  • 01:36:42 there you can simply write something
  • 01:36:45 equals some value so a bit shorter but
  • 01:36:50 in the end the same you could say
  • 01:36:52 there's one special property you can
  • 01:36:55 find in any component which extends
  • 01:36:59 component so you can't do it in person
  • 01:37:02 you can't define properties here anyways
  • 01:37:04 because that's a normal function so here
  • 01:37:07 you would have to use some constants or
  • 01:37:09 some variables still what we're about
  • 01:37:11 you only works in components which are
  • 01:37:15 created by extending component there we
  • 01:37:18 can define a special property named
  • 01:37:20 state where as props are set and passed
  • 01:37:25 from outside like name and age into the
  • 01:37:28 person component state is managed from
  • 01:37:31 inside a component and state is only
  • 01:37:34 available in components which are used
  • 01:37:37 by extending component which is imported
  • 01:37:40 from react it's not available in
  • 01:37:43 function components still you should use
  • 01:37:47 function components as often as possible
  • 01:37:50 because you should use state with care
  • 01:37:53 because having state and all your
  • 01:37:56 components and manipulating it from
  • 01:37:58 anywhere in your app makes your app
  • 01:38:00 quickly unpredictable and hard to manage
  • 01:38:02 especially as it grows of course it
  • 01:38:05 doesn't mean you shouldn't use it and
  • 01:38:06 although here it makes perfect sense
  • 01:38:09 we initialize it by assigning a value
  • 01:38:11 and this value is a JavaScript object
  • 01:38:14 again this is a reserved word and we
  • 01:38:18 should use it if we want to manage well
  • 01:38:21 some component internal data you should
  • 01:38:25 say so now the state could have some
  • 01:38:29 persons this is totally up to you
  • 01:38:33 I simply create a person's property in
  • 01:38:35 this JavaScript object and this will be
  • 01:38:38 an array and you can set up any kind of
  • 01:38:41 data you want in this state object you
  • 01:38:44 could set up a name property which is
  • 01:38:46 some name you can really manage whatever
  • 01:38:50 you want here I want to manage an array
  • 01:38:52 of persons though now this person's
  • 01:38:55 array again is an array of JavaScript
  • 01:38:59 objects where each object has a name
  • 01:39:01 maybe max and the age maybe 28 a number
  • 01:39:06 here
  • 01:39:06 not a string unlike down there what we
  • 01:39:09 do pass a string but a number is fine
  • 01:39:11 for me here I also want to have another
  • 01:39:16 one here name menu and age 29 and a
  • 01:39:21 third one you guessed it for Stephanie
  • 01:39:24 which has a age of 26 now this is my
  • 01:39:30 state we can now access a property like
  • 01:39:34 this and that's not just true for state
  • 01:39:36 but for any property
  • 01:39:38 in our render method by simply
  • 01:39:41 outputting something dynamic with single
  • 01:39:44 quality braces as you learn it and then
  • 01:39:46 the dis keyword this refers to the class
  • 01:39:51 due to our es6 syntax reusing and on our
  • 01:39:56 class we have a render method we could
  • 01:39:59 call we shouldn't do that though react
  • 01:40:01 us that but we have a state property and
  • 01:40:04 as I said you can also define your own
  • 01:40:06 properties but state is a special one as
  • 01:40:08 you will learn over the next lectures so
  • 01:40:11 here it can then access this state and
  • 01:40:13 on state my persons array there may be
  • 01:40:17 the first element by using index 0 and
  • 01:40:21 then the name so instead of hard-coding
  • 01:40:24 it I'm now accessing this property in
  • 01:40:27 this object here in the person's array
  • 01:40:30 on the state property now I'll copy this
  • 01:40:34 code here and replace my age with it Q
  • 01:40:38 there I of course want to access the H
  • 01:40:41 property and I'll replicate this for
  • 01:40:44 menu but here it's of course the first
  • 01:40:47 element at the second element with index
  • 01:40:49 1 in this array and for the age
  • 01:40:52 I'll also access element 1 and of course
  • 01:40:55 th property and for Stephanie you
  • 01:40:59 probably guess that index 2 and also for
  • 01:41:03 the H index 2 and H property with that
  • 01:41:07 if we save this and we go back to the
  • 01:41:09 application we see the button which
  • 01:41:11 doesn't do anything and we see the same
  • 01:41:13 output as before this time using a
  • 01:41:17 property the state property though now I
  • 01:41:20 said state would be a special property
  • 01:41:22 thus far we don't use it in a special
  • 01:41:25 way though we can change this state can
  • 01:41:30 be changed and if it changes and that's
  • 01:41:32 the special thing about it and it only
  • 01:41:34 works on that state property if it
  • 01:41:37 changes it will lead react to re-render
  • 01:41:42 our Dom or to update the Dom I should
  • 01:41:45 say so if we change the name of max you
  • 01:41:49 for example this will lead
  • 01:41:52 – this being rendered and let me prove
  • 01:41:56 it to you by also showing you how to
  • 01:41:59 listen to events like clicking on this
  • 01:42:01 button
  • 01:42:08 in the last lecture we set up state and
  • 01:42:12 I told you that it would be special but
  • 01:42:13 we don't really see that yet
  • 01:42:15 or would you right now is manage our
  • 01:42:17 data there and then accessed it in our
  • 01:42:19 JSX code in the app dot JS file
  • 01:42:22 let's now handle a click on this button
  • 01:42:25 we do this by adding on click now this
  • 01:42:30 is important in normal JavaScript and
  • 01:42:33 normal HTML to be precise it would be on
  • 01:42:36 click with a lowercase C now in JSX and
  • 01:42:39 that is really important it's on click
  • 01:42:41 with a capital C still we then assign as
  • 01:42:46 a value the code you want to execute
  • 01:42:48 upon a click and there we can use curly
  • 01:42:52 braces to execute some dynamic code now
  • 01:42:57 typically you want to execute a function
  • 01:43:01 of your class a so-called method there
  • 01:43:05 and there's a convention to give this a
  • 01:43:07 name like the following switch name
  • 01:43:11 handler maybe now the first part switch
  • 01:43:14 name is totally up to you but you
  • 01:43:16 typically use handler here to indicate
  • 01:43:19 that this is a method you're not
  • 01:43:21 actively calling but you're assigning as
  • 01:43:24 an event handler it's not required you
  • 01:43:27 follow this pattern though you can name
  • 01:43:29 this whatever you want of course it is a
  • 01:43:31 good practice to name it like this
  • 01:43:32 though so switch name handler now should
  • 01:43:37 be a function now if you just said equal
  • 01:43:40 right now it is just the same syntax as
  • 01:43:43 for the state property but if we assign
  • 01:43:46 a function as a value here it becomes a
  • 01:43:49 method basically it does a property you
  • 01:43:51 could say but a property which holds a
  • 01:43:53 function which can be executed here I'll
  • 01:43:56 also use a es6 arrow function keep in
  • 01:44:00 mind this is just a normal function the
  • 01:44:03 end and there I now want to edit my
  • 01:44:07 state
  • 01:44:08 well the furbies before we do this let's
  • 01:44:10 see if we can call this successfully I
  • 01:44:12 will say console.log was clicked so that
  • 01:44:17 we can see something in a console once
  • 01:44:18 this was clicked and I will go to my
  • 01:44:22 click
  • 01:44:22 listener and between Akali braces I can
  • 01:44:25 now run this switch name Handler and
  • 01:44:29 don't add parenthesis don't do this
  • 01:44:33 this would execute it immediately once
  • 01:44:36 react renders this to the Dom because
  • 01:44:39 you execute this function with the
  • 01:44:41 parentheses we only want to pass a
  • 01:44:43 reference and we do this by using this
  • 01:44:47 and then referring to that property
  • 01:44:49 which holds a function important if you
  • 01:44:54 don't use the dis syntax here basically
  • 01:44:56 where you assign a function to a
  • 01:44:58 property you could say you will run into
  • 01:45:01 errors if you try to use this as we will
  • 01:45:06 soon do in this switch name handler
  • 01:45:09 function because this will then not
  • 01:45:12 refer to the class at runtime simply to
  • 01:45:15 you how to this works in es5 JavaScript
  • 01:45:18 by using this es6 syntax we circumvent
  • 01:45:22 this problem which will become important
  • 01:45:24 later for now important don't add
  • 01:45:27 parentheses here just pass a reference
  • 01:45:30 to this function with that let's save
  • 01:45:32 this file and let's now open the console
  • 01:45:35 and the developer tools and click switch
  • 01:45:37 name and you should see was clicked in
  • 01:45:40 your developer tools here now that's
  • 01:45:44 nice now let's also change the state
  • 01:45:47 we'll do this in the next lecture
  • 01:45:56 in the last lecture we execute a switch
  • 01:45:59 name handler upon a click now we want to
  • 01:46:02 manipulate the state upon the click so
  • 01:46:05 comment out this console log statement
  • 01:46:07 and we could simply do this state
  • 01:46:11 reaching out to this state property here
  • 01:46:14 and as I mentioned this will only work
  • 01:46:16 when using this syntax otherwise this
  • 01:46:19 here will not refer to the class and
  • 01:46:21 will therefore not be able to reach that
  • 01:46:23 state property but here it will work so
  • 01:46:26 this stay persons then maybe access
  • 01:46:30 prism 1 and set the name to Maximilian
  • 01:46:33 my full name
  • 01:46:35 let's safe doesn't let's see what
  • 01:46:37 happens if we execute this code we
  • 01:46:40 already get a warning here but let's
  • 01:46:42 ignore it for now and let's click switch
  • 01:46:44 name nothing changes we still see max
  • 01:46:47 here well as I said we do get a warning
  • 01:46:50 about this
  • 01:46:51 we shouldn't mutate which means change
  • 01:46:54 the state directly like this react will
  • 01:46:58 not recognize that and will not pick up
  • 01:47:01 this change so don't do this instead use
  • 01:47:05 a special method react gives you you
  • 01:47:08 also access this with this and then it's
  • 01:47:11 set state we haven't defined this method
  • 01:47:14 but remember that we extend component
  • 01:47:17 and this is made available by the react
  • 01:47:20 library and the component object happens
  • 01:47:23 to have a set state method this is a
  • 01:47:26 method which allows us to update this
  • 01:47:28 special state property here and it will
  • 01:47:32 then ensure that react gets to know
  • 01:47:35 about this update and updates the dawn
  • 01:47:39 set state takes an object as an argument
  • 01:47:42 and it will merge whatever we define
  • 01:47:46 here with our existing state so if I
  • 01:47:50 here said persons queue an updated array
  • 01:47:55 it will merge this with existing data so
  • 01:47:59 if we had some other state here which is
  • 01:48:04 some our value then this would not get
  • 01:48:07 touched even if we only update persons
  • 01:48:10 not clear what I mean let me show you
  • 01:48:12 I'm copying persons and I basically
  • 01:48:16 adding this as a property in the object
  • 01:48:19 I'm about to use as my update here so
  • 01:48:22 I'm saying this set state and set state
  • 01:48:27 takes this new object where I update my
  • 01:48:31 purses where I only change the first
  • 01:48:33 person or maybe also let's change
  • 01:48:36 Stephanie let's change their age her age
  • 01:48:38 to 27 now what will do what react will
  • 01:48:42 do for us is it will look at our state
  • 01:48:45 and see which part of it were overriding
  • 01:48:49 or changing persons it will not discard
  • 01:48:54 our state but it will simply merge the
  • 01:48:57 old state with the new one will
  • 01:49:00 overwrite persons since we clearly
  • 01:49:02 define a new version of persons here but
  • 01:49:05 we'll leave our state untouched because
  • 01:49:08 we're not saying anything about it here
  • 01:49:10 and it will not discard it which of
  • 01:49:12 course is a good thing you don't want to
  • 01:49:14 have to update everything about your
  • 01:49:16 state whenever you want to change only a
  • 01:49:18 tiny piece about it so with that let's
  • 01:49:22 now see what happens if we save this
  • 01:49:23 file if we save it now and reload the
  • 01:49:26 app and I click switch name watch Max
  • 01:49:29 and watch 26 years old down there you
  • 01:49:33 see that it's max million and 27 years
  • 01:49:37 now the dom was updated because react
  • 01:49:41 recognized that the state of our
  • 01:49:43 application changes and this really is a
  • 01:49:46 special thing there are many things
  • 01:49:49 which lead react to update the Dom
  • 01:49:52 they're actually only our to changing
  • 01:49:55 state and what else you could already
  • 01:49:59 see it in action props we change state
  • 01:50:03 that's nice but keep in mind what we
  • 01:50:06 actually output for each person is
  • 01:50:08 defined in this person component and
  • 01:50:11 there we don't use state and as I said
  • 01:50:14 we can't use it there because this uses
  • 01:50:16 this function syntax here we use props
  • 01:50:20 and that's the our thing react watches
  • 01:50:23 out for
  • 01:50:23 if state changes or props changes it
  • 01:50:27 basically analyzes the code it already
  • 01:50:30 rendered to the DOM and the code it
  • 01:50:32 would now render if it were to re render
  • 01:50:35 everything and then it updates the
  • 01:50:37 existing Dom in all the places where it
  • 01:50:40 needs to update it to reflect your new
  • 01:50:42 state and props new state in app shares
  • 01:50:45 new props in person Jas
  • 01:50:55 in the last lectures we learned a lot
  • 01:50:58 about state and props we learned that
  • 01:51:00 these are the only two things which lead
  • 01:51:01 react to update your Dom if something
  • 01:51:04 changed now I also mentioned that when
  • 01:51:09 creating a component as a function as we
  • 01:51:12 do for person we can't use state in
  • 01:51:14 there because it's just a function where
  • 01:51:16 we returns I'm JSX code granted we could
  • 01:51:19 run our code before doing that and you
  • 01:51:22 often do that if you need to transform
  • 01:51:24 your props first or something like that
  • 01:51:26 but you can't set up a state property
  • 01:51:29 here you can't call this set state
  • 01:51:32 because it's no class extending
  • 01:51:35 component the set state method is not
  • 01:51:37 known and we don't have methods anyways
  • 01:51:38 it's no class it's a function and still
  • 01:51:42 I mentioned that you should use this
  • 01:51:44 function form of components as often as
  • 01:51:48 possible and then we'll emphasize it
  • 01:51:50 here one more time why is this so
  • 01:51:53 important because these simple
  • 01:51:57 components which are just functions
  • 01:51:59 receiving props are very clear about
  • 01:52:03 what they do they only render something
  • 01:52:06 to the Dom they are dynamic because of
  • 01:52:09 props and you can add some additional
  • 01:52:11 logic prior to calling return but and
  • 01:52:15 that's super important
  • 01:52:17 they don't manipulate your application
  • 01:52:19 state as your application grows you will
  • 01:52:22 see that this is not so unimportant this
  • 01:52:26 is actually really important most parts
  • 01:52:29 of your application shouldn't change the
  • 01:52:32 application state they should just
  • 01:52:35 render something to the Dom dynamic yes
  • 01:52:38 but they shouldn't allow you to change
  • 01:52:40 your application state your application
  • 01:52:43 state should only be changed and handled
  • 01:52:46 in a few selected components also
  • 01:52:49 referred to as containers
  • 01:52:51 yep J's would be such a container that's
  • 01:52:54 just in our name it is a component but
  • 01:52:56 we refer to it as container because it
  • 01:52:59 contains some part of our application
  • 01:53:01 state in our demo application actually
  • 01:53:04 all of the application state here we can
  • 01:53:08 change something about our app and with
  • 01:53:10 then we pass these changes down to for
  • 01:53:13 example the person component but that's
  • 01:53:15 it the change happens in app KS and once
  • 01:53:20 we start building the course project you
  • 01:53:22 will see me use this pattern I will have
  • 01:53:25 a few components where the state
  • 01:53:28 actually lives and gets changed and a
  • 01:53:31 lot of components which take some inputs
  • 01:53:34 and then just render something into the
  • 01:53:36 screen but which won't directly
  • 01:53:39 manipulate the state still you might
  • 01:53:42 have cases where maybe you also want to
  • 01:53:45 listen to an event in the person
  • 01:53:48 component or in any other component now
  • 01:53:51 of course you could turn this into a
  • 01:53:53 component which extends component so
  • 01:53:55 that you can define methods which you
  • 01:53:57 execute but maybe you want to listen to
  • 01:54:01 an event here but execute some method in
  • 01:54:05 fjs so that you can keep that pattern of
  • 01:54:08 changing the name in apps yes but
  • 01:54:11 actually listening to the event in the
  • 01:54:15 naaru component let's have a look at how
  • 01:54:17 we can handle this
  • 01:54:19 and change the state from a novel
  • 01:54:23 component in the next lecture
  • 01:54:32 so let's say we want to call the switch
  • 01:54:34 name handler which I recognized all
  • 01:54:37 changes th so maybe the name wasn't
  • 01:54:40 chosen perfectly let's say we want to
  • 01:54:42 call that not when clicking this button
  • 01:54:45 here or not only when clicking this
  • 01:54:47 button but also let's say when clicking
  • 01:54:51 any paragraph here the paragraph which
  • 01:54:55 contain it contains name and age inside
  • 01:54:57 a person component now for dad in the
  • 01:55:00 person component we could add on click
  • 01:55:03 but now what we can't call that handler
  • 01:55:07 method it's in a different file in a
  • 01:55:09 different class well we can actually
  • 01:55:13 pass a reference to this handler as a
  • 01:55:16 property to our component and this is no
  • 01:55:19 fancy heck this is actually a very
  • 01:55:22 common pattern I will first of all
  • 01:55:25 restructure this over multiple lines for
  • 01:55:27 all these components so that we have an
  • 01:55:29 easier time seeing which properties were
  • 01:55:32 passing and then let's say I don't even
  • 01:55:34 want to pass this for all the components
  • 01:55:37 but only for this usage of it so here I
  • 01:55:41 will add a new property which I'll name
  • 01:55:45 click and the name is totally up to you
  • 01:55:48 here I will pass a reference to this
  • 01:55:51 switch name handler so basically what I
  • 01:55:55 also did here this switch name Handler
  • 01:55:57 on the click on the button here I'm
  • 01:56:00 passing it as a reference to this click
  • 01:56:04 property and now we can use this click
  • 01:56:07 property in person Jas there
  • 01:56:11 I now can simply call props click
  • 01:56:14 because click is the name of the
  • 01:56:17 property I defined here and this will
  • 01:56:19 execute this function which I pass as a
  • 01:56:21 reference so if we save all the files
  • 01:56:24 app J as in person chairs we should see
  • 01:56:28 that in our application we can of course
  • 01:56:31 still click this button to change the
  • 01:56:33 name of Maximilian at the age of
  • 01:56:34 Stephanie but if they reload again we
  • 01:56:37 can also click this paragraph with menu
  • 01:56:40 here you also see it changed name and
  • 01:56:42 the years
  • 01:56:45 something important to understand an
  • 01:56:48 important pattern you can't pass methods
  • 01:56:52 also as props so that you can call a
  • 01:56:56 method which might change the state in
  • 01:56:58 another component which doesn't have
  • 01:57:01 direct access to the state and which
  • 01:57:03 shouldn't have direct access to the
  • 01:57:04 state it's a common pattern and it's
  • 01:57:07 important to know you can pass down
  • 01:57:09 click handlers which allow you to change
  • 01:57:12 data in the parent component in the app
  • 01:57:15 component in this case for the person
  • 01:57:17 component maybe we also want to pass a
  • 01:57:21 value to our function maybe here switch
  • 01:57:26 name handler should receive the new name
  • 01:57:28 so that here where I hard-coded
  • 01:57:31 Maximillian as the new name i actually
  • 01:57:33 set name equal to new name now how do we
  • 01:57:38 pass that data there are two ways of
  • 01:57:41 doing that
  • 01:57:42 the first is that you call bind here you
  • 01:57:47 may simply bind this this controls what
  • 01:57:52 this inside the function will refer to
  • 01:57:54 and by binding it to this here outside
  • 01:57:57 of the function we're binding it to the
  • 01:57:59 class might look strange but as a
  • 01:58:01 typical way of handling that this issue
  • 01:58:03 in JavaScript we wouldn't have need to
  • 01:58:05 do that though but we can use this
  • 01:58:08 syntax because I also want to pass a
  • 01:58:11 second argument to bind this now is a
  • 01:58:13 list of arguments actually which will be
  • 01:58:17 passed into our function and here this
  • 01:58:20 should be the new name so here this
  • 01:58:22 could be a Maximilian and to really see
  • 01:58:25 a difference let's copy that bind code
  • 01:58:28 and that's also find it down here when
  • 01:58:30 we pass the function as a reference to
  • 01:58:32 the click prop and let's change this to
  • 01:58:37 max with an exclamation mark here so
  • 01:58:40 that we can see a difference depending
  • 01:58:41 on where we clicked if we now save this
  • 01:58:45 with bind added and this received as an
  • 01:58:48 argument of the switch name handler
  • 01:58:50 let's see what happens if I click switch
  • 01:58:53 name I'm still changing it to Maximilian
  • 01:58:57 here which makes sense because this is
  • 01:58:59 what I
  • 01:58:59 – but that it works conference that it
  • 01:59:02 works with receiving an argument and
  • 01:59:03 never click on the I menu paragraph you
  • 01:59:07 see that it changed you max with an
  • 01:59:10 exclamation mark so this is a way of
  • 01:59:12 passing an argument it's not the only
  • 01:59:15 way though I will leave one of the two
  • 01:59:18 code snippets you with bind to show you
  • 01:59:20 how this works I'll also show you an
  • 01:59:23 alternative syntax though so I'll leave
  • 01:59:25 point here will be pass it as props but
  • 01:59:28 we could use this new syntax I'm showing
  • 01:59:30 you now also down there
  • 01:59:32 this new syntax looks different here on
  • 01:59:36 on click I actually execute a arrow
  • 01:59:40 function which takes no arguments though
  • 01:59:44 theoretically it would receive an event
  • 01:59:45 object by the way but I won't use that
  • 01:59:48 here and then simply as a function body
  • 01:59:53 returns this function call now you're a
  • 01:59:57 couple of things you have to understand
  • 01:59:59 first of all when using an arrow
  • 02:00:01 function this implicitly adds a return
  • 02:00:05 keyword in front of the code which comes
  • 02:00:08 directly after the arrow if it's all
  • 02:00:11 written in one line the alternative is
  • 02:00:13 to wrap this in curly braces and write a
  • 02:00:15 normal function body so this gets
  • 02:00:18 returned and what I return is a function
  • 02:00:21 call this is why I added the parentheses
  • 02:00:24 now in an earlier lecture I said that
  • 02:00:27 you shouldn't call this and that was
  • 02:00:29 true but here this is not getting
  • 02:00:32 executed immediately instead what we
  • 02:00:34 pass here is an anonymous function which
  • 02:00:37 will be executed on a click and which
  • 02:00:40 then returns the result of this function
  • 02:00:42 getting executed which of course simply
  • 02:00:45 leads to dysfunction getting executed
  • 02:00:47 this is useful because now here we can
  • 02:00:50 easily pass our data maximally and with
  • 02:00:55 two exclamation marks maybe if I now
  • 02:00:58 save this and I click switch name we see
  • 02:01:02 Maximilian with two exclamation marks
  • 02:01:04 now this is a very convenient syntax but
  • 02:01:07 it can be inefficient react can rerender
  • 02:01:11 certain things
  • 02:01:12 your app too often so I don't
  • 02:01:15 necessarily recommend using this if you
  • 02:01:17 don't have to use the bind syntax
  • 02:01:19 instead if you can still I'll leave it
  • 02:01:22 here you may use it and depending on the
  • 02:01:25 size of your application you also might
  • 02:01:27 not feel that big of a performance hit
  • 02:01:29 but be aware that this can be
  • 02:01:32 inefficient
  • 02:01:40 we covered a lot and we changed a lot of
  • 02:01:42 names here but what if we actually want
  • 02:01:46 to change the name on our own so let's
  • 02:01:50 say that in the person component here we
  • 02:01:54 actually also have another element a
  • 02:01:57 normal input element which is of type
  • 02:01:59 text and that's it should be self
  • 02:02:03 closing now whenever we type something
  • 02:02:06 there we want to use what we type here
  • 02:02:08 as a new name now for that we can listen
  • 02:02:14 to a special event on change on change
  • 02:02:17 will be fired whenever the value in this
  • 02:02:20 input changes and here I then want to
  • 02:02:24 execute some method which I need to pass
  • 02:02:28 down from my app JS file we got that
  • 02:02:32 switch name Handler and I will leave it
  • 02:02:36 as it is and instead add a new handler
  • 02:02:39 I'll name it name changed handler I
  • 02:02:43 expect to get an event object here we
  • 02:02:47 haven't used that before but in there I
  • 02:02:50 still want to change the state now of
  • 02:02:53 course theoretically you would want to
  • 02:02:56 change the state or the name of the
  • 02:02:59 person for which we type this this is
  • 02:03:03 something we'll do later in the course
  • 02:03:05 once we learned how to correctly render
  • 02:03:08 a list of dynamic elements so for now I
  • 02:03:11 will always change the name of menu here
  • 02:03:14 so max will stay Max and man and
  • 02:03:18 Stephanie should keep our age of twenty
  • 02:03:19 six maybe even but man you should change
  • 02:03:22 its name no matter in which instance of
  • 02:03:26 this person component I type again this
  • 02:03:29 is something we will fix later so here I
  • 02:03:33 will get an event and as you might know
  • 02:03:36 for JavaScript events this event
  • 02:03:38 probably has a target the target doesn't
  • 02:03:42 make for a good name value though but
  • 02:03:44 the target should be the input into
  • 02:03:48 which we typed so it should actually
  • 02:03:51 also have a value property which is the
  • 02:03:53 value
  • 02:03:54 user entered and therefore this now
  • 02:03:56 makes for a good updated value for name
  • 02:04:01 so event target value is what I want to
  • 02:04:04 sign as a new name for manual again for
  • 02:04:06 the time being no matter into which
  • 02:04:08 input of which component I typed name
  • 02:04:12 changed handler is my handler now I need
  • 02:04:16 to pass this cue a component to be able
  • 02:04:19 to access it from there
  • 02:04:21 and since I only can change menu I will
  • 02:04:24 only pass it to demand new person that
  • 02:04:26 we could pass it to any other of course
  • 02:04:29 here I will simply name this changed and
  • 02:04:34 pass this name changed handler following
  • 02:04:39 the same logic as for the click event
  • 02:04:41 inside the person I can now access this
  • 02:04:45 changed property and simply call props
  • 02:04:48 changed here or not call it don't add
  • 02:04:53 parenthesis but simply pass the
  • 02:04:56 reference to it and keep in mind this
  • 02:04:58 refers to the method we declared in fjs
  • 02:05:02 this name changed handler the event
  • 02:05:05 object will actually be passed to it
  • 02:05:08 automatically by react like a normal
  • 02:05:11 Java Script where you also by default
  • 02:05:12 get access to the event object with that
  • 02:05:16 let's save this and let's see what
  • 02:05:17 happens
  • 02:05:18 we got inputs below all components but
  • 02:05:21 for most of them nothing happens if i
  • 02:05:22 type in them for a man you though you
  • 02:05:25 see with every keystroke the name
  • 02:05:27 updates manual whatever i want to type
  • 02:05:30 there this is because we bound on change
  • 02:05:34 queue this prop changed which holds a
  • 02:05:38 reference to the name changed handler
  • 02:05:40 and we then used this default event
  • 02:05:42 object to extract the target which is
  • 02:05:44 the input element and then the value of
  • 02:05:46 the target which is what we entered this
  • 02:05:49 shows is actually two things how we can
  • 02:05:52 dynamically update something dynamically
  • 02:05:54 call an event and use the things we
  • 02:05:56 learned before like passing down event
  • 02:05:58 references or method references I should
  • 02:06:01 say but it all just shows us how we can
  • 02:06:04 handle inputs now it would also be nice
  • 02:06:07 if we would see the current value of the
  • 02:06:12 name in the input right from the start
  • 02:06:14 so we basically want to set up two-way
  • 02:06:17 binding when we change it we want to
  • 02:06:20 propagate that change so that we can
  • 02:06:23 update the state but we also want to see
  • 02:06:26 the current state right from the start
  • 02:06:28 to do this I can set value equal to
  • 02:06:32 props name this is the name after all
  • 02:06:37 and now we have our own two-way binding
  • 02:06:39 setup we listen to changes call the
  • 02:06:43 changed method in the end which refers
  • 02:06:45 to the name change handler which UPS
  • 02:06:48 updates the state and we pass down the
  • 02:06:51 state to the person with name and age
  • 02:06:53 and we output the name as the value of
  • 02:06:57 the input this now allows us to show
  • 02:07:01 that value right from the start and here
  • 02:07:04 I actually get a warning this warning
  • 02:07:06 theoretically makes sense because if you
  • 02:07:08 provide a value prop without an on
  • 02:07:11 change handler here you actually run
  • 02:07:14 into problems because you're binding the
  • 02:07:17 value to your property without allowing
  • 02:07:19 yourself to react to changes hence you
  • 02:07:22 would lock your input down I could show
  • 02:07:24 it as if I remove on change now you'll
  • 02:07:27 see we still see the values but if I
  • 02:07:29 type there nothing happens I can't type
  • 02:07:31 because we're not handling changes so we
  • 02:07:34 always override whatever we try to type
  • 02:07:36 with the existing name prop if I
  • 02:07:40 reintroduce on change though the error
  • 02:07:43 stays here which is simply a false alarm
  • 02:07:46 as you can clearly see I can type
  • 02:07:49 because I am hand able to handle my
  • 02:07:51 changes update my state update my props
  • 02:07:54 and hence reflect my changes in the
  • 02:07:57 input here too so we got a working two
  • 02:07:59 way binding and we're able to change the
  • 02:08:02 name dynamically now again keep in mind
  • 02:08:04 only for manual because we haven't set
  • 02:08:07 up the logic for the aburrá inputs
  • 02:08:09 hence we can't type there because we
  • 02:08:11 can't update these names there and that
  • 02:08:15 is probably why it's complaining here
  • 02:08:17 for these other inputs for now we can
  • 02:08:20 ignore this though
  • 02:08:21 we will improve this once we have a
  • 02:08:23 better way of dynamically rendering a
  • 02:08:26 list of elements
  • 02:08:34 we already learned a lot about the react
  • 02:08:37 basics over the last lectures our
  • 02:08:39 application still can use some extra
  • 02:08:43 styling I'd say though for example these
  • 02:08:46 person components would be nice if they
  • 02:08:49 would look like cards and therefore be
  • 02:08:54 more like closed objects right now we
  • 02:08:57 can't really see the differences or we
  • 02:08:59 can't really see the borders between
  • 02:09:01 this component and the abro components
  • 02:09:03 so styling components is obviously
  • 02:09:06 something super important
  • 02:09:08 and right now there are two ways of
  • 02:09:11 styling we can implement I will show you
  • 02:09:14 both
  • 02:09:14 first of all let's add a person dot CSS
  • 02:09:18 file to our person component and I gave
  • 02:09:21 this file the same name as the
  • 02:09:23 JavaScript file just with a different
  • 02:09:24 extension of course theoretically that
  • 02:09:27 file name is up to you now one important
  • 02:09:30 thing which ever CSS code I write in
  • 02:09:32 here is not scoped to this person dot
  • 02:09:36 J's component it is global CSS code so I
  • 02:09:41 want to find a new CSS class which I
  • 02:09:43 named purissima with a capital P still I
  • 02:09:45 could add this anywhere in my
  • 02:09:47 application since it is global but by
  • 02:09:49 using my component name I can rule out
  • 02:09:52 the danger of and accidentally using it
  • 02:09:55 somewhere else so I will simply assign
  • 02:09:57 it to my death here class name keep in
  • 02:10:00 mind not class class name is person a
  • 02:10:03 string person now down there in the CSS
  • 02:10:07 file I can now change the styling maybe
  • 02:10:10 give it a width of 60% and a margin of
  • 02:10:16 auto to Center it maybe also give it a
  • 02:10:20 border of one pixel solid EEE a light
  • 02:10:24 gray and a box shadow of zero two pixels
  • 02:10:28 three pixels and a slightly darker gray
  • 02:10:32 and let's give it a padding of 16 pixels
  • 02:10:37 maybe finally let's set text align to
  • 02:10:42 center to center all the text if i now
  • 02:10:44 saved a CSS file and save the person
  • 02:10:48 J's file where I sign it as a class
  • 02:10:51 nothing happens do you know why well
  • 02:10:56 because we created our CSS class here in
  • 02:11:00 the CSS file but by default and this is
  • 02:11:03 maybe something you didn't know because
  • 02:11:05 it's not necessarily intuitive but but
  • 02:11:07 default no file is included into your
  • 02:11:11 project into you the code which gets
  • 02:11:13 created by that build workflow
  • 02:11:15 you always have to import files to add
  • 02:11:18 them to the game so we import the person
  • 02:11:22 component in our app J's file and we
  • 02:11:25 also import the app CSS file here now it
  • 02:11:29 might look strange to import a CSS file
  • 02:11:31 into a JavaScript file like this but
  • 02:11:34 thanks to web pack which is the build
  • 02:11:37 tool which is in the end used by this
  • 02:11:38 react scripts package were using
  • 02:11:41 implicitly here thanks to web pack we
  • 02:11:44 can actually import CSS into JavaScript
  • 02:11:47 though it will not really merge the two
  • 02:11:50 files or anything like that
  • 02:11:51 it is just made aware of that CSS file
  • 02:11:54 and will handle that differently will
  • 02:11:57 basically import it into our HTML file
  • 02:12:00 so in person Jas I will also add an
  • 02:12:04 import to dot slash person CSS and here
  • 02:12:08 you need the file extension you can only
  • 02:12:11 omit it for JavaScript files now with
  • 02:12:14 that you added this you made web pack
  • 02:12:16 aware of it it will now add it to your
  • 02:12:18 HTML file and hence if you now go back
  • 02:12:21 you see we have this extra styling on
  • 02:12:25 our components you can also see that if
  • 02:12:28 you inspect your code we have the person
  • 02:12:31 class here and if you scroll all the way
  • 02:12:34 up to the head section here in the
  • 02:12:36 developer tools you see that there we
  • 02:12:40 actually have these style tags which you
  • 02:12:43 can't find in the HTML file in the
  • 02:12:46 public folder there we got no style tags
  • 02:12:49 in the head section just some links to
  • 02:12:52 the manifest and so on so not even two
  • 02:12:54 CSS files the reason for this is that
  • 02:12:57 these style tags are injected
  • 02:12:59 dynamically by web pack
  • 02:13:01 this is the part I meant with it manages
  • 02:13:04 the imports you add and this last style
  • 02:13:07 tag here should actually hold your
  • 02:13:09 person class and there you can also
  • 02:13:11 clearly see it's a normal global CSS
  • 02:13:14 class you also see that automatic
  • 02:13:17 prefixing though which is very
  • 02:13:18 convenient because it makes sure that we
  • 02:13:20 don't have to do that we can write the
  • 02:13:22 shortest CSS code possible or need it
  • 02:13:25 and it will automatically prefix it to
  • 02:13:28 work and as many browsers as possible so
  • 02:13:32 this is the style we set up let's maybe
  • 02:13:33 fine-tune it a bit more by adding a top
  • 02:13:38 and bottom margin here so let's maybe
  • 02:13:41 set this to 16 pixels so that we have
  • 02:13:44 some separation between our cards looks
  • 02:13:47 much better now we got the person's here
  • 02:13:49 now let's also style that button and
  • 02:13:52 let's style it differently because I
  • 02:13:55 mentioned that there are two ways of
  • 02:13:57 styling we know right now at least
  • 02:14:06 in the last lecture I mentioned that we
  • 02:14:08 have different ways of styling the
  • 02:14:10 application let's style this button
  • 02:14:12 differently in the app DOJ's file which
  • 02:14:15 is where we have that button I want you
  • 02:14:18 style this button with something which
  • 02:14:21 is called inline styles there is nothing
  • 02:14:24 wrong with using CSS files and classes
  • 02:14:26 and this might even be the preferred way
  • 02:14:29 but what you also often see in react
  • 02:14:31 apps is that you actually design your
  • 02:14:34 Styles in JavaScript
  • 02:14:36 how does this work let's go into the
  • 02:14:40 render function create a new constant
  • 02:14:42 which we'll name style the name is up to
  • 02:14:45 you this is a JavaScript object and as
  • 02:14:48 you might be aware these CSS style
  • 02:14:51 properties have JavaScript
  • 02:14:53 representations for example background
  • 02:14:55 color camel case instead of a – because
  • 02:14:59 background color like this would be an
  • 02:15:02 invalid JavaScript property name you
  • 02:15:05 could wrap it in quotation marks to use
  • 02:15:07 it though I'll use the camel case
  • 02:15:10 representation though and then I assign
  • 02:15:12 a value which is a string which can be a
  • 02:15:15 color for example white we can also set
  • 02:15:19 the font to inherit to use our
  • 02:15:21 surrounding fund we can also set a
  • 02:15:24 border border color just a border of one
  • 02:15:29 pixel solid and then maybe blue and we
  • 02:15:34 could also add some padding maybe eight
  • 02:15:38 pixels make sure to wrap all these
  • 02:15:40 values in quotation marks because we are
  • 02:15:42 writing JavaScript here this have to be
  • 02:15:45 strings now I can go to the button put
  • 02:15:49 on click into a new line to make this a
  • 02:15:51 bit easier to read and add a style
  • 02:15:53 property this is actually the normal
  • 02:15:56 style attribute made available by JSX
  • 02:15:59 and style as you can already see should
  • 02:16:03 receive a dynamic value here all of
  • 02:16:05 simply pass style here referring to this
  • 02:16:10 style constant we're just defining the
  • 02:16:12 render method of which this return
  • 02:16:15 expression here is part so I can't just
  • 02:16:18 use style like this it's not
  • 02:16:19 class property it's a normal variable or
  • 02:16:22 actually since we never change it
  • 02:16:24 constant of this render method let's see
  • 02:16:28 if this has any effect if we save this
  • 02:16:31 we indeed see the button looks different
  • 02:16:34 now we can improve this a bit more by
  • 02:16:38 first of all fixing this error and have
  • 02:16:40 one pixel of a border so that this star
  • 02:16:43 gets applied to you and setting the
  • 02:16:45 cursor to pointer so that we get this
  • 02:16:48 pointer cursor when hovering over it
  • 02:16:50 fine now let's say if this we see that
  • 02:16:52 blue border and we see that cursor again
  • 02:16:55 now it doesn't change upon hovering and
  • 02:16:58 actually styling that hover effect is
  • 02:17:01 pretty hard when using inline styles
  • 02:17:04 this is one restriction already but I
  • 02:17:07 got a hold module in this course where I
  • 02:17:09 show you some clever solutions to
  • 02:17:11 styling react components which really
  • 02:17:14 can be something you can put a lot of
  • 02:17:16 thought into it always be aware you can
  • 02:17:19 use a CSS file down then the styles to
  • 02:17:22 find here are global so if we change
  • 02:17:24 button here all the buttons in our whole
  • 02:17:26 app will be changed so this might not be
  • 02:17:28 what you want but on the other hand you
  • 02:17:32 can use the normal CSS syntax or you use
  • 02:17:35 inline styles as you do here then the
  • 02:17:38 styling is scoped 2d component or to the
  • 02:17:41 element you actually add it to but you
  • 02:17:43 have some restrictions of not being able
  • 02:17:45 to leverage the full power of CSS as I
  • 02:17:49 mentioned I'll have a full module about
  • 02:17:51 this because there is a golden way in
  • 02:17:53 the middle where you can scope styles
  • 02:17:55 and still use all the CSS features more
  • 02:17:59 about this later for now be aware that
  • 02:18:01 we got these two different ways of
  • 02:18:02 styling at the moment use inline Styles
  • 02:18:06 as we do here whenever you want to scope
  • 02:18:08 the style and make sure it only applies
  • 02:18:11 to this single element and to non our
  • 02:18:14 element in your app or even in the same
  • 02:18:17 component
  • 02:18:19 so you made it through the entire video
  • 02:18:22 and I hope you had a good impression of
  • 02:18:24 both the course and react and I hope you
  • 02:18:27 learned a lot about react because even
  • 02:18:29 though this is only a sneak peek some
  • 02:18:31 important aspects of react were already
  • 02:18:34 covered would be awesome to welcome you
  • 02:18:37 in unity course but if you already got
  • 02:18:39 everything you need
  • 02:18:40 well that's great I hope you still stick
  • 02:18:44 around and I see you in future videos
  • 02:18:45 here on YouTube II and wish you just a
  • 02:18:47 great day bye