ReactJS Tutorial for Beginners - Getting Started with React

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

Channel: Academind

Views: 265,320

Keywords: react, redux, tutorial, course, free

Id: pgAvVxowaYU

Length: 138min 52sec (8332 seconds)

Published: Thu Oct 26 2017