 This is the power for time to understand what is React. My name is Harshavan Dhan. I am the UI expert and working as modulator and also I am the corporate instructor and also famous Udemy instructor. In this lecture, we are going to understand quick introduction to React. So, what is React? React is the JavaScript library to build dynamic and interactive user interfaces that executes faster. So, like I said, React is a JavaScript library. It is not a framework. So, what makes a difference between the framework and library? A framework provides the complete solution for creating the front-end applications. But when you talk about React, being it as a library, it is the lightweight. It provides the support for building only view, that means only the user interfaces for your application. But it is not necessarily a drawback. It provides proper mechanism to build user interfaces and to make them interactive with the user. That means you can accept inputs from the user and also provide dynamic information to the user. That is how the real world applications work. For example, you take Facebook. It provides all the posts in the feed page and also lets the user to create their own posts. So, this kind of user interactions can be created by using React. React was developed by Facebook in 2011 and it is mainly used for development of single-page applications. So, what is a single-page application? A single-page application is an application that renders small pieces of user interface and make the complete application. In React, you can actually build reusable UI components. Each component is the representation of a meaningful page in your user interface. For example, in a modern application, you have a navigation bar and the sidebar as well as the page content. Here, each of these can be represented as a piece of UI and those are represented as components in the code. And these components are by default reusable. That means you can display the navigation bar wherever required in the application. That means, for example, if you create a nav bar as a UI component, you can reuse the same nav bar in multiple pages wherever required in your big application. So, by default, UI components are reusable pieces which consists of the design logic as well as the programming logic. Here, the design logic is written in the form of HTML and the programming logic is written in the form of JavaScript. And by default, these components are arranged in a hierarchy that is called virtual DOM. So, a virtual DOM is the hierarchy of the components which imitate the real DOM of the browser. When you update any changes in the virtual DOM, React internally compares the virtual DOM and real DOM and only the changes made in the virtual DOM will be updated into the real DOM and the same appears on the browser. We will understand more about components and virtual DOM in the next lecture. But how to create the components? React supports a new syntax called JSX which stands for JavaScript with XML. That means the developer can actually use all the concepts of JavaScript along with XML within the same program. Here, the HTML tags are written in the form of XML. That means here HTML is being caissoned to and every tag should have opening and closing or they must be self-closed. These are the features of React. What makes it exciting about React is that React is the most popular front-end library or framework which is very competitive to the other frameworks such as Angular or Vue.js. But often React is compared with Angular. So you might have a question such that what is the difference between Angular and React? Well, Angular is the framework but React is the UI library. So React being as a UI library, it provides sophisticated solution to make the UI interactive and dynamic. But Angular provides much more beyond this. In addition to UI, Angular provides necessary features to create routing and make Rust API calls in Angular applications. So Angular provides much more beyond React.js because React sticks to only Vue. It is not necessarily a drawback but you can actually extend. That means use third-party tools in React in order to use the features such as routing or making Rust API calls. Angular forces us to build only single-page applications. Suppose if you want multi-page applications in your project, it is very difficult or sometimes becomes impossible in case of Angular. But React can be used for either single-page or multi-page applications. So before development of your application, you need not worry whether it is a single-page application or multi-page application. Eventually, in the middle of the development also, you can convert the single-page application into multi-page application by creating multiple HTML files in React. But the same can be most problematic in case of Angular. Angular directly operates based on real browser DOM. That means when you update a value of a property in Angular, the same will be directly reflected in the real DOM rather than first updating in the virtual DOM. But in case of React, it directly works based on virtual DOM and every time when you make any updates in the virtual DOM, for example, if you modify any property value in virtual DOM, it actually compares the virtual DOM and real browser DOM and updates the real DOM only for the specific change instead of overwriting the complete DOM. So this makes React applications work faster. I will talk about components and virtual DOM in the next lecture. And another difference between Angular and React is Angular by default supports two-way binding. That means it can actually read inputs from the user and also provides state data to the user. But when it comes to React, it by default supports only one-way binding. It officially doesn't support two-way binding. It actually can render state to the user but cannot read the inputs from the user. But however, developer can manually read the values of the text boxes and update the same in the state. In that way, it can become two-way binding. Anyways, we will demonstrate the binding in the further sections. So these are all the differences between Angular and React. This is a good time to learn React. And necessarily, you need not know Angular because we will actually demonstrate all the concepts of React. So you don't require any prior knowledge of Angular to understand React. In case if you are not much familiar about ECMAScript 6, don't worry. As a part of the progress, we will understand various concepts of ECMAScript whenever we actually use them in the code. So let's get started with React. And in the next lecture, we will understand what is a component actually and how the component hierarchy is formed internally. And after that, we will really start creating the React application to make our hands dirty. Let us learn what is a component and how they work based on virtual DOM. In React, a component is a piece of UI that contains the design logic and programming logic. The goal of the component is to read data from a JavaScript object and render the same to the user. So it contains the design logic in the form of HTML. It may include with any HTML tags such as div or h1 or table, etc. And it may include with the JavaScript code to make the UI be interactive with the user. By default, every application should contain a root-level component that is called app component. Eventually, this app component may have children. For example, in the real world application, we have various sections such as navbar, side menu and page content. And those are represented as trail components. And by default, these components are reusable. That means we can really use the same navbar in a different page or in a different application wherever required. Because it is individual, sophisticated and isolated component, it is self-sufficient enough to have the data in the form of state and project or render the information to the user. And each component can have children. For example, the side menu has menu item and page content may have grid or sign a page. And of course these components also be reusable. So as we keep on nesting the components, the component hierarchy will be formed where the app is the ultimate root or parent-level component. You can invoke the trail component in the parent component by invoking its name. And this hierarchy structure of components is called as component hierarchy. And in this component hierarchy, the data can be shared among the components but only from parent to child, but not from child to parent. How will you create a component? By definition, component is a class and it contains some state that is the data that you want to render to the user. So what data that you want to render to the user? All that data will be stored in the form of a JavaScript object and that object is called as a state. For example, in a food ordering application, you wish to display the food item name and price. So you will have that item name and price in the form of an object and that is called as a state. Next it contains a method called render method. This method tells React how the state should be rendered to the user. The render method actually returns a React element. It contains the actual HTML tags defining how the data should be rendered to the user. A React element is a simple JavaScript object that represents a piece of UI, much like a DOM element in JavaScript. But the difference is React element is called as virtual DOM and actual DOM element is the real DOM. A virtual DOM or React element is the dummy representation of real browser DOM. But making the changes to virtual DOM is super easy and lightweight. When you compare to real DOM, virtual DOM occupies very less amount of memory and updates are faster in virtual DOM. When you make any real changes in the state of the component, React automatically compares the virtual DOM and real DOM and updates only the specific changes in the real DOM instead of re-rendering the complete real DOM. For example, in a component, we have four text boxes and we have updated the state of the first text box only. If so, React updates only the specific text box value in the real DOM instead of re-rendering all the four text box values. This makes React work faster than expected. So what you can understand from this lecture is a virtual DOM is a simple JavaScript object that reflects the real DOM and every time when you update the virtual DOM, the changes will be automatically affected in the real DOM by React internally. But it never overrates the complete DOM at any point of time. So making updates in the state is super easy and simple as well as lightweight in case of React. This is how the React actually works. But this is all theoretical. But how will you really get started with React by creating a new application? That's what we will do in the next lecture. We are going to build a simple web application in React in the next lecture. Let's get your hands dirty by creating first application in React. At first, we need to set up the environment which are necessary for creating React application. First, you need to install node.js. So you may wonder why we require node.js. This is not the actual node.js course. This is the React course. The reason why we install node.js is that for working with a package manager called npm, that is node.js package manager, it has plenty of packages and you require a package called create react app which is shipped through npm. Not only that, we need additional packages such as Babel and Webpack that are shipped through npm. And this npm is a part of node.js. So that is the reason why we require node.js for working with React. In addition to this, for execution of React application also, you require a lightweight development server and internally that server is built based on node.js. So that is the reason you need node.js for working with React. So you can actually download or install either current or LTS version but I prefer using LTS because the current libraries of React were already updated with the LTS version rather than the current or latest version of node.js. So prefer using LTS and you will get a file like this and run the file and it's a simple wizard to install node.js and you can complete this simple wizard by clicking on next, next and finish. And after completion of installation of node.js, you are required to install the code editor that is Visual Studio Code. It is open source, lightweight and free to use. So go to code.visualstudy.com and click on download for Windows and run this setup file, it installs Visual Studio Code for you. So after installing Visual Studio Code, open the command prompt window by typing cmd. Alternatively, you can also use node.js command prompt from the start menu. After installing Visual Studio Code, this is the time for installing a package called createReactApp which helps us to create the React applications easily. In order to do so, open the command prompt or terminal on your mission and use the command npm install createReactApp-g. That means, hey npm, that is node.js package manager, install a package called createReactApp and install it globally. That means this package must be available globally on any folder in the same mission so that you will be able to create and run the React applications from any folder on your mission. So run the command npm install createReactApp-g. It downloads the package and installs the same on your local mission. And after installing this package, this is the time for creating a new React application. But before then that, let us create a new folder to place our React applications. I am trying to create a new folder by using md command. That means make directory and specify the path of the new folder. That is for example, c colon react. With this name, a new folder will be created and you need to look at the same folder by using cd followed by the folder name that is c colon react. So make sure you are in the correct folder that is c colon react in this case. And now you need to use the command called createReactApp in order to make a React application. So createReactApp-app application name. The application name can be anything but should not contain capital letters. For example, I am giving the name MyFirstApp. You can use hyphens for separation of words. But uppercase letters are not recommended. So run the command createReactApp-space and provide your application name. So this command creates the React application and automatically set up the necessary development server, Bebel and Webpack. The development server helps us to execute React applications after compilation. And Webpack package helps us to bundle the files and the Bebel package helps us to compile the JavaScript files from JSX files into regular plain JavaScript files. So those compiled JavaScript files can be really executed on the browser and after creating the React application you can use either of these commands like npm start, npm run, npm test, etc. But for a timing you require one command called npm start in order to compile and execute the React application. So first switch to the application folder that is cd, c colon react myfirstapplication So make sure you are in the correct folder that is myfirstapplication and run the command npm start. This will automatically compile and execute the React application in the default browser. In case if you want to change the default browser you can use the windows settings and go to apps. This is the cool default output from React application but how does it work? Let's edit the source code by using visual study code now. In order to get started with go to start and look at visual study code and go to file menu, open folder and select the appropriate folder that is cqueren react myfirstapplication folder and click on select folder and in this folder you can see something called public and src in the public folder you can see index.html this will be the starting point of your React application so it contains the typical html syntax and it imports the icon and contains the basic meta tag and of course these meta tags are optional and if you scroll down you can see something called no script this message will be appear when JavaScript is not enabled on the browser because to execute React application it is necessary that user must enable JavaScript but of course JavaScript is enabled by default in all the user missions in all the modern browsers and we have a tag called div tag with id equal to root this div tag is the placeholder where the actual react output will be rendered at runtime and after that there is nothing much just closing of body and html and now coming to the src folder you have something called index.js which has a statement called reactdom.render and which eventually invokes app that means it renders the app component in the root element which is already present in the index.html file so where is the definition of the app component go to app.js file in the src folder there you can see something called app and it has a div tag that renders all the relevant output that we have seen in the browser for example this rotating icon is the imj tag which is written here and after that you can see some hyperlink for example lend react which appears here and you can make any changes in the app.js but in the next lecture we will try to lend how to build react application from the scratch then you will understand how these files are working internally now let's try to make some changes in the app.js file to bring some output in the browser in order to do so let me arrange the browser and vscode side by side so this is the code of the app.js file that comes up automatically at the time of creating the application so it has a function called app in which we are trying to return a div tag which contains some content so let me remove this particular div tag and save the changes and return something here for example a div with hello the moment once we make the changes and save the file automatically the page refresh in the browser so as you can see it shows hello as the default output you can use the control plus button in order to increase the zoom as of now the zoom is 140 we can use control plus to increase the zoom and we can use control minus to decrease the zoom so whatever the html tag that you written in this particular function will be printed as it is in the browser I recommend some preferences go to file menu, preferences, settings and go to text editor and then formatting and check the checkbox format and save so because of this checkbox as soon as you save the file automatically the code will be formatted that means the code will be properly maintained and optionally I recommend an extension called prettier so go to extensions that means the fifth icon on the top left corner then search for prettier and install this code formator called prettier and then after that come back to the app.js file press alt shift tf in order to format the file press ctrl s to save the file in this case as soon as you save the file automatically the file will be formatted for example if you give unnecessary spaces here and not maintain proper indentation like this and upon saving the changes the code will be automatically formatted and also you make sure you add default formator in the preferences to do so go to file menu preferences and then again settings go to open settings json and then at last make sure you set up the prettier as the default formator for both javascript and also for jsx files ok let's close these preferences let's try to build the same application from the scratch without using any predefined files so let me select all the files of the src folder and delete them now the src folder is empty but all the files of the public folder exist as it is and mainly we have the index.html file and the react compiler expects a file called index.js in the src folder so let's create the index.js file in the src folder so right click on src folder new file file name is index.js so this is the index.js file in the src folder in this we are trying to create an element and I wish to render the same into the react DOM in order to create an element we are writing where element is equal to some html tag for example du hello world so as we have set the default formator in vscode as soon as you make the changes automatically the file will be formatted so you need not format the code manually every time now you can see an error called react must be in scope when using jsx which means that this particular tag will be converted into react.create element by using a JavaScript compiler called bebel so bebel is a JavaScript compiler that converts the jsx syntax into regular JavaScript to demonstrate bebel go to bebeljs.io and click on try it out so once you click on try it out we are just writing some html tag for example p high the same will be automatically converted as a react.create element and the name of the tag here is p and the argument is null that means it has no arguments and the content of the element is high like this whenever you write html code as xml syntax automatically bebel will convert the same into react.create element this is also called as react element this particular react element will be a part of the virtual DOM of the react in the previous lecture we have understood the virtual DOM it is the hierarchical structure of the elements that you render on the page you can notice that in the actual code that you write on the left hand side we don't have anything related to react but once the bebel compiles the same into JavaScript it has something called as react.create element it means that this object called react must be declared or must be imported in this case we should import this object from a predefined module called react and that is the reason even though we are not using react directly we must import react from react module so just above the actual statement you are writing import react from react module so we are importing an object called react from a predefined module called react that means it is importing the object from the module that is present inside the node underscore modules folder ok we need not worry about the node underscore modules these are already installed by npm now save the file now that errors were clear in the browser console now this is the time for rendering the same into the react DOM in order to render the react element into the react DOM we require something called as import react DOM from the module called react-dom always the right hand side one is the module name and the left hand side one is the default import of the particular module so we are importing an object called react-dom from the module called react-dom and make sure you write the correct casing that is R must be uppercase and DOM should be the uppercase again so based on the same react DOM object we are trying to render the element by using a predefined method called render so for this render method you need to pass the element that you want to render that is the variable name element here that means it represents div hello well and after that you need to specify the position or placeholder where this particular element must be rendered so come back to the explored window go to the index.html file in this index.html file we have a div tag in the body tag with id equal to root this is the placeholder where you can render the element remember it has an id called root and based on this id we need to select the element in the actual js file in order to select the element based on the id we have a predefined method called getElementById in the plain javascript itself alternatively you can also try using document.querySelector but in that case we have to write hash before writing the id so document.getElementById of root will select the element that is present inside the index.html file and inside this particular div we are rendering a div tag called div hello world and let me save it automatically the page refreshes you can see the output as hello world that means this particular element called hello world will be rendered inside the root element that is present inside the index.html file if you can notice if you want to exactly navigate where it is rendered exactly you can use the browser developer tools to do so right click on hello world inspect element or inspect and chrome it opens the developer tools there you can see the div id called root which was already present in the index.html file but dynamically the react element was rendered inside the root element so as a result of this particular div tag only you are seeing the output called hello world here and now let's render the element in the console.log in javascript the output statement is console.log so it shows the value of this particular variable inside the browser console here so have a look at the console so that particular div tag is represented as react element and if you can expand the same so this is your actual react element and it has a property called a type and its value is a div that means this particular div tag is represented as a react element that is why the type equal to div and also it has other properties such as props and children equal to hello world as the text so this particular text is being displayed inside the actual element and this react element is the part of virtual DOM which I have explained in the previous lecture so overall a big application is the composition of various components and each component is represented as a react element which will be rendered on the DOM and the state of the react DOM has been changed automatically a new react element will be created in memory and then react automatically compares the new object and old object of react elements it identifies the changes between the new react element and older react element and then go to the actual browser DOM and update the actual browser DOM with only the specific changes that you really make for example if you update the inner HTML of the particular H1 tag only that specific H1 tag will be updated rather than re-rendering the complete page this makes react execute faster but this example is pretty simple but in the real world applications we will not write actual content just like this element we will need to create the components as the classes inside the jsx files we will end to create the components in jsx files in the next lecture before creating our own components let us add bootstrap in this application so that you can make the UI look better bootstrap is one of the CSS libraries that provides plenty of predefined CSS classes to make the UI look professional with minimal less amount of code in case if you are not aware of bootstrap please check out my other course of bootstrap which covers all essential concepts of bootstrap from the scratch in this course we are straight away using bootstrap from the beginning so that you can see the designs of real web pages from the beginning itself so as of now let me remove this console.log and I am writing the code in the index.js file so here we have to install essential packages that are required for bootstrap actually bootstrap works based on jQuery and popper.js so you need to install 3 packages from npm that is jQuery, popper.js and bootstrap to do so go to your command line window and make sure you are locating the correct application folder that is ccurrentreact myfirstapp and run the command called npm install jQuery because jQuery is the prerequisite for bootstrap in other words bootstrap works based on jQuery internally and also add hyphen hyphen save that means that we are trying to save this package name called jQuery in the package.json file of our application which tells that our application depends on jQuery package so the command will be npm install space jQuery space hyphen hyphen save let me run this after installing the package you proceed to the next package that is npm install popper.js space hyphen hyphen save actually this popper.js package is optional but sometimes you will be using accordions or drop down menus there exactly you require popper.js file internally because the code of the bootstrap internally works based on popper.js package so that is why it is recommended to import popper.js from the beginning itself now we are installing the actual package called bootstrap so the command will be npm install bootstrap hyphen hyphen save once you run this command the bootstrap package gets installed on your application all these packages jQuery popper.js and bootstrap packages will be installed inside the node.modules folder so as you can see if you scroll down the node.modules folder you can see the package called bootstrap and also other packages such as jQuery and popper.js now you need to install essential css files and js files into the index.js file of your application so at the top of index.js file add this code that is import jQuery so we are importing jQuery.js file from the jQuery package which we have installed before a moment and after that you need to import something called bootstrap file from bootstrap package so in the bootstrap folder there is something called dist means distributable and inside which we have js folder in which we have the file called bootstrap.js file so we are importing that particular bootstrap.js file into our application now so as of this case we have imported the jQuery and bootstrap.js file and just before importing bootstrap let us import popper.js file also so import popper.js slash dist slash umd slash popper and in the command prompt window make sure you are giving npm start command in order to execute your application so now our application executes including the libraries of jQuery, popper and bootstrap js files but visually there will be no much difference because we have to import one more file called bootstrap.css file from the bootstrap package so import bootstrap slash dist slash css slash bootstrap.css in this case we are importing bootstrap.css file into our application so that we are able to experience some visual changes that means the font has been changed and also the margin and body of the body tag has been removed by bootstrap css file so these are the four lines that you have to keep inside your index.js file in order to import bootstrap and to make it fully work in order to actually test whether the bootstrap is working properly instead of writing a simple div tag let me write something called as button tag with a class called btn and space btn-danger here the btn and btn-danger or the predefined css classes comes from the bootstrap.css file so as you can see bootstrap works correctly that means gives a red color when you mention the class named btn-danger so from now onwards you are eligible to use any bootstrap component in your page for more information about bootstrap components you can visit getbootstrap.com site and then go to documentation and there go to components and layout there are plenty of components of bootstrap such as forms, buttons, cards etc. in case if you wish to build a real application based on bootstrap you can check out my other course called bootstrap in two words so let's come back to the react app and in the next lecture we are going to create actual component by using jsx file now let's actually learn to create components by using jsx files the benefit of jsx file is that you can use the javascript along with xml here html tags are written as xml tags that means they work based on xml rules such as all the tags are case in store and each tag must be closed this is an example of jsx expression so here in case if you write a different case for example tcapital this is not allowed because of jsx and also in case if you forget to close a particular tag it will be an error as per jsx these rules are imposed by xml language so that is why we call them as jsx so let me create another file in the src folder so right click on src folder and set new file specify the file name as app.jsx and press enter key now I am writing the code inside the app.jsx file here it is recommended to create every component as a class for example I am trying to create a class called navbar here the navbar is a class in javascript and I need to export the same so that this particular class can be accessible from other classes so how will you access this particular class from other files now come back to index.js file here I am trying to add import a class called navbar from the file called app.jsx so this is how you can export the component class from the jsx file and access the same in other file that is index.js file make sure you are adding .slash to represent current working folder that is src folder that is the folder where our index.js file is present so .slash refers to current working folder by default but still the output is not changed because we are actually rendering the button element still so how do you render this particular content from the jsx file in order to convert this particular class as a component let me extend a predefined class called component here the extends keyword refers to inheritance in javascript which tells that this particular child class extends a super class called component which is also called as parent class you can really import this particular component class from the react module and sometimes you will be writing the braces while importing sometimes you should not so what makes the difference between with braces and without braces for example if you wish to import react we have to try writing react without curly braces in case if that particular object was exported with default keyword as export default in that case you should not use braces while importing the same in other file so since in the react module they have already exported this particular react object with export default you should not write braces while importing the same because from one module only one object can be exported with default and other objects can be exported with name so since this component class was exported without export default it is exported by its name you should write braces while importing the same here what I am trying to say is that the react was exported with export default and the component was exported with just export keyword instead of export default from one module only one export default is allowed for remaining objects or classes we cannot use export default so that is why we have to import the same with braces export default and this extends keyword says that the component class is the parent class and navbar is the chale class for the same here since the navbar class is the user defined class you can give any name instead for example you might be creating sidebar or page content or grid or whatever you wish you can give and inside this particular class we are writing a method called render method and whenever this component is rendered automatically react calls this render method that is why it's a fixed name and in this render you can return anything but we are trying to return a h1 with hello but still we cannot see that heading in the output it's because we have created the component but we have not rendered the same so how will you render this particular component now come back to index.js file instead of rendering the button you need to render the navbar component which was created before a movement so let me delete this particular element and instead I am trying to invoke the component called navbar component and as per the syntax of jsx every tag must be self-closing or should be closed explicitly so you have two choices either you can write the closing tag separately or you can make it self-closing here generally self-closing tags are used for components now instead of seeing the button you can see the output from the navbar that means by using the method called render method in the react DOM we are rendering the output of the navbar component and how does that react executes navbar component and it automatically calls the render method for the same and which of the html tag that you have written here that will be rendered within this specified element that means it will find the element called div id equal to root which is already present in the index.html file so in between the opening and closing of this particular div tag the actual h1 will be rendered and in this case the object of the navbar class which is automatically created is called as react element which is the part of virtual DOM as of now the virtual DOM contains only one object at the root level as long as you nest multiple components the hierarchy will be extended with parent and corresponding children if you can render another component inside this particular navbar component that will be the child of this particular navbar component and you can render multiple child components right so in that case the navbar will be the topmost root level inside which we have multiple child components it forms a hierarchy so that hierarchy is called as virtual DOM we can investigate the actual output of the browser so right click on hello world inspect element and I am using Firefox browser you can try using Firefox or Chrome or MS edge at your practice time so right click on hello and say inspect element or just inspect otherwise go to menu developer and click on the option called toggle tools and in this case you can see the output called hello inside the root element this particular root tag was already created in the index.html file but we have rendered hello from the navbar component but here the noticeable point is that the text will return only one element from this written statement if you try to return multiple html tags for example I am trying to return a paragraph it is not allowed by default by jsx it is because internally this particular jsx syntax will be converted into a regular javascript by using bevel which is the javascript compiler and that particular bevel don't know how to compile multiple tags at the same time for example if you add h1 tag along with this particular paragraph it is not valid as per jsx so bevel cannot convert these tags at your time you can convert either of these tags only at your time but there is a solution for this problem you can actually nest both of these tags inside another container for example a div tag so as per the syntax of jsx we have written only one tag called div and which contains two jail tags and that is allowed in this case first it generates a statement called react.createElementOfDiv which is the actual element that you are trying to render and inside which we have two children that is h1 as well as the p tag here the content of the h1 is heading and the content of the p tag is high you can use the same exact technique while your component render method so come back to your code I am trying to nest a tag called div inside which we have something called h1 and p to make the code readable and understandable better let me write multiple lines so that we can read the code easily now you can see the heading as well as paragraph output in the page so the syntax which we are using is jsx we will convert this particular jsx into js file and automatically it has added parentheses in the written statement so that either you can write this particular div tag in the same line or you can shift it to next line as well so as you can see inside the root tag we have something called div this is the div this is the div which we have created here and after that inside that particular div we have the h1 and p tags that we have created so overall this particular content is rendered by the nav bar component that we have created here and that is represented as a react element but here you can notice a small problem that is you must always have an extra div tag along with your content if you don't require or don't want that you can use something called react.fragment tag that is react.fragment the meaning of the react.fragment is that without rendering any html tag in the DOM it acts as a container for both of these tags so it satisfies the rule of JSX that must contain only single tag at the same time this fragment tag doesn't render any html code in the output it actually renders only the content inside it now inside the root div tag we can see the actual inner tags without an extra div tag so what do you finally if you don't want an extra div tag it is better to use react.fragment this acts as a parent or container for multiple html tags without rendering an extra div tag and moreover in this class also you can use something called export default so remove this particular export keyword here and you can write export default and specify the class name that is navbar alternatively you can write the same within the class itself that is as export default directly here near the class keyword but don't try to use both at your time you can use either of these syntaxes either below or along with the class name itself in this example I am writing export default below the class so in this case since the navbar is default export while importing the same in the index.js file you should not use braces but directly mention the class name as navbar but you can see the same output in the next lecture let us add a little bit of css styles for the same let us try to add css files for this application in order to do so open your explorer window and then right click on the src folder create a new file file name is index.css of course you can give any name for example app.css or anything and we are using this particular css file as a global css file that contains the global css styles that are applicable for all the components so by default any css code that you write here should be affected the entire page not for a specific component for example I am trying to add a class called highlight and adding some background color so this particular class can be used in all over the page in any component so how will you import this particular file into the application so come back to the index.js file here just like you import bootstab.css file earlier you try to import index.css file see since the index.css file is the local file within the same src folder you have to prefix it with dot slash here dot slash represents current working folder that is src folder in which we are writing the code currently now the css file has been imported in the application and it can be used anywhere in any component now come back to the same component that is navbar which is inside the app.js x and then for either of the heading or paragraph you can try to add something called as class equal to and then this is the time that we have created here that is highlight now you can see that the class gets updated like this apart from using predefined bootstab.css styles you can also use your own css code in this index.css file this is how to add global css file for your application in the similar way you can try to create css file for the specific component and import that particular css file in the respect to jsx file that means you can import that particular css file in the desired jsx file in which component you require that particular style this is how to add the css styles for your application in this lecture let us actually use the bootstab navbar in this application it's pretty easy first open getbootstab.com site which is the official website of bootstab then open documentation from the menu select components and then switch to navbar and it shows the example of navbar in bootstab so this is the bootstab navbar which can contain one or more menu items and below is the code of the navbar let's expand this and here you can see the copy button so that all this particular code whichever is being shown here will be copied into clipboard so that we can return back to your application and paste it the same so I am trying to remove this h1 tag and p tag inside the app.jsx file and paste all that particular html code that we have copied from the bootstab website press art shift tf in order to format the code and now let us remove the things which are not required in our application first of all we have a navigation bar we have a nav tag in html and inside which we have navbar brand which displays the website name or title for the application I am trying to change it as my app so this will be appear in the output but currently we are seeing some compilation errors in jsx and this particular button tag displays the toggle navigation that means the menu button for opening and closing of the menu in case of smaller devices so keep it as it is and then scroll down let us try to add one or two hyperlinks each hyperlink is represented as LL tag which means list item and let me delete the first one let us follow the second one that is nav item here you can write your link text for example home and href is the url which should be opened when the user clicks on home you can repeat the same for all the remaining items in feature in this case we do not really want this particular drop door item so let us delete the same and even this disabled menu item also not required for us so let us delete it and then this form tag is not required really for us and that is all so this is the navigation bar which we have created here which contains the nav tag and then navbar brand item a toggle or button along with one or more menu items inside the navbar nav and then after that you will close, do close and then nav tag close make sure all the opening tags are closed properly otherwise you will get jsx compilation errors so once you save this code you can see the application navbar along with the toggle or menu icon and if the user clicks on the same it expands the menu items as you create and it's a toggle button so that it can be closed as well if needed you can try to change the color of the navigation bar for example instead of navbar light we are trying to apply navbar dark and bg dark now this navigation bar is the darker one in case if you want to apply a custom background color for this navigation bar you can do the same by using your own css trial so open the index.css file which is present in the src folder which we have created in the previous lecture and in this index.css file let's add a class called navbar style which contains the background color property of your own color whatever you desire for example I am selecting some kind of green and let's apply this particular css class inside the app.js file so come back to the app.js file after writing all the css classes and trying to add something called as navbar style which is the class name that we have created before a moment still you cannot see the actual color so come back to index.css file again and add important that means this particular property overrides the default setting of bootstrap which was already in the black color now you can see that everything is in green color that is the color what you selected here and of course make sure you have already imported index.css file in the index.js file like this this is how will you add the navigation bar for our application by default bootstrap navbar is responsive so if you try to maximize the screen it converts into regular navbar where all the nav links are shown side by side without having any menu button on the top right corner so this is the look and feel of the navigation bar on the larger devices and this is the look and feel of the navigation bar on the smaller devices this is how to create bootstrap navbar in the react application this is the navigation bar that we have created in the previous lecture but if you can notice the browser console you are having some errors in the browser console we are talking about this particular error that is invalid DOM property called class the reason behind this error is that in JavaScript already you have a class keyword which is used to create a class so that is the reason in the same file you cannot reuse the same keyword for applying the CSS class so alternatively you have to use class name property for applying the CSS class you will not be confused with the class keyword in JavaScript so that is the reason wherever you write in the CSS class you always replace with class name property instead of class in order to do so you can take the support of find and replace in visual studio code so press ctrl-h and then specify the find as class and replace with class name like this in camel case so wherever you have a class keyword you are replacing the same with class name property and click on replace all in order to replace all instances in the current file but unfortunately the class keyword which is present to define the class also got renamed so let's make this adjusted as the class keyword that's all now that error has been fixed and let me clear out this class name duplication so as you can notice that error has been cleared out here and that class name must be in camel case and let's target another error that is href attribute requires a valid value to be accessible it's because simply hash is not allowed for href in case of react to fix this error always use slash hash instead of simple hash in react generally we use hash in href attribute for representation of dummy link and make it look like URL that begins with slash so that react will accept that even in any other place wherever href equal to hash replace the same with slash hash so if you can scroll down here also once again you have to repeat the same so instead of hash slash hash now that error has been cleared out here this is how do you fix the class name and href related errors in react we have done good enough by creating navigation bar but what's next I would like to place some content below the navigation bar but it is not cut to place that content inside the navigation bar component itself and I would like to create a new component called main content in which I can place some content that could appear below the navigation bar so let us open the explorer window in visual studio code and to right click on src new file is main content.jsx that means we are going to create a component called main content and for all the components file extension will be .jsx and there must be another component called app component which wraps both main content as well as navigation bar actually in this file called app.jsx we have really created navbar component but not app component so let us rename this app.jsx as navbar.jsx so right click on app.jsx rename and specify the file name as navbar.jsx now let us create another file called app.jsx insert the src folder so right click on src add new file then specify app.jsx so I wish to really render app.jsx that means app component in the index file so let us create a new component called app component inside the app.jsx so in app.jsx I am trying to define a class called app component so the class name is app that extends a predefined class called component that is imported from react module and also import react from the same module called react because this class will be converted into react.component so after compilation of the class it requires a predefined object called react from this particular react module and every component must have a method called render method that renders something for example renders a html tag so this particular html tag will be rendered in the web page as you can see and instead of rendering navbar let us render app component so I am trying to import app component from the app file that is app.jsx file and I am trying to render app component but not navbar component and then switch back to app.jsx file here I would like to render two components that is navbar component and main content component first let me render navbar component so how can I render one component in another component this is called as nested component so right from the app component we have to import the navbar component from the navbar.jsx file notice this navbar is already having default export as you can see like this so that is the reason you can import this navbar from app.jsx file so import navbar from navbar.jsx file here .jsx file extension will be taken automatically and to represent current working folder that is src folder we have to give .slash and since the navbar component class is the default export here known as using braces while importing the same here so this is the code for importing the navbar from the navbar.jsx file you can use the same syntax for importing any component in any other file so instead of rendering hello I would like to render navbar by writing the opening and closing tag for navbar this is the actual class name which we have defined in the navbar.jsx file so always we use the class name of the component as the name of the tag but you can also write the same tag as unpaired tag that means self closing tag instead of paired tag so optionally you can convert this as self closing by keeping a space and then slash so in this case no need of writing the separate closing tag for navbar so it works in the same way as expected and after that I would like to create main content component in the main content.jsx file then I would like to render the same in the app.jsx file so let's go to the main content.jsx file let's add a default export class called main content and also import react and component from react module every component must extend a predefined class called component and also must contain a method called render that must return something for example at least tag here I am trying to return hello from main content so for time being just it contains hello message but as you can see still main content was not rendered in this particular page it's because we have created the main content component but we have not invoked it in the app component but can you return multiple components at a time like this? now in order to do so we have to use react dot fragment that act as a parent for both of these tags before then that let me import main content from the file called main content.jsx here dot slash is must in the file path to represent current working folder so the react dot fragment tag represents as a parent for both of these tags so as you can see react dot fragment is the parent inside which we have two components that is nav bar as well as main content now above you can see the nav bar and below the navigation bar you can see the content from main content component so now we can see that the app component is a root level component or top most component in the hierarchy inside which we have two chain components that is called nav bar and main content components so this is called component hierarchy where app component is root level component and it can have one or more chain components inside it so the component hierarchy decides the parents and children depending on where a component is being invoked for example instead of invoking the main component inside the app component if you write the same code inside the nav bar component suppose I just write the main content component here now we can see that app component is a root level component and it has only one chain component that is nav bar and the nav bar component has a chain called main content so the component hierarchy changes depending on which component is invoked in which other component alright let me undo the changes I wish to really invoke main content only in the app component like this so this is how you nest the components and build up the component hierarchy in React in the next section we will render a lot of things dynamically into these components we are going to understand about state props in the further lectures so keep continued alright we are good enough to nest the components of your component and main content component but in real world applications all the content will not be static content right in many places you require to render the content dynamically so this section talks about how do you render the content dynamically and how do you update or modify the state of the page in order to store the content of your component you are required to create a property called state inside your component class so the state is the property that contains dynamic content of your component which you want to render on the page or it may contain the information that you want to read from the user as well so inside your component class that is main content component let me add a property called state so this property contains the dynamic information that you want to render on your component so this is the object literal in javascript which can contain properties and the property values can be of any type it can be number string, date or even arrays also you can use nested objects inside the state for example I would like to display the title of the page inside the main content component so actually I can render something called h1 or h4 as title of the page but this is static information isn't it? how do you make the same as dynamic? you should store this information inside the state for example there is a property called app title that is equal to customers and then you can render this particular property value in this place so how do you render the value of the property from the state open the braces and close the braces in between opening and closing the braces you write something called this dot state that means you are accessing the state property of the current working class here this keyword represents the current working object of the current class and inside the state property we have another nested property called app title and you can render the same so now you are getting the same information that is title dynamically this is how you render the content dynamically by using expressions so this braces are called expressions to react which is used to render the content dynamically and the beauty of the state property is that as soon as you update the state property by using set state method automatically in this place the state will be refreshed so when you make any changes in the virtual DOM automatically react compares the virtual DOM with actual browser DOM updates the properties which are exactly modified instead of re-rendering the complete page for example if you modify this particular app title property only that particular property value gets updated in the DOM rather than re-rendering the complete page that's what make react faster anyways we will see how to update the state dynamically in the further lectures so for time being when you make any changes in the property value for example employees since the page refreshes because of development server you can see the same information dynamically render in the expression and just for styling purpose you can add something called class name notice I am using class name just class because in JavaScript you have a keyword called class in order to create a class but for CSS classes we are required to use the class name instead for example I am giving bottom bottom and margin 1 and also padding 1 for CSS classes provided by bootstrap in case if you are not aware of bootstrap or feeling confusing about bootstrap CSS classes you can check out my other quotes called bootstrap or refer to bootstrap documentation in the getbootstrap.com site in my quotes I am not much deeply explaining the bootstrap related to CSS classes because that's all a different subject so in the next lecture we will see how to handle events in React well in the 4 of the lectures I would like to show the customers grid so the app title is customers and it is not the app title and it is the page title so let me change it as page title and render the same as page title and then I would like to show the customers count so let's have a property called customers count and for example it is 5 and in order to render the same I am just writing a span tag so inside the span tag I would like to render the value of customers count dynamically by using react expression so react expression is the braces and you can access the state that is this.state. the property name that is customers count that is 5 in order to start it up I am trying to add the CSS class name that is badge and badge as secondary and let's apply some margin for the same by writing m2 so every time when you modify the value of this property automatically the same gets reflected in this place where we render the particular component property now we are going to learn how to handle events in react in JavaScript we have events such as click double click, focus, blur, key press key up etc you can handle almost all types of events by using react in order to do so we have to write on click, on focus on blur etc attributes within the specific html tag in react and there you can call a method that is written inside the same component you cannot call the methods of another component inside this present component for example let me add a button inside the h4 by using button tag so there is a button called refresh when the user clicks on this particular refresh button I would like to call a method to do so I am just writing on click in camel case that means on in lowercase click c is capital in click here I can call any method that is present within the same component first let me create a method inside the same component class as of now here this is the closing brace of the render method after that let me add a method preferably the method name could be a meaningful name for example on refresh click you can actually give any method name but better to follow the naming convention so that your code will be self-explanative and any developer can understand that this method executes on clicking the refresh button and also let me add comment to make it easy to understand later so inside this particular method I can write any code that is for example I am writing console.log of refresh clicker you can actually write any code whatever you require now I would like to call this particular method inside the on click event so let's come back to render method and inside the on click I am just writing on click the method name must not be in codes but must be inside an expression that is braces so this indicates that when the user clicks on this particular button we have to call the on refresh click method notice we should not use the parenthesis for calling but it must be as it is just name of the method and also we have to represent the method along with this keyword so we should write this dot method name in order to access the method of the current working class object that is just like how you call this dot state in the same way you should write this dot method name so as you can see when you click on the button you can see refresh clicked in the browser console but how do you really update the component state that's what we will do in the next lecture alright in order to update the state of the page we have to use set state method but you should not overwrite the values of the state property directly it's because every time when you update the state internally based on the virtual DOM the real browser DOM should be updated by react so if you overwrite the values of the state properties react cannot identify that and cannot re-render the same UI so that is the reason we have to use the set state method in order to let react update the browser DOM based on the changes made in the virtual DOM so inside the method called on refresh click we are just writing this dot set state in this case it is a predefined method and you can supply only the property values which you want to really update so we have two properties I don't want to update page title but I wish to update only the customer count for example I wish to make it as 7 so to do so just add customer count property only and give the updated value that is 7 it will overwrite the previous value that is 5 and then this particular change will be taken into virtual DOM first and then react compares the virtual DOM changes with actual browser DOM and updates the browser DOM only for that specific property will not render the full UI so let's click on refresh button and as you can see it is showing an error saying that cannot read property called set state of undefined the reason behind it in JavaScript by default that this keyword context will be changed when it is indirectly called so in this example we are not calling this method directly but we are calling the same with on click event of the button right so that is the reason that this keyword by default refers to button rather than representing current object of the component class in order to overcome this particular problem we can convert this method as a arrow function so that the this keyword of the arrow function always refers to component class rather than a button so how do you convert this method as an arrow function just say equal to and then after the parenthesis you just add something called arrow operator that is equal to and greater than and that's it you have successfully converted your method as an arrow function so that the benefit of arrow function is that always it's this keyword stick to the component class that this keyword context will not change to any button or something else so even though you are calling that arrow function a button the this keyword refers to a component try clicking on the button once again see as soon as you update the value of the state the particular UI gets changed it's because we are using set state method in order to update the state of the component and go to elements right click on the title inspect element and try clicking the button again so as soon as you click on the button as you can see only the value of span tag is being updated rather than re-renting the complete H4 that is what the actual benefit of using virtual DOM in react so overall we have understood how to update the state of the component by using set state method you can apply the same logic for updating any type of value not only number but also for string array or any other type in the next lecture I would like to demonstrate a customer's grid in this main content component I would like to show you how do you render the table that is grid by using map method of JavaScript array first you require to store the data in the form of array inside the state of the main component in order to do so let's write the properties line by line and add another property called customers it is an array so in this array I would like to add all the list of customers that I would like to render inside the customers grid whereas each customer is represented as an object literal suppose for each customer we have ID, name and phone number similarly let us add some sort of customers so this is the data of the customers that I would like to render so how do you show this particular array data in this react component to do so let's look it after H4 so after closing the H4 I am trying to add a table tag and in order to apply the bootstrap style of table let's add a set of CSS classes that is table and inside the table I would like to add header row and I have just added the column headers that is ID name and phone number which displays like this in the large screen and here I would like to show the actual list of customers so let's take up T body means table body so inside the T body I would like to have a TR tag with some sort of TD tags so this particular TR tag should be repeated once for one item in the customer's array how do you repeat this particular TR tag for each customer to do so in JavaScript arrays we have a predefined method called map the map method of JavaScript array receives an error function and executes that error function for each element so in order to call it let's take up an expression and write this dot customers dot I mean this dot state dot customers dot map and then we are required to pass an error function so this particular error function will be executed once for one item in the customer's array and each time you will receive the customer object as an augment and then you are required to return the TR tag inside the error function so whatever you return inside this particular error function this will be rendered inside the output so as you can see since there are 5 customers in that array they have been generated automatically as you can see here see in the T body we have 5 TR tags automatically got generated with empty TD tags but how can you render the actual content in each TD tag you can use your expression and you can use the parameter called cussed in order to access the current working customer and the function executes once for each customer right so for the first time the first customer object will be passed into the cussed parameter that means for the first time cussed parameter equal to this particular object and the second time this is the second object assigned to cussed parameter like this you can access the customer details cussed parameter every time so you are writing cussed.id so as you can see it is printing customer IDs in all the rows similarly you can try accessing the name and other properties that is id, name and form properties so cussed.name, customer.phone number so this is how the table appears in output but if you look at the browser console it shows an error saying that each jail in a list should have a unique key property it is the mandate of the react in order to identify the each row of the table it requires a unique key which is also considered as a primary key so you should specify the key property in the tier tag which is being written from your error function based on the specified key react identifies each row inside the table in our customers array which property is unique it is id isn't it so we have to specify that id property of the customer is the unique key inside the map function here so go to the tier tag add key equal to customer.customer.id that's it that error gets clear and of course you should not use double codes for the same so this error has been cleared out and you can see the data comfortably here sometimes in the array elements you will have nested properties for example we have something called address and it contains several properties such as city, straight, etc for example let's add city as a new hilly and some other values for each other customers like this every customer has their own address and each address contains other properties such as city how can you render this type of output inside the grid you can access the reference variable that is cus.address.city that means while rendering you can write like cus.address.city this is how you access the nested properties in case of arrays let me add a header row for the same as you can see cities are rendered in the table