Hey everyone, this is Swatee and I welcome you
all to Edureka's YouTube channel. At Edureka, We provide online training on
the most Trending Technologies with world's best instructors
and 24/7 support. Today, I'm here to give you
a complete overview on react.js course. React as you might know is
a front-end Library developed by Facebook. It was released
in the year of 2013. And since then it has continued
to dominate the world of front-end development. Thus we have curated
this course in such a way that everything that you need to know about
reactjs has been categorized into several modules. Module
1 talks about what exactly is react.js in module 2, you will see the various aspects
of react in module 3, you will see what is
a virtual DOM in module 4, you will see the advantages
of using reactjs in module 5, we will see the applications
of reactjs in today's market in module 6, you will learn how to install react.js
in your system in module 7, you will be learning
about various fundamental concepts of react.js. Such as react components,
its lifecycle, State, props and many more. In module
8, you will see how to integrate
a state management Library called Redux with react.js
application in module 9, you will be given a brief
overview of react router finally in the 10th module
you will be working on an end-to-end project. So that was all about today's
offering, This session will be further continued by Mr. Vipul Jain.
A quick solution would be to do subscribe to our Channel and hit
the Bell icon to stay updated over to you Vipul. Hello everyone. My name is Vipul Jain. I have 10 years of experience
in web development which includes experience
on react.js angularjs and many other web Technologies. So in this complete
video course series, I will be starting
from the basic components react components props state and then moving
towards the advanced reactjs topics
which includes flux and Redux. So let's get So
before moving to react.js and talking about
what is react.js let's talk about some of the differences
between es5 and es6 standards. So what are these es5 and es6 these are the basically
the JavaScript standards and since world is moving
towards modern web development. We will be talking
about more about es6 as compared to es5. So let's talk
about the differences. So the first difference es5
calls react dot create class with an object and ESX. It uses class which extends
from react component that basically react
component internally. It calls reactor
create class only if I talk about the S5 that create class accepts
initial State function that is always called once
when the component is mounted, but in case of es6
class in es6 class, we have a Constructor in state. So after calling
the super keyword once first, we will call the Constructor and then the super in the super
it sets the state directly. The most important thing when it comes to difference
between es5 in es6 is The Binding of functions. So when I talk about binding
a functions in create class that is react dot
create class in es5. It was very easy
because every property that a function is automatically
bound is by react but in binding if I talk about in es6 it's a little trickier
a little complex because functions are not Auto bound you have
to bound them manually and the best place to do it is inside the Constructor
with create class. You can Define the prop types and default drops as
properties on the object. But with es6 class these becomes
properties of the class itself. So these are
the basic differences between es5 and es6 classes or the JavaScript standard and now let's talk
about the syntax differences. So if you can see on the screen
on the left hand side and creating a constant called
contacts create dot create class having a render method
and the return statement. But if he is six class
we use a Constructor where we need to call
the super to pass the props to the react component. We now create a class which extends from
react component instead of accessing the rear dot
create class directly. So these are some
of the syntax differences between es5 in es6 now es5 in es6 drop types and
get default props. So what are these crop types
and get default props? So in the es5 version
we used to have reacted create class version the prop
types property is an object so you can see here
get default props and the prop types. So this is an object in which we can declare the type
of each prop but in es6 because es6 uses prop types again as a property
on the actual class, so our class name is contacts. So we are using the prop types and default props as a property
on the actual class instead of a property as a part
of the Be a class definition which was there in es5 now
how you bind the context in ESX? So you bind the context
of any function or any event in London. So as you can see here
that there is a class which extends from
be active component because this is a syntax
which is used in es6. Then we have a Constructor
and props in the super keyword. If you see here Dave on click equal to this dot
handle click dot Pine. So the context is binded in line
in es6 standard now in es6 and standard you have
to bind the context inside the Constructor as we saw in
the previous example, so if there is a table, which is an on-click event
called this dot handle click so this dot handle click
is binded inside the context that is the inside of the class which extends
from react component. So what are the advantages
of es6 over es5 so in ESX you can create promises you can create classes
the traditional functions have been replaced
by Arrow functions. So you can
create Arrow functions. Now, there is a concept
of blocks scoping and modules. So these are some
of the advantages of JavaScript es6 standard and going forward
in this complete video series. I will be talking
about the class components only those are es6 standards. So let's get started. Now what is reaction is so we'll talk about what is
he actually is now so react if I talk about is an open source
JavaScript library as you can see on the screen,
it's a JavaScript library. So I say it's an open-source
JavaScript library for you can see creating
Rich user interfaces that run in user browser. It is developed by Facebook. It is open source, and it is used to develop
interactive user interfaces react focuses solely
on Reading rendering and event handling functionality rendering is
the conversion of data that describes the state
of the user interface into Dom or you can say
into the Dom objects that web browser can use
to produce a user interface that the user can see
and interact with now if I talk about what is react.js so react.js
uses jsx to write the code and it uses a concept
of virtual Dom. The virtual Dom is
a JavaScript object model that react uses to calculate
the user interface changes. So if I talk about
react.js as I said, it uses jsx for writing the code which is basically
the template syntax like HTML but provides also full power
of JavaScript as well. So jsx we can say It's
a combination of JavaScript and HTML now aspects of react.js there are
three important aspects of react.js we will talk about first is the virtual
Dome second is the data binding and third is the server side
rendering but That is like talk about the architecture
of a react.js application. Any reaction has
application is composed of a set of components. So it includes a number
of components and the inputs to these components
are the properties which are referred
to as props and state and this complete architecture
of components props and state we will be talking
about in the later slides. So let's talk about what are the different
aspects of reactors. Now, there are few things. You should know in advance before you start playing
around with react. So if you have never used JavaScript or the Dom it
all before for example, so I will suggest that please get familiar
with those Concepts before trying to tackle or play
around with react chairs. So if I say, what are the prerequisites
to play around with three react chairs, so you should have familiarity
with HTML and CSS. You should have basic
knowledge of JavaScript and programming you should have
basic Name of Dom Dom stands for document object model, then you should have familiarity
with es6 standards which we talked about. So you have to know es6
syntax semantics in features. And then finally
you have to know what is node.js and
how npm is installed globally. So these are some
of the prerequisites I talked about to start
with react chairs. So let's talk about virtual Dom. Now. This is the first aspect we
want to know about react.js. So let's talk about
the problem first. What is the problem? So Dom manipulation is the heart
of modern interactive app, but unfortunately, it is also a lot slower
than most JavaScript operation. So when you write in JavaScript document dot
get element by ID. This is the ID of the element dot innerhtml
equal to some value. Now what happens actually
behind the scenes what happens is that browser need
to pass this HTML. It removes the child element
updates the Dom You with the new value. Then there is
a complete recalculation of the CSS for the parent and child for the complete tree and then the
layout gets updated. So that is each element exact
coordinates on the screen. And then finally there is
a complete reversal of the tree or the render tree and then it
gets displayed on the browser. Now what happens as you can see
on the point number four, this is very much heavy that is recalculating of the CSS
and change layouts because they uses
a complex algorithm they affect and finally they
affect the performance of the application and as well as updating
the Dom properties. It's very complex. Now here we are talking
about only one change. Now, let's say suppose if you want to update
the Dom document object model 10 times directly, then all the above six steps,
which I have talked about. They will run one by one and they will update the Dom
algorithms which will take whole lot of time to update
all the Dom values. That is why we say that real Tom is always slower
than the virtual Dom, please remember virtual Dom is
aspect or you can say concept which is introduced by react.js. Now this slowness of the application
can be made worse by the fact that most JavaScript Frameworks
update the Dom much more than they have to for example, let's say that you have a list that contains 10
items for example, so you check out the first item. Now most of the JavaScript
framework would rebuild the entire list. That is the complete 10 list that's 10 times more
work than necessary. So only one item is changed but the remaining nine
gets rebuilt again, and again exactly
how they were before. So rebuilding a list is
no big deal to a web browser but modern websites
can use huge amount of Dom manipulation inefficient
updating has become now a serious problem. So what happens when you try to update the Dom in react
the reconciliation process So what happens is that the entire virtual Dom gets updated the virtual Dom
gets compared to what it looked like before and now
you have updated it. So react figures
out the difference or which objects have changed only those change objects
get updated on the real Dome and then the changes
on the real down because the screen to change so I can say that in react
for every Dom object. There is a corresponding
virtual Dom object. So like any actual Dom virtual Dom you can say it's
a Note 3 that list the elements and their attributes
and content as objects and their property
to directly change. What is there on the screen
manipulating the Dom is a slow process but manipulating the virtual Dom
is a very fast process or you can say it's much faster because nothing gets
drawn on screen. It's just like a manipulating the virtual Dom
is editing a blueprint as opposed to moving the rooms
in an actual house if you can see
that on the screen in the given tree
The red one the ones which have been changed
and they have only been patched to the real dome instead
of the complete tree. So that is the power of a real Dom you can see
now the important thing that how does react
uses virtual term? It's very important. So as I said that in react every UI piece is
a component and each component has a state so react follows
the observable pattern and listens for State changes and whenever there is
a change it has been updated in the virtual Dom which gets reflected
to the real Dome. So in summary what I can say that what happens when you
try to update the Dom in react, so what happens that the complete virtual Dom
gets updated the virtual Dom gets compared to what
it looked like before you updated it and then it reflects
the changes on the real dome which causes the screen
to change that is the concept of a virtual term now, let's talk about
another Spect of react.js which is take a binding. So react.js follows
very important to learn that react.js follows
unidirectional flow of data or one-way data binding as
compared to other Frameworks which supports
two-way data binding. So in react.js throughout
the application the data flows in a single Direction, which gives us a better control
over the application. So as you can see here that data flows from view
to action from action, it flows to dispatcher on dispatcher multiple
actions can work and from dispatcher
it goes to store. So react apps are organized as
a series of nested components. These components are
functional in nature. That is they receive
information through arguments. Now if I talk about
this one-way data binding or unidirectional data flow
so flux, I want to talk about little bit about here. That flux is a new
kind of architecture that Facebook uses
when it works with react. It is more of a pattern
then a framework and it has four main components. You can see on the screen. The one component is dispatcher. Now what dispatcher is doing that it receiving the actions
and it broadcast its payloads to the registered
callbacks or to the store. The second one is the stone. So it store is acting like a container
for application State and Logic the real work
in the application is done in the store the store you can
say is registered to listen in to the actions of the dispatcher and it will work accordingly
and it will update the view. So if I talk about view or more specifically
the controller views, so react components
they grab the state from the store they grab
the state from the store and then they pass it to pass
it down to the child components. So that is how data binding
Works in react.js. It's a one-way data binding
or you can say you need a directional data flow now
another concept of react jail that Server-side rendering
so let's talk about server-side rendering now. So server-side rendering
allows you to pre-render the initial state
of your react components at the server side only
so server-side rendering which is also called as SSR
in a preheated form. It is called SSR. It is the you can say ability
of a JavaScript application to render on the server
rather than on the browser. This is the exact definition
of server-side rendering. I repeat this definition
server-side rendering is the ability of a JavaScript application to render on the server
rather than in the browser. Now there could be
a question in your mind that why would you be ever want to do so so now I will list
down some of the advantages that why you want to do so because it allows your site
to have a faster page load time, which is the key
to a good user experience. It helps in the SEO that is
search engine optimization because what will happen that without Side rendering or your server ships is
an HTML page with nobody. So just some script tags that are then used
by the browser to render the application. So in a nutshell, what is the difference
between client-side rendering and server-side rendering so
in client-side rendering your browser downloads
a minimal HTML page? It renders the JavaScript
and fills the content into it. This is client-side rendering and what a server-side rendering
on the other hand server-side rendering it renders the react
components on the server. And what is the output
the output is the HTML content? So that is the use
of server-side rendering. So we talked about three
important aspects of the xjs that is virtual Dom data binding
and server-side rendering now, let's talk about
virtual Dom in detail. So if I talk about virtual Dom as you can see on the screen
that model gives data to view which in turn creates
Adam for it. So here a model so
model had information. For the user ID and location. It has been given this data
has been given to the view which in turn has created the Dom now model
gives data to the view which in turns create the Dom
but you can see over here that if I change the user if I change the user
from ln2 Max that is the only change which has happened in terms
of three properties as compared to three property. Only one property
has been changed and that property only be reflected
on the real term. That is the power
of a virtual Dom. So as I thought about that,
what is a virtual Dom right? So virtual Dom only give
updates to the real Dome it not only gives the update so that the complete page
or the complete HTML or css does not get loaded again
and again on the screen. So now here see if location is changed
if location is changed. Okay, if I talk
about the previous location, the previous location was u.s. It was compared and then you can see
in the real term. The location is changed to UK because virtual Dom it has
not put several load on The View and makes our processing
also very much faster. So with react.js well model
gives data to the view. If the Dom is empty react
will create a dome for it. That is also a beauty or you can say advantage
of a virtual term as you can see here
that with react.js when model has given
the data to The View and if the Dom is empty react
will create a dome for it, but at the same time
it is checking with the previous values and
if it has found previous value as Ln in the new value is Max, the user property
has been changed to Max in the real term. So let's talk about
the advantages of react.js now. What are the various
advantages of VHS? The first one application
performance is increased. So which means that the creating the dynamic
web applications now, it has become very easier and react.js is very
much easier to learn now how the application
performance has increased. We have already
talked about that. It uses a concept
called virtual Dom. So enhancement of
performance has been done or you can say application
performance is increased because of the concept
of virtual Dom. It is used on the client side
as well as on the server side react.js can be used
both on client side and server side
and it also known to be seo-friendly you can say
library readability is improved. This is one of the greatest
advantage of react.js at the readability of the code or the readability of the application
has been improved a lot. Another is that it
can be easily integrated or used with other Frameworks
like Angular JS or meteor or View. Even with knockout Json purchase another advantages of EHS I
want to talk about here is that the reusable components
so react.js focuses on the concept of reusability. So react UI as we know that it is declared
inside the components. So if I talk about a component
here at this stage, so component is like a function that accepts the props as inputs and outputs the declared
interface the UI should be composed of as many as components as possible
to maximize the reusability. So the concept says that you should decomposed into multiple components
your react.js application at the same time react.js is
a very much famous Library. So there are very much great developer tools
available out there for you can say
Chrome and Firefox. There are browser extensions
for react available in Chrome and Firefox browsers. So these extensions you
can say Allows you to inspect the react component hierarchies
in the virtual Dom. So you can select
individual components and examine a negate their
current properties and state. So these are some
of the advantages of react.js react chess is
very much popular nowadays and is used by almost
all the developers across the globe now
applications of react.js. So there are
these famous applications which are using react.js
in their applications or maybe browser application and some are using
in their mobile apps. So some are also using
react native instead of react along with the react.js in fact, so some of the famous
applications one of them is obviously Facebook
Yahoo Uber Netflix, Twitter Instagram Dropbox
and New York Times. So these are some
of the very big or famous applications which are using react.js or react native in their website
or in their mobile app. No react.js installation how you install the react.js
in your application? This is very very important
to understand now when I talk about react.js installation, so you can use it or you can install it
in your environment by using the script tags
either in a new HTML file or in your existing HTML file
in a existing project. So if you are interested
in playing around with react what I want to give you that you can use
online code playgrounds. So I will show you
that so what you can do is that you can use
online playgrounds. For example, you can use
glitch you can use code pen. You can use code sandbox also, so these are some of the you
can say open playgrounds which allows you
to write code in react.js if I talk about this particular
code PennDOT I/O website. So what you can do here is
that you can write the HTML. You can write your CSS and you can write
your JavaScript as well. But to configure this
environment what you have to do that you have to click
on this gear sign in JS. Besides the JS. Once you click over it, you have to select
the react libraries, which is first is react.js and
second is react Dom development or chairs these two libraries. You have to search from here and then edit and another
is Javascript preprocessor, which you have to act so
once this is done so that you are ready to play
around the react.js code in these you can
say online editors, which allows you to write
code in react.js, but if I talk about the actual installation in
your project or in your website how you can add
react to a website so you can add react
to an HTML page so you can add react
to an HTML page. So when starting a react project
a simple HTML page with the script tag might still
be the best option okay it Only takes a minute to set
up it will take just a minute to set up the react.js
in your existing HTML file. Now, I will show you
how to add a react component to an existing HTML page. You can follow along
with your own website or create an empty HTML file
for your practice. But before that if I talk
about react.js installation, you have to download some
of the dependencies in your environment. So first one is download and install the npm you can open
the command prompt then go to a folder you can write the command
npm start installation. And then you have to install
the web pack using npm. You have to install react and then table table
is used for jsx because internally JavaScript
needs to be rendered in the browser. So what are the things which are required
for react.js installation? So the first and foremost file
is webpack dot config dot J's. Now, what is this file all about
it contains the information about the dependencies. What are the all
dependencies is there? And the files from their browser
should start rendering from so it allows you
to give the information of your startup file and then you will
have a HTML file which contains the
complete HTML template which is used by the browser
to render the elements and then they will be a j6 file which contains the description
of what all components we want to display on our web page
and how they will behave so let's get started
and we will see that how we can use react.js
in an empty HTML file how we can add the dependencies
and before starting that thing. Let me tell you one thing
that before learning react.js. You should install node.js
in your environment. This is official website
of node.js from where you can download
the node.js version. The left hand side is the LTS version that is
long-term support version. And the right one is
the current version. You can install any words
when you want while working with react.js that's not a problem at all and the same time
for the beginners for learning to This
is a very good URL. I would recommend that it allows you to understand
complete JavaScript from here. You can learn JavaScript
if you are a beginner and you want to learn
then react.js Concepts. Okay, so let's get started. So what I'm going to do is
that I have created a file. So first of all, you have to add
a Dom container to the HTML. So what I have done is that under the plain HTML file
I added to script tags so you can just like this add the script tags in your HTML file one script tag
is for react.js library, and another is for react Tom. So first of all, you have to add a Dom container
to the HTML and add the script tags. Okay. So what I have done is
that I have open HTML page where I want to add it added a you can say a div which is having a root day
which is having an ID as root. So once this is completely set
up then I added the script tags. So what are the script tags
I have added one is Dr. Jason react Tom doj's
another script tag, which is required for react.js application
is table dot window J's, which is acts just
like a preprocessor. Once it is done. Then I am ready to create
a react component. Okay. So what I have done is
that in the script tag, I have just used
react domed render. Now. What is this? React Dome Riyadh Dom is a class or you can say API which
contains a method called render. So react domed render and this particular
reactor MDOT render method takes two arguments. It is very important to note that react Dom don't render
method takes two arguments. The first argument is your HTML
or you can say jsx element. The second argument
is the placeholder where you want to render
your data or you want to render your element. So that is how we write
react Dom dot render. So let me save this file
and let's run this file. So if I run this file
on the web browser? So here is the output
of this file hello world. This is a simple
plain react.js file where I am added the script tags for react.js
one is for react.js. Another is for react Dome and the third one is required
for the pre-processing of the JS X component, which is used over
here in the H1 tag. I have just written
hello world and that is how it is rendered
on the browser. Okay. Now, let's check
another example, so I have one more example
to show over here. So I have created
two files index dot HTML and a JS file. So let's see this index dot
HTML file what I have done. So in this index dot HTML file, I have added
some H2 tags P tags. And then there is
a div tag having an ID and there there are
two script tags for react.js and react dom dom Jess. And in this
particular HTML file. What I'm doing is that I'm creating
a react component in a custom GS5. So what I have done is that I have created a file
like button dot JS. This is a custom file which will be
next to my HTML page and after the started code
in the like button dot J's, if you see like button dot JS
what I have done that I have created a component. So this is class component or you can say es6 is
standard component. Okay. So what I have done that I have created a class
like button which extends from react component as we said that it
should have a Ter and super passing
the props to this class. I have said the initial
State distraught State equal to life false and every component
should have a render method and a return statement. So in the render method
and just checking that if they start state DOT, like it will return me that you liked this and return in the on click
calling a Handler this what set state where I'm setting the state
that like the equal to true. So initially liked was false
and finally it is clicked. The button is clicked. The state will be set as true
similarly react on the render as we mentioned that it takes two arguments
one is your element and another is your placeholder where you want
to render the output. Okay. So, let's see the output of this particular demo
So you see here, it is giving me
the desired output. What is the output? So see what I have done is
that in the HTML? First of all, I wrote at react in one minute
this page demonstrate. So this is just
a simple static tag, or you can say static text, which is shown
on the screen. Now the important part
there is a button. Okay. So on the click of that button, what I am doing is
that I am setting the state. So I'm setting the state
from false to true. So if you see
in this example, if I click on this button, like this state
has been telling me that you like this so that is how we
can create components or you can say class-based
components in react.js. So let's move forward now we will talk about
some react.js fundamentals. What are the various
reactions fundamentals available in react.js. So first of them is jsx, so we will talk about
jsx components props State life. Even traps and keys. So all these will talk about
in a stepwise manner in a particular order
starting with J 6. So let's get started with JS X. So J SX stands
for JavaScript XML. It makes your HTML
very easy to understand. So if I talk about jsx, you can say It's a combination
of JavaScript plus XM. Okay. So JavaScript, or you can say jsx,
it allows you to include XML like syntax
in line with JavaScript. So react specifically
uses jsx to describe the composition you can say of react components
in a readable way. So what happens is that behind the scenes
there is a jsx Transformer, which pre-process has the jsx and converts each element
into a JavaScript function call. So most of the projects uses
Babel as a preprocessor. You can say to convert
jsx to JavaScript. So the typescript
compiler I can say that it is also capable
of compiling the jsx. Okay. So if you are using typescript
in your environment, you don't have to use Babel
as well JS X is a syntax, which is included in line
in JavaScript files that is converted by
a preprocessor like table into regular JavaScript. Okay. So this is all about jsx. Now if I talk about what are
the various users of jsx? So the first thing first
why it is called the j6, it is called jsx
because the type of syntax which is extension
to a JavaScript and I will recommend
you to use it with react to describe what the UI
on the browser should look like. Okay, so jsx may remind you
of our template language, but it comes with the full
power of JavaScript so you can also say that jsx produces react elements
and react Embraces the fact that rendering logic
is inherently coupled with other you elegy now ready. GSX what is a regular Chase X. So here what is written is a variable my component equal
to react create create class. So as we talked
about react create class is a es5 JavaScript standard having
a render function render method and a return statement. Now, it will return
this hello world. So just like
a regular j6 statement. We can write in react components
now jsx nested elements, so you can have multiple you
can say HTML elements nested within each other in jsx expression or in
a react component. So just like here there
is a div then H 1 h 2 p and Dave close. So these are some
of the elements which are nested
or you can say j6. Nested elements now
is specifying the attributes now attributes are always
specified in curly braces. Please remember that attributes if you want to specify
any attribute, okay, or you can put any valid also. JavaScript expression also but that should be
inside a curly braces in jsx. So for example, if I write 2 plus 2 so 2 plus 2 is you can say
static text in terms of jsx, but if I put it in Cali braces
so curly braces two plus two, it will become 4. So here also in this example
some style is defined in the curly braces
with background color as see on and in the return
I am using this style div style equal to
in curly braces the Styles then only this is tiles
will be applied to the header. So, please remember if you want to specify
attributes in jsx. You have to specify
in the curly braces. And if I talk about also
attributes specifying in jsx, you can also use codes to specify the string
literal as attributes. You may also use curly braces. But only thing is that don't put quotes
around curly braces when I'm betting
a JavaScript expression in actor if you I will say that you should either use
codes may be for string values or curly braces for Expressions, but not both
in the same attribute. So just try to understand that jsx is actually very closer
to JavaScript and not HTML. So there are
a few key differences which has to be kept in mind
while writing jsx. So let's move forward
so you can embed the JavaScript. So as I mentioned that if you have to
calculate an expression because jsx is an expression
to because as I mentioned that after the compilation
of the code jsx Expressions become regular
JavaScript function calls and a evaluate
to JavaScript objects, which means that you
can use jsx inside of if statements or four loops and while loops and you
can assign it to variables, they accept it as arguments
and return it from the function. So in the return statement if you want to write any
JavaScript expression you have to It in the curly braces then
only it will be calculated else. It will be treated
as a static text. Now, let's move to
another fundamental of react.js that is components now, we'll talk about
components in detail. So first thing first that in react everything
is considered as a company, so I will say in react
everything is a component. So on the screen you can see that there are multiple
components 1243 + 5 + on the web browser. We need to add them
just like components so they have been added just like a widget so
sections of web parts or specifically components and all these components
are integrated together in react to build
one react application. So in react what I can say is that components lets
you split the UI into you can say independent
reusable pieces of code and you can think
about each piece in isolation and that is where the concept
of Usability comes into picture that each component
can be reusable at a later point of time but conceptually components are
like JavaScript functions. You can say like that. They accept some
arbitrary inputs. So the inputs to a react
component is called props and the return react elements
describing what should appear on the screen. We can easily update or change
any of these components without disturbing the rest
of the application. So as you can see that if I want to update
or change any of the feature of this component one, I can update it without disturbing the rest
of the application or you can say without
disturbing the other components on my application. Now how components
are split internally. So single view of UI is divided
into logical pieces. So on the left, you can see that it's a single view or you
can say react base application, but how it is divided internally
into logical pieces. So the concept in Of component
in react.js always says that you should have
a parent component and then you can have child components or subcomponents and it
behaves like a tree. So at the top you
will have parent component or you can say base component and then there
will be some branches or some branches beneath it. So the starting components
becomes the root. It's called The Root component and the rest of the all other
becomes you can say the branches and sub-branches. So in this diagram, you can see the component 1 is the root of the UI tree
2 & 3 are the children of 1 & 4 & 5 are
the Sub sub branches of the second component. So that is how you
can split the complete UI in react.js components. Now each component
returns one Dom element. So as I mentioned
that in every component, you should have a render method
and a return statement. So each component in react.js, it returns one Dom element
and how it is returned that there is an API called react Dom and it
has a method called render. So react Dom dot render
will allows you to render the different components
on your application. So the jsx elements
must be wrapped in an enclosing tag. So always please remember that if you have
to embed the jsx elements inside a return statement
or a render method, you have to wrap it
in in closing tag. So here I am creating a es6 standard component
class component 3 so 1 2 4 & 5 3 is here which is written
like this that hello world. Welcome to edu Rekha
and react dom-jot render. I am calling the Component 1 because component one is
my root component and where I want to show you is
the ID of that development that is documented get element
by ID content now if I talk about props
and state so react components are basically controlled
either by props or you can say by state so we will talk about them now. But before that what are just a summary
of the components that everything in react is
a component each component returns a Dom object as I mentioned
that component divides your UI or splits your UI into
independent reusable pieces, and then each independent piece
is processed separately a component can be divided
into a root component and into the child components and then we can further split
into smaller components. Now, this is very
important to understand that how you render a component. So when react season element
representing a user-defined component it passes
The GSS attributes to this component
as a single object and those are called
specifically props. So you see here. This is a function welcome, which is just like
a component having some props as a parameter. So we call here react dom-jot
render with the welcome name. Welcome name. Let's say name is the prop over
here having the value weapon and react calls this welcome component with
the name people as the prop. So this becomes name
equal to people is the props welcome is a component which returns H1 tag
and then react Dom efficiently updates Dom
to match this H1 tag. That is how a component
is rendered in react.js. Now the other fundamental
the most again a very important you
can say fundamental of react.js are the props now what our props so prop helps components
to converse with each other or to communicate
with each other. This is I can compare it
with you can say arguments or parameters of the function. So if In this example
class body extends react component return header and footer now
in header name equal to Bob and name equal to LX. So, how can I
return this property to this class component by using
this dot props dot name? So what this dot props
dot name will return this dot props dot name,
then it comes to header. It will written Bob and this dot props dot name
for the footer component. It will return me Alex. So how you can access
props in react.js. If you want to access props in react.js the syntax is
this dot props dot name. So using props we
can configure the components. So now I have another header
and footer components and I'm passing a different
value name equal to Miller and name equal to Cordy. So in the header component if I write this dot props dot
name in the previous example. Also, I wrote
this dot props dot name, but the value was
something different. And in this case
the footer component will return Meet this dot product name
the value will be Cody. So Props are basically
used with components. They revolve
around the components. They help in the conversation of
different components via props. We can do the conversation or communication between
the different components in reactions and
how to access those props. The props are accessed using
this dot props dot name or you can say this dot props
dot the attribute name or attribute value. So if I talk about props, they work similar
to HTML attributes data flows from downward
from the parent component. So as we are talking about a UI tree
a parent-child relationship, so in terms of props, it's a unidirectional flow
of data props are immutable. That is they are pure here. We are talking
about pure functions or pure components. So Props are immutable so as compared to a state
which is mutable, which we'll talk
later but props, please remember are immutable
so they are pure in nature. They can set default prop
so we can set some default. Pigeons around the props now, let's talk about what is pure and impure here we
are talking about so whether you declare a component
as a function or a class, so as we talk about components can be of two types
a function component or a class component, but it must never modify
its own props. So Props are always read only
they are immutable in nature. So it is very well said that all react component
must act like pure function with respect to their props. So let's talk about
what is this pure function? And what is this
impure function here? We are talking about. So for example, there is a function called some
having some parameters A and B, and it is returning a plus b,
so in this particular example, this is called a pure function
why they are called Pure because they are not attempting
to change the input values. They will always return the same
result for the same input. So by that what I mean is that I'm not altering
the value of a or b inside the function definition. That's This is called
a pure function. But when I talk about impure function because
the function is improved. So it changes its own input. So for this particular function
the input was account and amount and you can see there that I am changing
the value of account. So it becomes impure function
and that is not allowed when it comes
to components and props because all react component
must act like pure function. So Props are read-only or you can say props are
immutable in nature now components in props. We talked about that. There are two
types of components. You can create in react.js because components allow
you to split the UI to Independent reusable pieces and you can think
about each piece in isolation. They are basically just
like JavaScript functions, but there are
two types of components which you can create based
on es5 or es6 standard. So if it comes to es5 standard, you can create
a functional components, but the recommended way
and I will recommend that you always create
a class component. So how we will create a function
component normally just like we create a function so function welcome having
some props or the parameters, but if you want to create
a class component, so you have to use the keyword
class the component team which extends from
Viet dot component and it should have always
have a render method and a return statement. So that is these two are the
different types of components which we can create
but from a react point of view. They are always equivalent
these two forms of component are always equivalent. Now another fundamental is state
but before moving to the state or you can say another
fundamental Let's gets deep dive into some of the examples so that the three basic
fundamentals which we talked about jsx components and props. You can have a better
understanding about these. Okay, so let's get started. So I am just opening
the node.js command prompt. So I opened the wrong. So I am moving to the D drive and I am moving
to a specified location. And then I am opening the code in editor called
Visual Studio code. So let's talk
about the basic example that how you can render the jsx in react.js a very basic
and simple example, we will talk about that how you can render
jsx in react.js. Okay. So what we have done
over here is that we have a react Library the reference
of a react Library. Okay, and then reference
of a react Dom dot library and then reference
of the Babel dot J's in the script tag. I have called
react dom-jot render. And in that react dom-jot render because we want
to render the jsx. Okay, and please remember that you have to use script type
is equal to text be able to indicate the jsx code
in JavaScript or jQuery. We refer is script type
equal to Text slash JavaScript, but then we are working with jsx you have to use
script type is equal to Text slash be able
to indicate the j6 code and include Babel
dot pin dot chase. This is very important and this
be able dot Min dot J's. This is a browser
version of Babel. Okay. Now if I run this code
what will happen that in this this script tag
will get executed and the reactor MDOT render. I have written hello world. So let's run this piece of code and just running this HTML file
and opening it in a browser. So you can see the output that it is showing
me hello world, which is written
in the script tag in real dom-jot render
in the H1 tag. So, please remember that this render method takes
two parameters always the first is your jsx element. And another is
your place holder. Okay. Let's move to the another demo
where we will see that how we can use
the JavaScript in jsx. So as we know that we can also use
JavaScript in jsx. It takes the angle brackets as
the beginning of the HTML syntax and curly braces
as the beginning of the JavaScript syntax. Ok, so here you can see that I have created
an array name is equal to some names and in
the reactor MDOT render. I'm using a JavaScript names
on the names array. I am using the map method
which is calling on the name. And on the index key
that is a key value pair. And in this I am returning
the key equal to index. Hello. And the name now you see
here this name is represented in the curly braces
as a attribute because names if I don't put it in the curly braces will be
considered as a simple text. So let me save
this file and run this. So you see here? Hello Alice Hello a million. Hello Kate. The reason being why this output because I have written
here is hello and passing the parameter as a jsx. So I'm using the JavaScript
at the jsx and looping around the values in an array
using the map function or map method which is inbuilt method
of the array collection. So that is why
this particular output is shown. LOL is hello a million. Hello Kate because these
are the three values which are there in my array. Okay now, let's move
to another example Again, a very simple one that I have created an array
having the key values as 1 and 2 now in the reactant not render. I am calling this array. Now what will happen that in my output it
will represent that hello world. React is awesome. Now in the next in this example, what I am doing is I
am defining a component. So we talked about props
we talked about jsx. We talked about
components, right? So in this particular example,
I am defining a component. So what is the syntax for
defining the component class? Then the component name which extends from
react component then it creates a component class and it
implements a render method. Please remember that the class components or the function components
always should have a render method class components always implements
a render method to return a component instance
of the class. So if I talked about
before virgin 16 of reaction If users react dot create class
to create a component class now, it has been deprecated and we
are using the es6 standard. Okay, now components
can have attribute and you can use
this dot props dot some attribute to access them. Just like in this case. I am using this dot
props dot name. So what I am doing is that in react dom-jot render
as I mentioned, you have to call
the parent component or you can have to call
the root element in this case. There is a component
called Hello message. Okay. Now in the Hello
message component, I am passing a prop with the
attribute name Lex equal to name and its value is shown now what will happen
in the Hello message. It is returning. Hello. This dot props dot team
as I mentioned while talking about the props that how you can
access the problem. Okay, how you
can access the prop. So how you can access the prop
you can access the prop. Is this dot props
dot attribute name. Please. Remember how you can access
it this dot props. Attribute name this is
very important to understand and now let's see
the output of this. I'm opening it in the browser. It is showing me the output. Hello, John. Okay. Now let's talk about
this dot props to our children. Now, what is the use
of this dot props for children? So react uses this dot props for children to access
component children notes or you can say hii notes so you can see here
this dot props to our children. So please remember that the value
of this dot props for children. It could have three
possibilities in fact, so if the component has no code then the value
will be undefined. Then the second possibility
could be that if it can have
a single child node, let's say an object and if multiple children notes
then it will become an array. I repeat that there
are three possibilities while using this dot
props for children. So component can have no children note in the value
will be undefined in that case. If it has single General node, then it will be an object and
if it Multiple children nodes, then it will be an array. So react gives us the utility
called reactor children. This is reactor children. This is a utility given
by V at for dealing with this dot props
for children data structure. So we could have used
reactor children dot map to titrate into the children's of the component without worrying its data type
being undefined or object. So what I'm doing over here is that I've created
a notes list component that is a class component. So class notes list extends
react dot component. It can Clements render method and it Returns the instance
of this particular class, since we are accessing the children of
the particular component so we can use react children got map in this I am calling
this dot props for children and it could have
three possibilities. But in this case
since we have a children, so our output would be hello
world in this case the output will be hello world
in a lie structure. So that is how you can use or you can access
the children components also of a particular component. Let's move to another example. So prop types components
can have specific attributes which are called props in react
and can be of any types. It can be of any type. So here you can say prop type. Taut string dot is required. So what happens is that sometimes you need
a way to validate the props so you don't want users to have
the freedom to in put anything into your component. So react has a solution for it
and it is called prop type. So what we are doing is
that we are saying that prop types is
of type string and it is required. This is kind of a validation
we are doing so what is done in this particular example, is that the my title my title is a component has a props
of title rock-type tells react that the title is required. It is required and its value should be
of type string now if we Let's say for example
title a number value. So we're data equal
to let say 1 2 3, for example, okay, then it will result in an error which means the props
does not pass the validation and the console will show you
an error message something like let's say failed prop tight. So what I'm doing
over here is my title. I'm calling the component
and there is a title where I'm passing the data
and data is one two three. Okay, so that is how you can Implement
some kind of validations or you can apply
some kind of rules where you don't want to give
the user a freedom to write anything in your component. So these are some
of the basic examples we talked about for jsx for crops
and four components now, let's move to another
set of examples. So let me close
this very quickly. Okay. So these are again some
of the small examples which allows you to work with jsx props and components
but before starting this, let me tell you
one thing very quickly that as I told you that this is the node
js website from there. You can install the latest node
js version and once you install so there is a GitHub
project provided by Microsoft open source project, which is called
create react app. So you have to write the command like this npm
create npm install. create react app and
once you press the enter, so a project will be created for you complete react based
project will be created for you which will allow you to have
the complete solution structure in terms of index.js index dot
CSS AB dot JS + AB dot CSS. So you will have a SRC folder
and a public folder. So these two folders
are very important and we will talk
about this in detail. So what happens once you create a Project based
on create react App application a solution a builted
solution is given to you which allows you to write
the code or to test your different functionalities. So it has two folders
one is the public folder where we have a one HTML file
called index dot HTML where we have defined
a root element in a div with the ID as root. If I go to the source folder
the starting file is the index dot J's
in the index dot JS. We have react dom-jot render as you can see at the top that we Imported
react we have imported react Dom imported the index
from the solution structure. Now react dom-jot render calls
the parent component, which is the app app is the name
of my parent component. So if I go to app dot JS there
is a parent component class app extends component. You can either write component or you can also
write react component. That's not a problem at all. Every component as I mentioned should
Implement a render method and there is a return statement which Returns the instance
of that particular class. Now, I can write the jsx inside the component in
the return statement simple HTML and the JS structure the div, I have given the div
class name equal to app. Now there is a header
in this header. I have implemented an image
with a class named app logo, alt equal to logo and H
1 equal to class name app title. Now this header tag
is closed here. Now you see the important
thing over here. In the main component as I said that the basic
principle of react.js that you have to
compose your decompose your complete application
into multiple sub components. So at the top there
will be a parent component and there will be
sub branches or branches of that particular component. So the first component
a parent component is app inside it I have called
three different components one is the demo class. Another is author
and another CMP style. So first this demo class
sub component will be called with this subcomponent
a prop is defined a prop or you can say parameter is defined with the value
react classes the value of this particular you
can say prop it will be used in the definition
of the demo class component. So if I go to the demo class
since it's a class component, it should Implement
a render method and a return statement. So how you can use the props
you can use the props by using this dot props. So that is how it is used. What here this dot props? And what is the attribute team that rebuke name is the demo
class the second sub component, which is called is
the author the author again has an attribute
called author name which is used in this component
class author extends component render implementation and then a return statement
this dot props dot author name, which means that whatever
attribute to Define over here can be used in the component by using the syntax this dot
props dot attribute name. Now. The third component is
a little bit different that rebuke name is
a student named but here what I have done is
that in the render method. I have applied a custom CSS
just to show you that how you can use
the attributes are in the jsx in a curly bracket. So where my style
some styling has been given and in the return statement
style equal to my style now this my style is put
in a curly bracket, which becomes a jsx. Point after that I have done some calculations you
can see here calculation for minus two equal to it is in bracket then only
this value will be shown. Okay now to run
this create react application if I go to package
dot Json file. So what is packaged
or Json so package dot Json you can say is the introduction
of any react based application or you can say
the basic information of that react base application. So it gives me about the name about the Virgin
about the private dependencies and test scripts. So there are some default
scripts at the same time. You can create
some custom script of yours. So there is
a script called start. So if I have to run
this complete project or application however
to write it so in the node.js command prompt
I have to write npm start so I have clicked enter
and this will open the browser on the local host
on the port number 3000. So now you can see
here the output that there was a header
in the header. There was an image a text and this is react classes
by the pull chain and you can see
the calculation has been done because we place the attribute
the complete jsx or you can say JavaScript expression
in the curly bracket. So this is the output
of this particular code, which I showed you
in app dot J's. Now the beauty of
this particular application is that whenever you will change
the code whenever you make some changes you don't have
to run the npm start again. And again, the changes
will be reflected on the browser instantaneously so you can say that this particular application
is very much reactive in nature. So whenever you change the code
or update any code, it will directly get reflected
on the browser. Okay. So let's go to index dot chairs and start making
some changes in the code. So I'll start with again
basic j6 elements so that you can understand
how we can write jsx. This is a very simple example
again react dom-jot render H1. Hello world. So if I go on the screen, I have not saved it
if I save this file if I go to the screen,
it shows me hello world. I am not refresh the screen. It's very much
reactive in nature. Okay. Now let's talk about some more
examples will quickly see some more examples jsx. I am just showing you
as of now jsx props and components examples. Once this will be completed
then we will talk about State lifecycle events and the remaining concepts
of react chairs. So in this particular example, how you can add your jsx
in the previous example, if you have seen
that in the react donbot render, I have added the complete
element as the first argument for react dom-jot render, but there is one more practice which you can follow
That instead of writing the complete jsx or HTML expression in the react
dom-jot render first parameter. What you can do is that you can create an element outside
the react node dot render and then pass that element in
the reactant dot render method. So what I've done is that I've created a dummy text and created a constant element
in that I have created a device structure
in that device structure. What I'm doing is that I'm creating a button
class name equal to button. The text is button and then a sample text
will be displayed. Once this constant element or you can say a j6
expression is created. I can pass this to react
dom-jot render like this. So let's save this file and see the output you
can see the output that there is a button and some sample text
shown on the screen. So this is the best practice
you can say to write the jsx expression
so jsx elements because your jsx elements
can go bigger and bigger if it Single line jsx expression
or j6 statement? You can very well write it
in react domed render. But if it is very big or going to become very very big
then you can put it outside react dom-jot render
in a constant element and then you can pass the react
Dom render that element just like shown on the screen now, we will see the example how you can render
the elements using jsx. Now how you can render
the elements using jsx? Now in this particular example, please remember that
every react application. It should start
from Vietnam to render. So how the data flow goes It
goes from here Dom dot render. So first we will see what is passed over
here the element which is passed
is constantly mean now in this constantly meant
what we are passing is in H1. Hello format name and we have passed
prop says user now. What is format name? You can see that format name
is used as a function component. The parameter passed is
user and for this user the properties using
the arrow function here. The arrow function
is used the properties for this user user DOT. First name and user dot
last name is used as in the arrow function, which are passed
to this particular function as a properties. So return user DOT first name
and return user dot last name and in
the react download render. I'm calling this element. So let's save this file and what output it will give me
it will give me the hello user. No formatting format name
is calling a user so user is repulsion. So hello, we pull chain because Ripple is the first name
and Jane is the last name. So let's close this quickly. Now, let's talk
about some other example. It how you can render
the elements in react years now. We'll start with real Dom render
in react Dom don't render. There is a parent component,
which is clock. Now. What is happening
in this clock is that this clock
is ticking weird, as you can say class component so class clock extends
react component a Constructor a super is defined and we are setting the state
this dot State please remember state is always set. The initial state is always set
by using this dot State and in this word State
we are passing date as the new date in the component. Did Mountain component
will Mount we'll talk about this later because these are
life cycle methods in this just we are calling
different different methods and we are setting the state in
the tick method take function. We are setting this
with the date new now, what will happen that in the render
method there is H1. Hello Whipple and in the H
to how we set the state. Please remember that
we set the props using this dot prostitute
attribute attribute name. And just like wise
we sent the state this dot state DOT attribute. So here what I'm doing
this dot set State dot dot dot to local string which will show me
the current date or time. So hello Whipple,
it is 10:36 p.m. That is how we can set
the initial State and final state in react.js. Now components in props. Now, let's talk about what are
the components in props? So we already saw that in react dominant render
we can pass the element but in the element
again instead of passing the complete jsx statement, we can pass it as a component so you can see over
here const element in the previous example, I showed you that in the element
there was a jsx expression having some tail
some P tag some H1 tag, but in this particular example, I am passing a component
to the constant element. The component name is welcome
having some attribute for last name now
in the definition of this particular component, which is function welcome. I am returning H1. Hello props dot last name. Now. What is lasting Jen? So let's save this and
let's check the output. You can see here. Hello lasting. This is my last name that is how you
can render the components and props in react.js. It's very simple very
straightforward in nature. This is just an interesting one
having some null value. So how you can conditionally
render a react component. This is very important
to understand that in element. I have a component for your message
having attribute message having the value as null now
in the react dom-jot render. I am passing this element and
calling the message component. So let's save this file
and see the output. So there is no output
you can see on the screen because I am passing
a null value so you can also conditionally
render a react component. So let's move to another example that how you can style
the react component very very important to understand that how you can do The Styling
in the react component because please remember just like a native
JavaScript and jQuery. We used class class
equal to some name to let's say style any tag or component
in JavaScript or jQuery, but in react we use
the class name, this is a keyword. So instead of class we use. I mean, so this class name I
have defined in index dot CSS. So if I save this and see
so you see here. This is the CSS which is defined and the techs
rendered is Apple box because the text is given
over here is Apple box. So this is a box is small
you can say class which is defined. So if I go to in index dot CSS,
this is the Box small class, which is defined so
defining the class in CSS. It's pretty Same by the dot
by the dot operator. You have to define the class, but for calling that class
instead of class keyword, you have to use
the class name keyword. This is very very important
to understand in reactors. Now, I will show you a very
good example of react.js that how you can Implement
multiple choice question kind of functionality in react.js, very important to understand. So let me close this so
for stopping this npm start you Press control C
on your keyboard. It will ask that you want to terminate
the batch of you can press yes, and then press enter. I'm just opening
another example, which closed everything just
open this in Visual Studio code. A very good example, we will see that again
the same example index dot JS. I have AB dot J's
defined and index dot J's and index dot JS. I'm calling react dom-jot render
in this the parent component will be called
the parent component is app and here in AB dot JS. This parent component is written
as a function component. You can see here that it is returned as
a function component, right? So let's run this code. First of all to see it running. So for running any react based create create
react App application, you have to use
the command npm stock. So I have just entered
the command npm start and press enter. So it will open up
in the browser so mean by we will see the code what is written in this function
component in after chairs. So in index dot JS, I have written
react dom-jot render. This is the parent component and document dot
get element by ID where I want to display
or render the output. Okay. So let's go to app dot JS. So in this app dot J's since this is
a function component. I have a return statement over
here in this return statement. I have written some basic HTML. So header tag is there so
in this header tag, what I have done is
that specify the class name because you have to specify it
with the class name. Some image will be there
and then in the anchor tag, I've written some static text. So it's running as of now. Starting the server npm server. No problem. We'll move to the code again. Okay. Now in this particular example, what I want to show you is
a multiple choice kind of functionality multiple
choice question quiz, you can say so
let me just do the and commenting and let
me comment this react on dot render else. There will be multiple
react of the tender. I don't want that. Okay. So this is the application
which we want to create. Now. The question here is that how we can create
this type of application. Now, this is a multiple
choice question application, which is created in react.js. Now as you can see, this is the output which I'm showing you now
as you can see on the screen that there is a section
called correct and incorrect. So this is my score
area you can say that this is called a score area
below is is my question area. Now. These are the
two high-level areas or components I have talked
about but at the same time I can split this complete UI
into subcomponents. So when I say this is
the score area, okay or let's say the outer
complete boundary is the quiz then I have a square area
in this score area. I have to subcomponents
the correct answer and the incorrect answer
and in the question area. I can have two sub components
the question and the choices. So if you see It asked me that what is 8 into 1
if I click on eight? See the answers goes is correct and state is changed
to correct equal to 1 right. So I just want to show you
in this particular example that how you can decompose
your UI or decompose your react application
into subcomponents or you can say you can create a
parent-child kind of hierarchy. Although some advanced concepts are used to build
this particular application which are not going
to tell you as of now, but I just want to show you that how you
can decompose an application if it is given as a requirement
of problem to you then how you can decompose it
into different components. So let's go back to the code and let's directly
go to react dom-jot render. Now in this react dom-jot
render the first component or you can say the root
or the parent component, which is called is
the quiz company. Now, let's go
to the quiz component. Where is the quiz component? This is the quiz component. Now. This is a class-based quiz component following
the es6 standard class quiz extends react component
having a Constructor super and a data set is defined
with the correct answer now, once this data set is defined. Okay. Now we are setting
the state initially state that is the start State
and binding some click events or you can say functions to it. But the most important part
is the render method or which implements this component
implements render method. So in this render method
in the return statement, I have two sub components, which I was telling you about that this particular quiz can
be divided into sub components to sub components one is
the quizzes area. And another is the score area. So you can see here
one is the square area which will have
the correct answers and incorrect answers. And another is the quiz area. Now, if I go to let's say the
score area score area component, so if I go to let me show
you School radial component. This is the score area component
as I told you that this against core area
component can be divided into two sub components one is
for the correct answers and one is for
the incorrect answers. So you can see over here that there are two other
subcomponents total correct and total incorrect, right? So these are
the two sub components which are called in the score
area component at the top now if I show you the other one, which is the question area. So in the main one we have
the quiz area in the quiz area. I can have two sub components
one is the question and when is the answer list so you can see this is
my question and this is the complete answer list. So if I say this question
and if I click on lady, let's say wrong answer so it becomes
an incorrect answer right? So that is how you can divide
a react application or decompose a react
applications into components or sub components. So in this particular example,
let me repeat. Once again, very quickly that this particular application
divided into two main components that is the question
and the score area again, the score area is divided
into the correct answer and the incorrect answer
those can be considered as two sub components
of this core area component. And then this quiz area is divided into
the question-and-answer list. So you can see over here that this quiz area
is divided into portions of component and the answer
answered it subcomponent. So these are
the three important aspects and then we'll move forward to
the other react.js fundamental with starts with States. Okay, so till now we
talked about fundamentals of react.js wherein we talked about es5 in es6 refactoring
we talked about what are the advantages of react.js and we also talked about some
of the fundamentals like jsx components and props. So we talked
about these in detail that what are the various
types of components. It's we can create we can create
functional components and we can create class components
but going forward. Please remember that
es6 standard says that you have to create
class components only because now we are going
to talk about States. So what our Estates
in react.js so just like we have props we talked
about props in react.js, which is used for data
management in react.js. So in addition to props
react component have another way of holding the data
and which is called a state. So what is the state so components can change
so to keep track of the various changes or the updates happening in the component over the time
we use the concept of state. So in this example, as you can see, let's say there is a nice
State changes event has happened on this particular eyes and because of this change
of events State changes. So what is the state
or the event which is change over here. Let's say we have increased
the temperature and because of this increase in temperature
the ice has been Take to water. So what we can say is that the previous state
of this particular object while eyes and when some event
has happened on a component which is in this case is
increase in temperature. The final state
has become water. So for State we can say that unlike props component
States our new table because in props we talked about that react props
are immutable in nature, which means they talk
about pure functions or they talk about that. You cannot change the value
of the props inside a component but unlike props the component
States our new table. So as I mentioned that react components have
another way to hold the data and which is called
State now objects which control the components
rendering in Behavior. So it states are the one which handle or control
the components rendering and behavior and you
can say this is the core of any react component as you can see on the screen that component is Go to any tree and around it revolves
the props and the state but the important thing is that states should be kept simple as much as possible
because we know what our crops how can you compare
the props and state? So Props are the values which is passed in
by a component parent so you can see here that the props these are
the value power still by a competent parent. So this value is passed
to another component as a prop and the value is again passed to
another component as a problem. It's a state is
local mutable data that can be created and modified
within the component. This is the definition
of State you can say so state is local. It should be very simple
in nature and mutable data which can be created and
modified within the component. Now, what is the use
of having the local data or you can say local
state having local data that can change within
a component increases complexity and limits the composability
of the component. So when we talk about So
we had local data which flows from one component
to another component. But the problem with this is that it can change
within the component and can increase the complexity and also limits the
composability of any component. So when we talk about state
in react.js, please remember that to use state in react.js, you have to use
a class component. There will be no more function
components in our projects if you want to use a state
and in the class Constructor, since we are talking
about class components, so there will be a default
Constructor over there. We will initialize
the component state to a sensible default value. So just to repeat once again, what is the state state
is just another way of holding the data in react.js. Now, this is something very
important that components in react.js can be in two forms. You can create again
two types of component one is stateless component and another is it
stateful component now? What is the difference
between these two? Glass and stateful because we talked
about components components can be created by two ways. Now when I say
stateless stateless means it does not remember
anything it does. It does not keep
track of any state. And what is a stateful
it remembers everything it does. It keeps track
of every change on an event or any update in the event. Now, let's talk
about stateless and stateful. First of all,
what is a stateless? So as we talked about stateless means it does not remember
anything it does and stateful. Is it remembers everything
it does which means if there is any change
in the state, it keeps track of that particular thing
or particular change or particular update because of
an event now is stateless. It calculates the state
internal state of components. And what is the stateful
it is the core or heart of react.js you can say which stores the information about the components tattle
memory the stateless components. They never change. State but stateful components as I talked about
that they can change the state because there will
be initial State and there will be a final state so they can change the state's
the stateless components. They contains no knowledge
of the past. So for example, if there was initial state which you have set
using this dot State and you want to change or update that state
using this dot set state but stateless components, they don't contain any knowledge
of the past events only the current and possible future
State changes can be tracked and stateless components when we talk about stateful. They have knowledge of the past current and possible
future State changes values. So that's why they
are called stateful because they keep track of the previous state
also stateless components. You can say they provide
referential transparency that is for small inputs. It will produce the same output. So if you give
different different input small small input same inputs, you can get the same output
in stateful component it receives information
from the Toothless components if State changes required. So these are some
of the basic differences between a stateless
and a stateful component. Now, this is just again
a summary for this stateless and stateful react.js components. So as we talked about
what is a stateless so all function based components
can be considered as stateless react.js component, but here we are talking
about that when we are talking about state in detail
will talk about State and will see many examples. So we will talk about only
class based components and not the function
based components. So that's why we
are saying over here that function based components can be considered as
stateless react.js components. So is stateless
react.js component. So which means they are
pure JavaScript functions, so we don't need to have state over there in
a stateless react.js components, but as per the future Trend
and the latest Technologies, we are using stateful
react.js components which keep track of your previous state
your current state and probable the all
the Our state's so all class-based components
can be considered as a stateful react.js components and stateful reacts
J components inherits from a particular class
called real dot component. So estate also getting inherited
from parent to the child. So this was the brief
about the state and what are the different types of component based
on the state list component and the stateful component
in react.js before going to the demo. I will talk about something
called sex tape. So as we are saying that there are
stateful react.js components, what does it mean? So you have to set
your initial State and then you will set
the final state. So that is the you
can say current state and the future state so there is
a method called set State now, what does it do so you can set the initial state
by using this dot state, but if you want to set
this future state or you want to update the state
you have to use a method called this dot set State Now set
State method it merges the news. It with the old state. So for example, you are new state value is one
and the previous state value was 0 or may be false and true. The latest value will become
the combination of the new state with a Old State. So all the previous
state will remain unless it is overwritten. So if you are not overriding or
overwriting the previous state it will remain in the memory. So for example, consider a state object
with properties A and B having values, for example 1 into so a is equal
to 1 and B is equal to 2 respectively now
calling side state what will happen so
calling side state with the property be equal
to 3 and c equal to 4. So it will produce a new object where be will become 3
and C is equal to 4, but the previous value
of B was to so that is how the property of a remains unchanged
the property be in. This case is overwritten
by the new state and in this object of the State Property
seized newly added. So in addition to changing
the The component set State please. Remember set State method is
very important is also causes the component
to be rendered eventually and for performance reason
you can say set State calls a batch method
and there is no guarantee that the state
can change immediately. So by this we mean that there is a method
called set state by which we can set the final state of any react.js component
a class component. Now, let's move to some demo that how we can implement
this kind of functionality. So, let's see this. So this is your index dot HTML
a simple HTML file where I am calling a script called like button dot JS
by using the script tag and in this like
button dot JS script. I am using the class component
and the concept of state. So this is my first example
or you can suppose they know a very simple one
to let you understand that how we can work
with react.js State feature or you can say aspect because react things of
a component as a Eight machine and you can use this dot state
to hold the component state. So let's write this code. What I want to do is
that in react on the trailer. I am calling a component. Let's say called app now
I will go to app dot JS where I would be
writing this component. So this is
a function components. I don't want
any function component anymore. I'm just commenting it
and I have commented this and I'm also coming
think this now what I'm going to do is that I am going
to write a component with the name like say app
how I will write it. I will write class app. It will extends from a parent class called
react dot component. And Elders React component. You have to specify
a Constructor which will have the parameter s props. And in this Constructor,
you have to call Super. Which will return again
the props to the class instance and then you have to set
the initial State. This is very important that how you can set
the initial state by using this dot State. This is the initial state
which I am sitting over here. And this dot State and setting is let's say
for example light is my property and initial value is false and then you have
event for example this Dot and double-click. Is equal to M binding this event
to the class is taught and we'll click
dot bind to this. That's it. So we are set the initial State
and what you have done is that we have bind event handler
to this particular class. Now. We already know that every class component
will have a render method. So we will implement
the render method over here. Now in this render method, what I'm going to do is that I
will have a return statement. So before that I am just writing
at a variable called where text where I am checking the state. So this dot state DOT lie, I will check this using
a ternary operator. If it is true, then it will show me
like else it will show me that I have not liked it. That's it. I just created a variable and then I will have
a return statement. Now what I'm going to write
in this return statement, I am just writing
a simple jsx over here. Very simple. Jsx. I'm going to write a P tag. And just passing this text as
an attribute in the parentheses. I'm just writing Academy text. Now. What we are going to do is that we have method
handled click which we are going to Define now. So handle click
paste on an event. And in this event
what I'm saying is that I am going
to set the state now. So in this particular example, what we have seen is
that I have created a class component which extends
from react component. It should have this dot State
reason being I am setting the initial state it has
on click event you can say which is binded
to this particular class. Then there will be
a render method which is required
in this render method. They will be a return statement
and in this return statement. I am checking the on click
so on click event. I'm checking over here and what I will call I will call
this dot my event name. What is my event name
handle click now, although the click
of the let's say P tag what I want to call I want
to call this handle click. So in this handle click, what I'm going to do is
that I'm going to set the state because my initial state is
like the equal to false now. I want to set the final State
now final state is set by as I mentioned
this dot sex tape. Now let's define
the property over here. What was our property
the property name is light. And what I want to Define is
this dot state DOT like value, that's it. So what's going to happen is
that I have mentioned the not so it will automatically become
true because initial value like value is false. So this completes
my code over here. Let me repeat. Once again. I am using the create
react App application in this create
react App application. We can change maybe
the component name also. So this component name
needs to be called an index dot JS just save it. So what we are doing
over here is that in the reactant not render
and calling a component. This component is defined
in your app dot Js. Now in this app dot J's. What I'm doing is that this is the like button
now like button is a class-based component. You can see here
that it is defined as class. Now. Let's define this export
default like button. And this is used over
here in index dot J's like button, correct. Now what will happen that you have set the initial
State using distraught State equal to light falls
and in the handle click whenever that P tag on click event will be called this handle
click even will be called which will set the final state
of this particular P tag. So what we are saying is that my initial state is false
and whenever a button or any control will be clipped. I am changing it to true. So I am changing the state
of that particular control. Now, let's see the output
of this particular application. What I'm going to do is that I'm opening it
in the browser. Now you can see
that this is a static text and when I'm clicking
this particular button like it is saying me the message
that you like this just like we wrote over
here you like this so it is showing me the message
that you like this so that is how you
can set the initial State and final state of Any react component now
just to repeat once again that what we are saying is that
for setting the initial State you have to use this dot State
and for setting the final State you have to use
this dot set State method just as you can see on the screen. Okay. Now we are talking
about State here. Let me tell you that state is similar
to props but only thing is that it is mutable and fully
controlled by the component because what is happening that right now we are storing
our all the data in an array in a variable for example, but that is a good way to start
with react.js but later on if you want some more operations
or more frequent flow of data and react.js you
can think of a state so you can think
of a state as any data that should be saved and modified without necessarily
being added to a database so you can say state is a place
from where the data comes from and we should always try
to make our state as simple as possible and minimize the number
of State four components. So for example, if we have let's
say ten components that need data from the state. So we should create
one container component that will keep the state
for all of them. We should not
create ten components. We should create one component
as a parent component and then the other could be
the child components. Okay. Now, let's see more examples
based on the estate. So What I'm going to do is I
will create more State examples or estate demos to show you
the concept of state and detail. I'm going to create
a class component so class app which extends
from react dot component. I am using a create react app
data project Facebook project. You can say and in
the rear domed render. I have to call
this app component. So let's call first
this in index dot J's this particular component app. And then in AB dot JS, what I'm going to do is
that I'm going to create a class component
with the name app. So first thing first first, we have to create a Constructor which is passing the props
and then in Constructor what you are going to do. We are going to set
the super keyword. This is the first and most
important thing to do in the Constructor. And then what you are going
to do in the Constructor as I mentioned that the best place
to set your initial state in react.js is the Constructor. Okay, so I'm going
to write this Dot. State and setting
the initial State over here. Please. Remember that if you have to set
the initial State you have to do it with is dot state in this
what state you can Define n number of properties
any properties you want you can Define in this so
let's define over here. For example, two
properties one property. I have let's say
for example later. This is just a property. I can write a text for it. Let's say header from State any text you
can write this is just setting the initial State and then
I have one more property. Let's say for example content. This is my second property
in my initial State and any text I can write which I can write as
content from state. So what I have done is that I have set
the initial state with the two properties header and content this we
are creating a class component now every class component
you already know. It should Implement a method
which is called render and every render statement
should have a return statement. So I am saying render and then I'm saying
return in this return. What I'm going to do is that I am going to Define
my some custom you can say j6. So let's define in return. So for example, I have a div I want
to write a div in this day. I have H1 tag in this H1 tag. I redefined my one
property called header. And then again, I have a h2 tag
where I will Define another property called content. So let's save this file now
how you set the state now, even you can set
the state in jsx. So just like this if you want to set
the state in jsx, you have to place this curly
braces and what will be the state you want to become so it should become
this dot state. DOT value is better because header is a property
which we have already defined and here I want
to say this dot state. For example content
in the previous example, you might remember that I used this dot props
dot attribute name similarly in state also by using the state
we can use for setting the value or showing the value passing
the value to the component by using this dot state. So here I had two properties
header and content so I can use it
like this dot state DOT header and this dot state DOT content. So let us see the output
of this particular example for this example, what we can do is that here I am defining a div
and in this step. What I am doing is
that I am doing class component or you can say creating
a class component. And in this what we have done in
index dot JS that index dot JS. I have called this component. This is my component, which is a class
based component. Please remember that while using the state
always you have to create a class component. Just like we use props in this dot props dot
attribute name the same way. You can use State just
like this dot state DOT, you're attributing in this case. Your attribute name was
header and continue. Now, let's move
to another example where we can see that how you can use State
and props in one single example. It's not always the case
that you have to use only state. It's not necessary. You can use a state
and props together also, so we will create this example only or we can extend
this example only. So what we are going to do is that I have a return
statement over here. We are I am writing let's say
two more sub components. What I'm going to do is
that in this day. I have a day over here. I am going to Define
two more subcomponents. So my parent component
will be app and then I have two sub components. For example, it's a header
and the content. So instead of this H1 tag
and h2 tag, which I have created. What we can do but I'm saying is that when you create
a parent component, so parent component will remain
the same that is app. I can have some child
components also bear I can pass the attributes
or the values as props, which will Define
that you can use props and you can use at the same
time state in one example, so let's do that. So what I'm going to do is that I'm going to create
two sub you can say components. So let's say one name is
head of this is my one of the component and this is
the prop value the attribute which I can pass like this Dot. State DOT header and then
I can close this component. And another component I
can create is let's say component things will be content and I have a prop I
can pass it as a prop and then I can write here
this dot state DOT content. What is the change we
have done over here? What we have done is that we have created
a class component that will be the parent component in the trender method
in the return statement. It has to child components. So we have to Define
these child components now. So what we are going to do is Becky are going to Define
these two components now, so let's define these. So what I am going to write is
that I am going to write class. My component subcomponent
name is header again, it will be a class component. So it is going to extends
from react dot component. And the same component I
have to create for content. So this content component
needs to be defined. So I have two sub components. Now one sub component
is the header which is having the proper value
as this dot state DOT header and another Propel you as
distraught state DOT content. So let's define
this every component should Implement a method called
render in render there needs to be a return statement. Now in this return statement
just like we Define H1 tag. I'm going to Define this in
a day we have so I will say it Dave and then I will say
h 1 now in this H1. What I want to pass is although the value is coming
from a state but the value which I want to pass over
here is in the form of a prop. So what I want is that I will say this dot drops
dot the header props. What is the name of the prop? Its header header problem? Similarly, what we are going to do is that
in the content component again, we will have a render method. And then there will be
a return statement. In this return statement
what I want is that I want to define a h2 tag, let's take it in a container
that container is let's it if I want to take
it in a container. And in this H2,
I want to pass the props. So what is the name
of the probe attribute that is content prop. So what I will say
this dot props dot content Pro. Okay. So what we have done over here
is that in the previous example, if you remember
that what we did was that we didn't Define
two sub components. Okay, so in place of this, let me copy this somewhere and then can show you So
in place of this earlier what we did we didn't Define
the two sub components. What we defined was a container which was a div
and in this div, we had one H1 tag
in this H1 tag, what we were defining you are
directly using the estate value how we were using
state DOT header and then in h2 tag What we
were doing we were using. The content value so we were saying
this dot state DOT content. Now, let's see the output
of this particular example first what we have implemented
without using the props. So let's save this file and
let's go to the browser. So now what it is saying
that header from State and content from State. I have already done the npm start command for
this create react application. So you can see the output in localhost on the port
3000 header from State and content from State why
this output is coming because the header value
is header from State and content values
content from State. This was the direct way
without using the props. How we are use the props by
using the subcomponent concept? So let's implement
this subcomponent. Yeah. Now what we are doing is that we have defined
two sub components, which is header and content. These are the two sub components
plus base components and we have passed
the value as props. Now you can see this dot
state DOT header header value will come and let's say we
can write some updated value new header from State and new container
from state for example, and you can see
the value over here new header from State and new
container from State. This is the output basically
what we have done here is that I have showed
you both the ways of using the estate in react.js, which means that you
can use it without props and you can use it
with props also, so there are you
can say two ways of using state in react.js, but I will prefer
I will recommend that you can use
state with props and if whenever required or Never you can see apply
the props Just go with it. It's not always necessary that you have to implement
every time only with the state. You can very well use props and stay together
in the same application. Now just a few tips of using state in react.js just
a couple of tips from my side that do not modify the state
directly don't even try to modify the state directly. You always use
the set State method and the only place where you can assign this dot
state is the Constructor. These are the two main things. So what I am saying over here is that if you have
to specify this dot state where you can specify
this dot State you can specify this dot state
in the Constructor only. This is the first you can say
right way to use the state. Now. What is the other thing
that State updates may be asynchronous in nature? So react May batch multiple set State calls into
a single update for performance because this dot props as we use here this dot State
and here we Distraught props. So those drops and distraught state may be
updated sometimes asynchronously so you should not rely
on their value for calculating the next team. So if you want to set the value
of the next state don't rely on the value of this dot
props or is taut string and the third thing which I want to tell
you about state is that State updates are merged
then you call set state. So what happens is that react merges the object you
provide into the current state. So these are some of the tips you can say
from my sight for using State and react chairs. So let's come back to this PPT and let's talk
about another aspect of react.js which is life cycle. Now, what is life
cycle in reactions or what is the use
of adding lifecycle methods to a class component in react.js
react provides various methods which notifies when certain
stage of life cycle of birds called life cycle methods. So there are many methods
in react.js which notifies when any stage
of life cycle occurs. Now, what are the different
phases of that life cycle? So it start with initial phase
then it comes to updating phase and then props change phase
and finally the unmounting phase where you can free out
some of the resources. So what we are saying is that there are four phases
in which you can Define the life cycle of a particular
react.js application. So what happens is that it's very important
in the application with many components. Let's say there
are 10 components in a react.js application. It becomes very important to free up the resources
taken by the components when they are destroyed. So for example, a component is destroyed so it becomes very crucial
very important to free up the resources which are taken
by that component because once it is destroyed
so the resources which has it consumed
should get free so that Freddy can declare
some special methods over the component itself or you can say we can declare
some special methods on the component class
to run some code when a component mounts
or when a component - now so these methods
are basically called the life cycle methods Let me Give an example component
did Mount this is a lifecycle method example, it runs after
the component output has been rendered to the Dom. So let's talk about these different
different life cycle methods in detail now, so the first phase
in the life cycle of any react.js application
is the initial phase now, what are the different methods
available out here because in this phase component
is about to make its way towards the Dom it
has not yet reached the Dome. It was just creating its way or about to make its way
to the Dome space. You can see consists
of the following methods which are involved
in a predefined order. So the first method is get
default props get the initial. It component will Mount
render method we talked about and the component Edna. And as I mentioned that component did
mounted method runs after the component output
has been rendered to the term so different methods, they have their different you
can see usage in any life cycle of a react.js application. Now if I talk
about the second phase that is you can say the updating phase when it
phase comes into picture. So once the component
is added to the Dom because in the previous phase
that was the initial phase. So we what we said that we talked about
that the component is making its way or it's
on its way towards the Dom but now since it had reached
the Dom it is added to the Dom they can update
and re-render only when a state change occurs. So basically in
the updating phase once the component is added
to the Dome they can update and re-render only
when a state change occurs. So this phase consists
of the methods for example should component update
component will update render and Component 8 update. So please remember render is
a common method in almost all the phases or life cycle
of react.js application. So we have talked about here
the initial phase we have talked about the updating phase. So please remember that neither parent nor
the child components can know if a certain component
is stateful or stateless and they should not care whether it is defined as
a function or a class. But the most important thing is that when we are dealing
with State our components should be of a class type. It should not be
of a function type. So that is why you can say
state is often called as local or encapsulated. So it is not accessible to
any component other than the one that owns insects it a component may choose to pass as
straight down as props to its child components
just now we saw the example of the state and props now, let's talk about the third phase
that is props change phase. So we talked about
the initial phase. We talked about
the updating phase. Now what happens
that after the component? Been rendered into the Dome. So in the initial phase what it was doing it was making
its way towards the dome in the initial phase in the updating figured
it was doing that. It has been rendered on the Dome the component
has been rendered on the down. Now the third phase
is props change phase after the component
has been rendered into the Dome. The only other time
the component will update apart from the state change is
its props value changes. So, please remember that through estate we
can change the value or through props. Also, we can change
the value just like we saw that this dot props
dot attribute name, for example, this dot props
taught name just like that. We can say that this dot
state DOT attribute value just like we saw
in the previous example. So what we are saying
over here is that this dot drops
dot attribute name can change can make
the changes in the component and to start State can also make
the changes in the component. Now, what are
the various methods which get invoked
in this particular phase? In a predefined order component
will receive props should component update
component will update and component data update of course render is
a common method in every phase of the lifecycle of a react application
last phase in the life cycle of a react application
is the unmounting phase. This is the last phase of the component life cycle in
which the component is destroyed and removed from the Dome. This is called unmounting. So we were talking
about the mounting and unmounting mounting means when the component
is added to the Dome and unmounting means when the component is removed
completely from the Dome and this weighs only consist of one method no render method
over here the only method which is there
in the unmounting phase of react.js application is
component will unmount No, let's see how the life cycle
goes in a react.js application. So we talked about
the initial phase. We talked about
the updating phase. We talked about the props
change phase and then we talked about the unmounting phase. So these are some of the methods
which are mentioned over here. So it started
with the initial phase where we had the method
called get default props. Then get initial state will be called component
will Mount will be called and then render will be called and then component it
amount will be called as I mentioned that all these methods
always called are called in a predefined order. So please remember that if you write a method,
let's say for example, get default props
and component will Mount so you should understand that in which order
it will be called. So first of all get
default props will be called and then component will Mount
will be called now, you can see on the screen that
once this initial phase is done what we have the other phase that the props can change
the state phase and then we have the update phase. We are different methods. Would be called. So what are
the different methods that component will receive prop should component update
component will update render and component data update. So these are the different
methods in the update phase. Now if I talk
about the last phase which is the unmounting phase
so what happens that the ad Dom dot unmount we call the component
will unmount method for the unmounting phase for completely removing
the component from the Dom that is the last phase
or there is one method which is called over there, which is the
component will unmount. Once the component is completely
unmounted or destroyed from the dorm again, the life cycle start
from react dom-jot render. And again, the get default props
methods is called so that is how this complete life cycle
again goes on and on now. This is the description of these lifecycle methods
which we talked about. So so we talked about component will Mount component
it Mountain so on. So what happens
with component will mount it that it is fired once before. Initial rendering offers and it is a very good place to
wire up your message listeners. Please remember that this dot set state does
not work here the other method in the life cycle is
component did Mount it is again only fire once
in any react.js application after initial rendering occurs. It can use this dot
get Dom node. So what is happening
over here is that component will Mount
will always be called before the rendering occurs
and component did Mount is fired after the initial
rendering of birds. So there is you can see
various my new difference between component will Mount and component did Mount
will means uncertainty. So it is going to render or the initial
rendering has started but it has not been yet
rendered on the term and component did Mount
means it has rendered on the browser or on the term. It will be fired. Once the initial rendering
on the Dome Pockets. The third method is component
will update it is fired after the Updates
are made to the town. You can use this dot gag Dom
node for updates over here. The other method is
component did update now what happens with this method is that it involved immediately after the component updates
are flushed to the Dom. So any change any update
is there in the component? It gets flushed to the dog, then you can call
component dead update and this method is not called
for the initial rendering. Please remember this
is very important that for initial rendering of the react.js component
component did update method is not used you can use
this as an opportunity to operate on the Dom when the component
has been updated. So for example, it has been updated using
the props or using the state then only you can use component
adaptive component will unmount. We already talked about this that this is a single method which is called
in the unmounting phase of the lifecycle
of a react.js application. It is fired immediately before a component
is unmounted from the Dom and it's a very good place
to remove message list. So you can see General cleanup
or Garbage Collection kind of activities you can do
in component unmount method. Another is component
will receive props. It is fired when a component is receiving
the new props you might want to use this dot set State
depending on the props just like we saw that we can use
both props and state in a single application. The other is that should
component update now, this is pretty interesting that this is fired
before rendering when new props are stata received. It will return false if you know an update
is not needed so you can check on any
of the component based on the state and the props
that if any update is required or not and accordingly, you can return false and true based on this method which is
should component update. Now. This is very much
interesting Constructor. We talked about the instructor that whenever we are using
the class component in react.js you have to use the Constructor
you have to pass the props and then you have
to use a super keyword. This Constructor in props that if you don't initialize
the state and you don't bind the methods, you don't need to
implement a Constructor for your react component and ultimately we already talked
about this will be converted into function based company. But here we are
talking about state. So our focus is
for class components. Please remember if you
are not finding anything in your component. If you are not using any state, then you don't need
a Constructor in your class. The Constructor for
a react component is called before it is mounted when
implementing the Constructor for a react component subclass. You should call
the super keyword before any other statement because if you will not call
the super what will happen that this dot props will become
undefined in the Constructor which can lead to errors or exceptions of bugs
in your application. So that is why it is said that the super keyword
should be called before any statement
in your react JS application. So first you have
to call the Constructor and then you have to call
the super keyword. So that this dot props
should not become undefined. So what we are saying is that typically in react as B3 a component you can say
Constructors are only used for two purposes
specifically it is used for you can say
initializing the local state or you can say initializing
the initial state by assigning an object
to this dot State and then what we are saying is
that for binding the various events or binding
the event handler methods to an instance of the class. You need the Constructor
will remember these are the two basic purpose
of using Constructor. So if you want to set
the initial state that will be done
in the Constructor. If you want to you can say
bind even handle methods of the class instance that will be done
in the Constructor of the class. Now, this is just you
can say pictorial representation of the different phases. Now if I talk about the life cycle of any
react application it revolves around the three important
phases mounting updating and unmounting So what we are saying that first you add
the component to the Dom you do some changes or updates and then
finally you and mount it. So what are
the different methods which are shown on the screen? You can see that what are
the different methods? We generally use while mounting
updating and unmounting. So in the mounting we
place the Constructor we can call the method called
component it Mount and then when it comes to updating phase
we can use three different types of methods new props for
get derived state from props or should component update we
can use this dot set State and we can use
this dot force update and a different methods which we can use in the up
dating phases component did update and finally
in the unmounting phase. There is only one method
which we can use which is component will unknown. So this is just
a representation. You can say summarized
way of representation of the life cycle
of a react component. So we talked about
till here jsx. We talked about
components props States. Life cycle now another important
aspect you can say very important fundamental
of react.js is events. So what are events events are the you can say triggered
reactions to specific actions. So for example,
we can have on click event. We can have Mouse click we
can have mouse-over key, press all these are called
events in reactions. So for example,
there is an action. So some action happened
on the react component and then we have
a react application which is called event. Now some event has happened
on the react component and it becomes a reaction. So that is the
definition of events. Now first we talk about that how the concept of even work in other you eyes as
compared to react.js and then we will talk
about the Tau events work in reactives. Let's say I have
a control let's say three controls on many
controls button type of control. Now what happens that in other you eyes on every control you have
to implement an event listener and Corresponding event handler
this is very much required which decreases the performance
of the application on the town because what is happening
over here is that for different controls? Just like shown over here that you have a different
controls different buttons or maybe another controls. You have to implement
the event listener on every control and when an event listener is implemented a corresponding
event handler will be required. So that is how the different UI is
or other you is work when it comes to events. Now, let's talk
about events in react how react manages
events in react. So what happens is that if you have different
controls and you will have only one event listener and one event handler
attached to it. So which increases
ultimately the performance of react.js application, please remember that
react events are named using camel casing
rather than lower case. So you have to Define events, or you can handle the events
with camel case only. The GSX you can pass a function and the event handler
rather than a string. So we will see that in the demo. So before moving to refs now, the other fundamental
of react.js, let's see some of the demo of handling
events in react.js. So for that I am going
to show you example, we have talked about State we
have talked about props and jsx and all that stuff. So this is just you
can say playground which I generally used
to work with react.js which is coat and tie. Oh, so in this
particular example, what I have done is that I am using
a conditional rendering based on my click or you
can say based on my event. So we'll start from
react dom-jot render. So this is the reactant render, which is calling
a parent component, which is log in control. Now if I go to login control, which is a component now
in the login controlled, it is a class-based component, which is extending
from react component. Now every class component if it is binding something
or setting the state, it should have a Constructor. It should have a super keyword so that this dot prop
should not become undefined now here you can see that I have defined
two event handlers for binding in the Constructor of the class
one is handle login click and handle log out click and binding it over there
and setting the initial state that is logged in is false. So initial state
is is logged in is false that the user is
not logged in as of now that is why you can see that it is saying in the output
at please sign up and showing in the button of login. What is happening
in handle login? Click and handle log out
click will see later first. We will see the render
render method implementation in the render method I
have declared a constant is logged in equal to this dot state DOT
is locked it now, what will be the value in this
because it is initially set to true you can see
here initially set to it is false and then in the events, what I'm doing is
I'm setting it true or false. So first of all,
it will take the initial value. I am taking a leg button
and if is logged in if it is true, then this button will be called where I'm calling a component
called logout button and if it is false, then I'm calling
another component which is again login button. If it is true then
log out button if it is false. It is login button. Now you see over here
on click this is called event in react years on click is a event
this event listener is bounded to event handler. So this is binded
to an event handler which is The log out click and this is on click event
is binded to event handler which is called
handle login click. So we'll see what is happening in handle login click
and handle log out. Click in handle login click. We are setting the state and we are setting it to true
and in the handle log out again. The user will be logged out. So we are saying
that is logged in is false. So let's see the implementation. So what is happening
that if I click on login? It is showing me the message. Welcome back. You can see on the screen. So function user greeting
is called welcome back. And when I'm clicking
on the button again log out it is saying me please sign
in you can see over here. Please sign up. So what is happening? Is that in the log
in button and log out button. So I have to function components login button
and log out button. So what I am doing is that I am again
calling the event that is on click equal
to prop Stoughton click and in the greeting method. What I am checking is that if it is logged
in then it will return another component user creating which is again
a function component and then if it is logged out, then it will
suggest creating again, which is a function component. So that is how you can use
events in react.js. Now, let's see another example
of using events in react.js. So what you can do is that you have to start
from react Dom daughter end up in the react download render
what we are doing that we are calling component
which is toggle. So this will be My parent
component now in this toggle. What I am doing is that I
am writing the Constructor that is very much required
for a class component because I am setting the state
then there is a super keyword in the distraught State. I am defining a property
is locked down through so is toggle on is toggle
on property is always true and I'm binding event
this dot handle click. So this dot handle click dot
bind to this particular class. And in this handle click event. What I'm doing is because I have used
a button on the button. I am calling in even
now what is the event on click on click event? What I'm doing this dot handle
click and in this what I'm saying is
there's this dot state but is toggle on what will be
the text of the button. So when I will click
if it is true it will be on if it is false. The text will be off. So let's see the output if I click on this button text
becomes off by again. Click on it the text becomes on. So this is just a text
of the particular button, which we are changing
based on the state. So this dot state DOT struggle
on so what we have done is that we have set
the initial State. First of all initial
state is true. So whenever it will be
true distraught state DOT a standalone whenever it will be through the text shown is
on a once I click on it. Now the distraught state DOT
test of alone becomes false and whenever it becomes false, the text is shown is of so that is how we can work with
the basic all the fundamentals. We can apply in one application. It's not like that in react.js that you have to come up
with only jsx base application or component base application. It's not like that all the react fundamentals
which we talked about over here should be used
every time in combination then only you can learn
react.js in detail. So what I'm saying is that you can apply
jsx components props State and then life. The methods and some kind
of events for example on click events just be so all
these things you can combine in one react application. So let's see more
examples of events. So what I'm doing here is let
me remove everything from here. Okay, so let's create
a parent component app for a very simple example
of the events. So what I am writing over here
is that class app extends? We are taught
component have to define a Constructor The Constructor. I have to Define props. I have to use the super keyword so that this dot props
does not become undefined. So what I want to do is that I want to set
the initial state with this dot State and then I want to use I can use
here this dot update State also update state
will be my Handler. And I can Define
the update state. So what I'm doing,
is that this Dot. Update State DOT bind and I want to bind this
to this particular class. Let's remove all this. Okay, so let me copy this particular toggle
example from here. do what I want to do is So in
this particular index dot J's, let me Define this toggle. So what we have done is that we have defined the same
component toggle over here. And in this struggle, what we have done is that we
have implemented a Constructor as I told you. Okay, and then in the
Constructor what we have done that we have binded at the event and initial value
of the toggle is true. And then the final value on the click of the you
can say button. I am setting the state
as this dot set state where I am changing. The value called is toggle on
from True to false. Now. Let's talk about child events. What is the concept
of child even in react.js. So when we need
to update the state of the parent component
from its child, so generally what we
have learned till here is that you can update the child
even from the Perry, but there could be
some situations when you need to update the state of the parent component from
below that is from the child so we can create
an event handler. For example, it's a update state
in the parent component and you can pass it as a prop. The child component
where we can just call it. So let's do that. So what I'm going to do
is let's index dot J's. Go back to index dot JS and
let's define a component with the name called app. And in the app dot JS. What I am going to do is that I am going to define
a class component with the name app, which extends
from react component. So this is my class component, which I have defined
now in this I have to define the Constructor. But the props and
in this Constructor, I have to define
the super keyword. So that just drops
should become undefined. Now in this super we have
to let's say defined, for example, I have
to Define initial state. So what I'm going to do is that I'm going to say
this dot state is equal to So I have to define a property property
could be lets say data and I have to Define
some data over here. Let's say I see it
to initial data. This is my initial data. So my Constructor is done. Now I can write here. Let's say for example
and of class, this is just
my end of Constructor. So that you can understand well. Now, let's bind the method
to this Constructor. You want to bind method you have to bind it
inside the Constructor, please remember so let's say
I want to call update State. This is just a method name. You can use any one
of your choice any name. This dot update State
how you bind it you bind it using
the keyword find and this so by this statement
what you say because you have to Define this
inside the Constructor by this you are finding a method which is called update State and we are defining
now the update State. This is a method. We are defining and in
this update State what we can do we can set
the state now what state you have to set your going to set
the value of let's say data because that is
the property of the fine. And let's see
what we want to do. Is that data for example updated
from the child component something like that
could be of any text. No problem at all. So this is the end
of the update statement phid now you have to implement
always render method. Now once you have implemented
a render method, it should have
a return statement. So we are using
a return statement over here. So this is my end of render. Method and this is let's say
and of return statement, okay. Now in this return
what I want to do is that let's say
create a container. So my container is tip
and in this particular thing. What I want to do is I want
to define a subcomponent because in this particular demo
what I am going to show you that how you can
update the state of the parent component
from a child component. So I need to have
a child component over here. So I'm going to define
a child component which is let's say
name is content and I am just taking
a prop value over here with attribute my data prop and I'm saying value of the initial value of
the estate is distraught State. My attribute name is data. And then what I'm seeing is another prop I
am using is update. This is the another prop
you can use multiple crops multiple attributes and I am saying is
this dot update state? So what I have done is that I want to update the state
of the parent component. My parent component
in this case is app and I want to update the state
from a child component, which is the content. So this class. Is over here and then I want to define
a subcomponent a child component because we have
not defined it yet. So I will write class content my component name child
component name is content. So I have to Define over here. So I'm saying class content
exchange react component. And what I am going
to Define here is implement the render method in
this render method I will have how to turn statement that's it Now
in this return statement what I want is let's say
I have a container but then again and for example, let's say I want to add a button
and button will have let's say on click event and on
the on click event. I want to call the props. So what is the props attribute? I want to call this dot top start the update State
prop update State prop. I want to call this button
is closed and let's say the name of the button is as of now. Give it click now
one more HTML tag. Let's add one more HTML tag to
use the another prop attribute and that is this Dot Props dot
my data from that 's it. Let me tell you that what we have done
in this that in react.js when we need to update the state of the parent component
from the child component. So here you can see
on the screen that I have created here two components one is
the parent component which is the app component and another is
the child company. Now, what happens is
that what you can do is that you can update the state of a parent component
from its child. Generally what happens
in a general scenario that a parent component updates
the state of a child component, but in this particular example
what I'm going to show you that how you can update
the state of a parent component from a child company. So what I have done is that I have created
event handler update state in the parent component. You can see that this
particular event handler. This is created
in the parent component. But it is passed as a prop
to the child component. You can see over here. This particular event handler
is passed as a prop to the child component. So let's see the output of this. I am saving this
and just clicking and when I clicked it
the pattern was there in my child component you can see the state
has been changed and it is saying that the data has been updated
from the child component. You can see over
here which means that the event handler which we
created in the parent component can be passed as a prop. So one good learning
from this particular example, we can get
that the event handler which you are creating
can also be passed as a prop and that prop can be used
in another sub component or Child Company. Now another thing which I want to tell you that
how you can prevent component from rendering for example, there could be cases where you don't want to render
a component or you don't want to hide a component all
You got a rare cases, but in rare cases, you might want to component
to hide itself, even though it was rendered
by some other component. So for that what we
do generally is that we return null instead
of its rendered output. That is the only trick by which we can prevent a component
to render on the dorm that you can return null
instead of its rendered output. Now, what we will do is that we can see
the component events that how events are
created in components. So this I have already
shown you the let's go back to the slide now and let's talk about some other fundamentals so refs now we
will talk about reps. What is a ref in react.js. So resistance for references, you can say ref provide
a way to access Dom nodes or react elements created
in the render method. This is the definition of reps. So what I'm saying, is
that resistance for references. And they are used
to return the references to a particular element or you can say component
returned by the render. So if I have a react element
having a render method, I have to place some reference
in my component. So by using the ref' keyword, I can place a reference
to that particular component in react.js. So what happens that in the typical react
dataflow props are the only way that parent component interact
with their children. So what we have seen is
that in react.js probably if you want to pass the data
or you want to flow the data from parent to the child props
are the only way Good morning, fire child you re render
it with new props. However, there are few cases where you need to you
can say imperatively modify a child outside
of the typical data flow. So the child to be modified
could be an instance of the react component
or it could be a Dom element. So for both these cases react
provides an escape hatch you can see and
which are called Rex. Now the important thing is
that when to use refs, so there are particular cases
you can say few good use cases for using reps. Those are you
can manage the focus. You can manage
the text selection or you want to apply
a media playback there. You can apply the rest you can
apply the Rifts in application. We are you triggering
imperative animations or you are integrating
with third-party down libraries. Probably there you
can use very well reps. So important thing is that avoid using Reps
for anything that can be done. Declaratively now how you create the Reps reps are created using
react dot create ref method and they are attached
to a react element via the ref attribute. So ref is a attribute reps
are commonly assigned to an instance property
when a component is constructed so they can be referenced
throughout the component to this is very much important
about reactor app. Now if I show you
that how you can use the refs. So let me go back to the same example now refuse
to return a reference to the element this we
have already know now, what are the reactor ads although I will recommend
that rep should be avoided in most of the cases. However, they can be useful
when we need Dome measurements or to add methods
to the components. So we will see now that how you can use
reps in this example. I'm going to show you that how you can use reps
to clear the input field. Okay. So let's remove everything. We have a Constructor props
just start state. Let's remove this method. Let's remove this render
mode this class. Okay, so we are using
the same app component. What we are going to do is
that we have a Constructor with the props keyword and
the super keyword with props. We have the initial State called
the start State having let's say for example some blank
data in this case and then you have
distraught update State equal to this dot update state
DOT Pine and let's have one more you can say
Handler event handler which says this dot
clear input equal to this dot clear
input dot by this. This Constructor is
closed over here, which we save this file. And then I am going to Define this update State update State
event handler we have to Define. So I'm writing here update
State let pass argument to it. And then I'm setting the state
as so this dot set State. What is the value of the property value
of the property? I have to Define over here. Okay, the value
of the property is data. And in this data, what I'm doing is
data value should be e dot Target dot value. So we have defined
the update State also that whatever value will be the input will become
the set State value. Now, we have to
Define another method that another method
is clear input. So let's copy
and paste over here. I have to define the clear
input method now in this what I am saying is this dot
again I have to set the state. So I'm sitting the state
same value I have to use and that is data. So I am making it again Plank and after that I
am finding the Dom so how you can find the doorman
react.js is react Dom Dot. You have a method or you can say function
called find Dom node. So I want to find the term node. And how can I find the Dom node? I can find it using ref. So what I'm saying
is this dot refs and just taking an input value. That is my input text box, which I am going to Define
in the render method. What I will do that I will use
the focus method for this. This is my clear input function. And finally we have the render
method Implement for the class. And in the center method
you have to apply the return statement
the return statement. We are going to write
some HTML or chase X. So I'm creating first of all the container
my container is stiff. And taking input
type value equal to this dot state DOT Theta so that would be
the blank value initial value the start state DOT data. I am taking an event
over here on change. So whenever there
will be a change in the text box this method
or this event will be called and in this I am calling
this dot update State and I'm also defining the ref
which is very important ref is which I
have defined here my input. So on my input
the ref will work. So this input is defined. So this text box is defined and now I will have
a button control. We're on click even
needs to be defined. So I am defining the
on click event. The name of the button is clear. So one click what I want to do is that I want
to call binded method which is this dot clear input
and after that simply, I want to place a H4 tag
in this H4 tag. I will show the final
State value by using this dot final value. How can I show
that this dot state DOT data? So this completes
my explanation of the rafts where what we have done is that we have created
a component called half in this particular component. What we are doing is that we are setting the initial
state with a blank value and I have called
to event handlers you can say
this dot update State and this dot clear input now in the update State I
am setting the value what is taken as an input
from the user in a you can set text box. And then in the clear input, what I'm doing is that whenever
this clear input will be called and setting again
the value to be planned. But in this case, what I am doing is
that I am making a focus by using the graph on
that particular Xbox controller. You can say input control now in the return statement
in the render method. I have taken a text box
or you can say input control which is have some value then
there will be a button. So let's see the output
of this particular application. So if I write let's say we pull
and I click on clear you can see it has Completely
cleared from here. So that is how you
can use ref in react.js. Okay. Now we'll talk about example or you can say a demo
a project where the concept which we have studied till now
our let me repeat one thing jsx. We talked about components props State
lifecycle events and wraps. So out of this 8 important
fundamentals of react.js. We have already talked about
the seven important aspects, but before moving
to the last react.js fundamental that is keys that how you can use
keys in react.js. Let me walk you
through a very good example, or you can say a small project. So the project requirements
starts with this particular you can say example. So in this example, what you can see is that you have to implement
a search functionality where users can search
from this particular text box and What they are
going to search it. It will be visible on the screen
with that search result or that search keyword. Now, what should be the approach
of yours to implement this kind of react JS application. Now, what is the Step
1 my recommendation is that you break the UI into different components or you
can say component hierarchy when I say component hierarchy. What does it mean
that you break the complete UI because we have
Jesus is all about you. I so you break the complete hierarchy into
components component hierarchy, which means that there will be
a parent component there could be child or sub components and there could be
Sub sub components. So first thing first, what you want to do
that you will want to do is to draw boxes
around every component. So in this particular example, what I have done is that I have created
different colored boxes around every component and subcomponent and I
have given them some names also, but the Of them. Is that how do you know
what should be its own company? Okay. So by coloring
this particular example, we can see that there are five components
in this very simple application. It's a very simple application where there could
be five components. So one component you
can see this outer boundary of orange color. So let's say I call this
as filterable product table which contains the entirety of the example now
there is a search bar. This could be
my second component in the blue color
the blue boundary you can see it receives the user input
now there is a product table. You can see the Green Boundary. This is my third component. This is called I'd say
the product table which displays and filters
the data collection based on user input. Now another is
product category row, you can see here the cyan color
sporting goods and electronics. This is my
product category though, which displays a heading
for the each category. This is my Component and the final component
is the product rule which is in the red color which displays a row
for each product. So now we have identified the components in
this particular example. Now if I want to arrange
them into hierarchy because components that appear
within the another component should appear as a child
in this particular hierarchy. So what should be
my hierarchy the hierarchy to break this component. The particular UI is at the top. I will have
a filterable product table. Then there will be
two subcomponents search bar and the product table
and in the product table. I have product category though
and the product rule so that is how we can build
any react.js application. Now, let's build a static
version of this Envy art. Okay by creating you can say or
different different components. So just want to add one thing that if you want to make
your you are very much interactive you
need to able to trigger. In just your underlying data
model and we are going to use it because this particular
application can be made easy with the help of State. What is our state? The search takes the user
has entered this is the state and the value of this check box because I have added
a checkbooks also over here. So let's create this particular
example in react.js application. So before creating this, I have a sample data
you can say a mock data which can be used
for this particular example. So, let's start creating this particular
application in react.js. So I'm just removing all
this stuff from here. Let's create this example
and see how it works by using in react.js. Select can close this and I'm going to open
a new instance. So I'm going to open it
in Visual Studio code. or else what we can do is you
can try this example over here. Okay. So what we are going
to do is now that we are going to see
that search example in this particular demo. So in this particular example,
we talked about that. We will divide the complete UI or complete example
into five different components. So let's write those components in the create
react App application. So for that I have a dummy data
in this dummy data, what I'm going to do is first I have to create
a class component. The outermost at is
the orange one. For example, it's
a filterable product with the name filterable product and I'm writing
exchange react dot company. So this will be
by parent component out of the five components. This will be my parent company. So I'm just writing the concept
of for this class. remember all the initial state
and binding of the methods needs to be done always
in the Constructor only. So once this is done, I am initializing
or setting the initial state by using this dot State you
can always use the start State and can apply the properties. So what are the properties
I want to use to property which I want to
use is for example, it's a filter text. Initial value, let's say blank
and another property which I want to use is
in stock only I want to check whether the products
are there in the stock or not initial value. Let's say false. Now, what are
the different methods which I want to bind methods which I want to bind
is for example, let's say this dot handle
filter takes change. This is just a you
can see name of the event. I have to bind it to the class. So I will say this dot handle
filtered exchange dot into this. And after that what I
will say this dot handle another event handler I want to
bind to this particular class. Please remember all
this needs to be done inside the Constructor
only don't want handle filtered exchange. I want this time
handle stock change and I want to bind it. That's it. So we have
defined a Constructor. We have defined two or you can say we
have minded to methods now. It's time to Define them. So first one is handle
filter to exchange and another is handle
in stock change. These are the two methods
which we are going to Define now and after that once these
are defined the final thing is that you have to implement
a render method for this particular class. So first set the final state
in this so This Dot. Set State and there
will be this dot set state. So in the handle
filter to exchange, so whenever there
will be an exchange. I want to set the final state. So handle filter to exchange. I am going to pass text property and then I am going
to set the state. So with which value I
will say that filter text. Will be whatever be
the value of the fittest. Now the second method which I want to bind
is enderlin stop change. So I will have
another property for it that is in stock only
and in the distraught set state but I want to do is I want to set the final value
of this particular property, which is in stock only so I will say in stock only the property will be
whatever be passed to it. That's it. So I am done with finding the events in the Constructor
setting the initial State and setting the final state
in the to event handlers. Now. The final thing is
to implement the render method. So in the render method,
I will have return statement. So let's close this return. And in this return. What I'm going to do is that I'm going to Define first of all the container let's say
I've defined a container now the important thing
in this container. What I am going to do is as I mentioned that I have
total five components in this particular search example, I have five components
to be defined and this is the first component
on which I am working. So what will be the other sub
components other sub components? Let's say is the search bar and another component
would be the product table so you can see on the image that there is a blue boundary
for the search bar component and there is a Green Boundary
for the product component. So let's create those
or call those components. So search bar and saying that filter text
what will be my future text. It will be this dot
state DOT filter text. No, I can Define more you
can say Properties or the values which are available
in the initial State. What are those values which are available
in the initial State? I have let's say in stock only I can Define
the instruct only over here. What I will say I
will say this dot state. . In stock only and then
on filter text change. What I can do is
that I can called my hand. Look. What is my Handler. My Handler is is
dot handle filter to exchange and on on install change. I can again call a Handler
which is this dot handle. Constructing change so that is how you can define
a search bar component. So this is one of the component which is defined or you
can say the sub component which is defined over here. The another component which I want to Define
is product table. So another component which I want to Define
is product table now why product table if you see
in this particular example, this green one is
the product table component and the blue one is
the search component. So what we have done
is let me repeat. Once again that I have divided
this complete application just complete project
into five components. So the first component
is the first one that is filterable product table. The second one is
the search bar. And another one is
the product table. So we are as of now just calling the product table
components of component. So let me Define
some properties for it. For example, let's say products
what will be my products so I will say this dot props, which I'm going to Define
this dot props dot products. So to Define much note values
for it one is products. So another let's say
I want to Define. What is the filter text in this case protects
will be against him. This will be this dot
state DOT filter text and then I want to Define one
more property for this component that is in stock only what will be the value of this
in stock only the value of this instability will be
distraught state DOT in stock only so that is how we have defined
our another sub component which is product evening. Now as you can see how we are modularizing
this particular code. So first of all, we are calling
this filter product table in this filter product table. This is the main component. We are calling to sub components which is search bar
and the product table. So this is the main
component and let's define the main calling that is Tom render and this
in this reactant daughter in the what we are going
to say you're going to say that we are calling
the parent component. What is the name
of my parent component? It's filterable product table. I'm going to call it and I
am going to call it on a prop. What is my prop now prop is
the values the Json data, which I have already
defined my crop value will be equal to products. So I will say react dom-jot
render properly products equal to products. So just have
to close this first. And in fact,
I can close it with closing tag, and then I will say
document dot get element by ID the ID which I
have to Define where I want to render my output. That's it. So we have called
the parent component by using react out in the here. We are passing
the props as products, which is my sample Json data. This is the sample Json data
the category of the product the name of the product
and what is its price. So filterable product table
is the first component which we have created which is our base component
or you can say parent component. Now the other components which we are going
to create is the search bar, which is the sub component
and the product table component. So let's start creating
those components as well. So what we are going
to say is class name of the component is search bar. So the name of the component
is search bar which extends from the app dot component. But this is my another component
and one more component, which I will have which is again a sub
components you can see which we have created
is a product table so we can just write here
class product table extends from we are taught component. So you can see we have also
created these two sub components which is the search bar
and the product table now, let's focus on the search bar that how we
are going to implement the search bar component. So in the search bar component
the same thing we are going to first write the Constructor
and in this Constructor. I'm going to define the props. Once this is done. I'm going to call
the super keyword which will have again props. This we have done now
multiple times and if you want to bind some events
over here in the search bar, then you can bind
it over here itself. So what I am saying, let's say I want to bind couple
of events over here. So I will say handle
filter text change handle filter to exchange. So let's say this Dot and the filter text change
dot bind to this and I want to have
one more event handler which is handle in stock. I want to check whether their it's
in stock or not. So I will say this dot handle
in stock dot bind and this that is how I
have defined the Constructor. Once I Define the Constructor, I have to write a definition
of these events, which I have written. So first of all handle filter to exchange this is
the handle filter text chain, and another one is I want
to have handle in stock change. So, let's write
handle install change. Now in the handle filter texting
what I want is this dot because I have the props so on treat exchange I
want to pass the value which is written by
the user in the text box. So e dot Target dot value. This is the value
which is written by the user in the search and in
the handle in stock change what I will say that this dot drops
dot on in stock change. What I'm going to write is
that he dot Target that we will check
that checkbox is checked or not. Now once this is done we will implement the render method
for this particular component. So I will say render and then I will have
a return statement which will allow me to write the
jsx for this particular class. So let's say I use
a form element of HTML and then I want to implement
a textbox kind of functionality. So for implementing
this Xbox kind of functionality. I am using input input type type
will be equal to text. Please holder placeholder
for this input. Let's equal to search
just a custom text. You can see now
what will be the value. This is something very important
that what value we want. So this dot props. What is the text
which user has written? They start filter takes
and what I want as an event. I want an event on change
whenever the value will change what I want to call. So I want to call this dot
handle it at exchange. That's it. So my input is defined. I want to Let's Take A P tag,
for example in this P tag. What I'm going to do is again,
I am to take input type. Now this time it will be
of type checkbox' because in this example, you see I have a requirement
of implementing a text box and then I want
to implement a checkbox. Okay, so I will say that this is of type checkbox
checked I will check whether it is checked or not. So I will say check Equal to this dot drops
dot in stock only whether it is in stock or not and on change there will be
a change event on change. I want to call this taught
until in stock change. So that's it. And once this is done,
I want to let's say for example, give some space and I
want to write some text that only show
products in stock. Just after the check box just like in this example
in this particular example, you can see in the requirement that I want to show
some static text that only show
products in the stop. So I have written only
show products in the stock. So that is how it completes
the search bar component. So we have written
the two components as of now and now I am going to write
the product table component. Now this component is
again, very important because in this component
we are going to Define two, Subcomponents mode so this is our third component, which I'm going to write
and after that in this particular component
am going to call to small small sub components. So let me Define
those components very quickly what will happen
you will understand what we are doing. So what I am doing is that I will Define
a very small components, for example, it's
a product category throat. So I will say product
category row exchange from react dot component. This will be
my one sub component for this product table component and another would be
class product rule. This will be again
component extends from react dot component. That's it. So we have to Define
these three components and our example or just complete project thgs
application will be over. So what I'm going to do
is first I will Define this product table. So the render method which is an implementation
of the class. And in this render method, what I'm going to do is that I
will say Define some constants. So what is the filter text
Twitter text is this dot props dot protects and I'm going to define the
stock value within stock only which will be this dot
props dot stop only once this is done. I am going to Define
an array of the rows. So area of the rows for example, every defined with cons
Rose equal to an array have defined an array and
let's say one Define. Last category so that I have the Tau many
categories are there. Let's define it in a lot of now. Now what I am saying that
this sort props dot products because products and
passing it as a prop and it is can say Json array so
I can apply for each over here what I'm saying for each because on array you
can apply the for each. So in this case, I'm applying the for each
and I'm on which quantity I want to apply the foreach. I want to apply on a variable. Let's say for example product
and want to apply a 0 function. That's it. And I will write
some conditions over here that index of filter takes
whether it's in stock or not. And so on I will write some
of the values over here. I will create a structure. And before that. What I can do is that I can Define
this product category rule. So let's define
this product category though. So I'm saying render now
in this render method and defining a constant that is category is equal
to this dot drops dot category and there will be
a return statement for this now in this return statement and just using a TR structure for example in this TR
am defining a header with a th and let's say some call span by can give
some calls pain. Yes. I can define a constant. And what I'm saying is
that in this th that is the table head. I want to define the category
so you can see here that this category is defined as
a sporting goods or Electronics. So I want to Define n as header
that kind of functionality. I want to implement. So this product category we
have already defined where we are displaying the category. Now comes the product rule
now in this product. Row what we are going to Define. So in this product robot, all I want is that I want the product
may be the product name whether the products talked are
not at the same time. I want to price
the product price. So what I will say
that I want the product name, I want the product price. Okay, so let me do this and let
me show you the example now. So we have defined
the product category and product row now. You can see over here
the product table we were writing the product table where product or name dot index
of it at x equal to minus. We are just comparing whether it is
in the stock or not. If it is there in the stop we
are pushing it to the rosary so you can see here
different different rows. So we are pushing the values
in the rules and then we are declaring to subcomponents
product category though and product rule in which
we have defined the category which will be
the category header. And then we have defined
the product through individual where we are saying that we are using
the product name and then we are also
displaying the product price as you can see in this example that you have to define
the product name and you have to define
the product price. Okay. So this completes our demo
of using this search example, let me save this
and open it on the screen. Okay and p.m. Start
is this is running. So just a minute. They have doj's I have nothing the index dot here
is the search example and in the react dom-jot render. I'm calling this route
within is in place. It should show up
now refresh it. Okay. Now it is showing up. So this is the output
of this particular example, we have implemented
the five components as shown in this particular example. So let's check the output. Now. Let's say if I want
to search for football it is giving me the result
for football only correct. And now if I want
to remove this football from the search component that is showing
me all the results or you can say all the products
with their prices if I check this checkbox, which is only show products
in stock and the products which are in red
are not in stock. So it will hide those products
which are not in stock for me. And if I uncheck this checkbox, it is showing me
all the products whether they are
in stock or not. So this is you can say
a demo which I have shown you of the complete. React J's fundamentals
where You'll have used state where we have used
props here created the components five components. We have created. So for example,
let's search Nexus 7, which is in another category. It is giving me the result of Nexus 7 along
with the product name and the product price. So that is how we can create a very beautiful
applications in react.js by decomposing the complete UI into different
different components. This is the beauty
of react.js you can say. Okay. So now we will finally talk about the final react.js
fundamental that is keys. So what our keys in react.js so
let's talk about the keys now. So if I talk about Keys, these are the elements
you can say which helps react to identify
the components uniquely. So for example, if I have ordered list where I have some allies I
have an unordered list UL where I have some of the Allies so I can Define These on them so that those react elements
can be identified very much uniquely. So basically I can say
that these are the elements which helps react to identify
the components uniquely. So on the screen, you can see that I have
to react Elements which is having
to render methods, but they are uniquely identified
by different different keys. So for one of them I am using
the key as 1014 another I am using the key as 102 so you can say that these are
the basically things which helps us to identify
the components uniquely. Now, you can see here that if any of the key
is changed again, I can check which key
has been changed. So Keys again,
I will repeat that. These are the elements only which are applied
on react elements specifically and they help react to identify
the components uniquely. Okay, so we'll see
the example of peace now that how we can use keys in
Applications this is an example where I have used the concept
of keys just to let you understand at how we
can use the keys in react.js and how they help us
to uniquely identify the components in react.js. So in this particular example, you can see
that there is an array. I have created constant
numbers number array with five values 12345 starting
from the index 0 obviously because it's an array now
the egg dom-jot render. This is the first method which is called
in this a component is called which is the number list. So number list is a component
and then there are props which is used called numbers and these numbers
will have this array values and then document dot
get element by ID. Now. Let's talk about
this number list component. Now. This is a function based component so
function number list. Now, as you can see over here
that I don't need any state. I don't need any Constructor. That's why I have no event
which is getting behind. That's why I know Constructor. No super keyword is used. So in the function component that is number list
is props is passed. So numbers is props dot numbers because this numbers
will be taken in the props Now
list items numbers dot map again map is a very important
you can say function when it comes to array or to iterate
on the array values. Please remember you
can use the map function. This is a predefined
function in jQuery and JavaScript used for arrays where you can I trade
through the different value of the arrays so numbers dot
map number is just a key. You can say now list item Now list item is again
a subcomponent here. I am using the key
which is number dot tostring. So I will have
the key as one two, three four or five and value equal to number now
in the function list item. What I want to return
is I want to return a list of allies having
the props dot value. So whatever will be
the The number that will be shown as a lie, but all these will
be identified uniquely. So if I go to inspect element
and just showing you that how you can see here. So this is a ul and this is the LI structure
which you can see over here. So all these allies
structure is defined or you can say identified
uniquely with this key value. So what will be
the key value in this case that key value
will be 1 2 3 4 or 5. Okay. So that is how we
can Define the key on the component or in fact, you can also Define
the keys directly on you can say the HTML tag
for example a lie. So one more example if we will see for the keys
the same example, which I have shown
but in this case, this is a very important
thing to understand that when you are returning you
are returning a ul and then you are returning the list items
from the list item company. This is very important
to understand over here that how you are returning
this ul and Ally structure in the output. The right hand side
you can see the output the important thing is that we have created here
to functional components to function components are
one is the number list, which is the main component
called from react Tom to render. And in this number list. I am calling another sub child
or sub component which is again a function component
called function list item. So function list item
and passing the props. I'm returning the Allies
structure from here and I am also returning a URL structure from where
the list items will be shown. So what are the list item will
be shown whatever the number which are there
in my array, which is 1 2 3 4 & 5. So all these numbers will be
shown on the screen as 12345. So let's come back
to the PPT again. So we talked about he's so basically we have talked about
all the react.js fundamentals. I will just again repeat
very quickly for you that what all fundamentals
we have talked about. We talked about jsx components. Props State lifecycle events reps and finally
we talked about keys. So these are all the basic
fundamentals of react.js and we have seen very good demos based on these topics
one last example, or you can say final demo
based on these Concepts and specifically on
lifecycle methods which I want to show you. I'm going to show you
that and then we'll start with the advanced
concept of react.js that is flux and Redux. So I will talk
about what is flux and what is reduxid detail. But before that let me show
you a very good example where we will be using
the life cycle methods and I will show you how we
can use a life cycle methods while working with react.js. So again, I have came back
to the same example. Okay. So what I'm doing here is I'm just commenting
this particular code so that there is no confusion. Let's check the output. It should show us nothing now. Okay, that's great. It's blank. We have not written anything. We have commented
the complete code. Okay, great. So let's write a fresh code now. So what I'm going to do is that I'm going to show
you a clock example, which will completely
show you the date and time but here I'm going to use the life cycle methods
which I've shown you in the different phases. So one of those methods I'm going to use is
component a to mount and component will Mount. Okay. So let's get started. I am creating a component. So I'm writing
class clock exchange from Dr. Dot component just like we are hunting every time but before completing
this class component, I want to write which is going to render
on the browser or on the Dom. So the egg dom-jot render
what I want to show and I want to show
this clock component. So component should be always
in the curly braces and then I have document dot
get element by ID where I want
to render the output So this is done. So we are sure that the first component
of the parent component which will be called is
the clock component. That's why I have written
the react on top trender in the first place. So first thing first, so since this is
a class component, I need to have a Constructor
and then in the Constructor. I want to find the super keyword so that this dot props does
not become undefined and then if I want to set
the initial state, so I have to set it
in the Constructor itself. So I am seeing this strategy. This is my initial state which I
am setting so I am saying what is the date so I'm saying
it let's say nougat. So I've defined the Constructor
now outside the Constructor but I am going to do is that I'm going to define
a method called it's a tank which is going
to work the ticker. Nothing else. So in this state I'm going
to set the state. So I will say this dot set
State and what I am going to set the same state
of the same property date with the new date. So I've set the state now in the take method we will call
the tick method later. And now I am going to Define
two lifecycle methods. First of them is component did
Mount so intelligence is helping me over here component
dead Mount and next I want to call is
component will unmount. So again intellisense I
can use the intentions. Great. So in the component did Mount
what we are going to do is that we will Define a property. Let's say this dot for example timer ID
equal to I'm going to define a predefined method
called set interval in this set interval. What I want to set is I want
to Define Arrow function and that Arrow function
is let's say this dot tape. And I have to define the range for second travel now
in component will unmount since I have to
unmount the component. I have to destroy
the component from the Dom I will write clearinterval
again a predefined one and in this I am going
to pass this dot time already. So that is how we can Define
the life cycle methods now once these lifecycle methods
have been defined. What I'm going to do
is default method which needs to be implemented
as a part of the class is render in this render. I will implement
this return statement. Okay. Now in this return statement, what I am going to write is
that let's say let's have a container. So Dave is my container. I will write some H1 statement. Example, let's say a to Rica. React.js full course by the pull chain and then
in a ch2 h2 tag another tag. I want to take in the h2 tag. What I will write
that it is maybe with the time probably I want
to say this dot state DOT date. Maybe I want to convert it
probably to local time string. So I can convert it to local
and string and I can place. Also here. So you can see the output that it is showing the output a
to the kuryak Jays full course by the pull chain. It is 11:29 and 59 p.m. So that is how you can use
the life cycle methods in react.js application and we have set the interval
with one second. So that's why every time you
can say the second value are getting changed. So I will again repeat this that what I have done in this
what I have done in this is that I have set the clock component
in the clock component. This is my parent component. And since this is
the parent component what I have done is that I have set initial State and in the tick method I
have set the final State now in the component
did Mount and component will Mount methods
there are two methods which I've defined component
will unmount and component dead mom in these two methods. I have set the interval that every second it should show
me the time interval. What is the current
time interval and in the render method
in the return statement? Have placed this H1 and H2 tags. So now let's come
to the another concept which is flux. What is flux in react.js. So let's talk about something
called flux now so till here let me repeat once again that we have completed all
the eight react.js fundamentals which includes j6
crops component State and so on we have also talked
about some lifecycle methods how to use refs
how to use keys in the axis. Now, what is flux
now the question which will be coming
in your mind is that what is flux? So flux is a pattern
for managing the data flow in your application
as simple as that. So what I can say is that there are data patterns through which you
can manage the data flow in your application
fluxes one of them. So the most important
concept of react.js or you can say in data flow that in react.js the data flow
is unidirectional by that what I mean is the data flow
only in One Direction, so that is the you Floods
before Deep dive into this flux. I want to show you one website
from where you can study if you want to go
deep dive into flux. This is a Facebook site Facebook
dot GitHub dot IO / flux. This is a very good side
to learn flux starting from the basics
to the advanced part. So I will recommend that you go through this site Facebook
dot kitab dot IO / flux. This is our official side
from the Facebook on the GitHub. Okay. So again coming to the PPT. So we talked about
flux flux is a pattern for managing data flows
in your application. And the most
important concept is that data flows only
in One Direction. Now, what are
the different parts or what are the different
components in flux? So flux has basically four main
components one is the dispatcher another is restored another
is action and the view so we will see this in detail. But before that this diagram
is very important. This is a representation
of a data flow in any react.js application. It is starts from View you
can see the view over here. Now what view is doing
that view sends action to the dispatcher now dispatcher
can have a number of actions and number of actions can work
on a single dispatcher. Now the dispatcher's sends
actions to every store. So what happens that one's actions
are given to the dispatcher from the view now dispatcher
sends these actions to the store and then against
or sends data to the view so you can see that this is a unidirectional
flow of data in react.js, which is starts
from view through actions. It goes to dispatcher and from dispatcher
it again goes to store and from store the output
again goes to view and that is how it works
in a unidirectional fashion. Now, we will talk about all
these different components of a flux dataflow
one by one now. What is dispatcher now
as you can see in this diagram that dispatcher is getting acted
upon by the actions so View, Sending action
to the dispatcher. So dispatcher receives action
and dispatches them to stores that have registered
with the dispatcher. Now every store will receive
an action there should be only one Singleton dispatcher
in each application. This is very important that
in any react Jays application. There should be only
one Singleton dispatcher. Let me explain you
through an example. So for example
user types in a title for a to do and hit Center, so we are talking about a to-do application
over here implemented in flux and readers for example, now what happens is
that user types and title for to do and then press enter what happens next The View
captures this event and dispatches and add to do
action containing the title of the to do so in the title. You must have written some to do that I have to do is this task
this task and this task that becomes the title
of the to do so what happens. Is that the view which is there
in your unidirectional data. Flo it captures this event
and dispatches a to do action or any kind of action containing
the title of the 2D and then when it dispatches any action
it is received by store. So every store will then
receive this action, please remember I
am saying here every store and this will come out
as a basic difference between the flux and Redux. So when we will
talk about Redux, then we will see that Redux always
have a single Stone but in case of flux flux
can have many stores so that is why it
is written on the screen that every store will
then receive this action. So there could be multiple store
in a flux base application. Now, what is the store we are
talking about store and store. So what is the store all
about systole is the place what it holds the data
of an application. This is the most important thing
of any Redux base application in react.js store will register
Then application dispatcher. So store is getting
the dispatched action from the dispatcher as an input or you can say the action
is received as an input. Now the data is stored must only
be mutated by responding to an action there
should not be any public sectors on a store only get us so action store is getting
an action via a dispatcher and then store decides
what actions they want to respond to every time
I store data changes. It must emit a change
even so is stored and do some processing
and then it decide that which actions
needs to be responded to and every time
a store data changes. It must emit a change event here could be your there should be
many stores in any application when it comes to flux. But when we will study Redux, please remember there is
only a single source of Truth in Redux application. So there should be
only one store when it comes to Redux. And then we can see
the same example, which we were talking
about the to-do application. So store receives a to do
action via dispatcher. Now it decided it is relevant and adds the to do
to the list of things that needs to be done today and then the store updated stata
and then emits a change even now what our actions
in any flux application. We are talking about actions
actions are given to store by a dispatcher dispatcher
dispatch has the action to the store now what our actions so basically
action defines the internal API of your application what action needs to be taken
they captured the way in which anything might interact
with your application. They are the simple objects
that have our type field and some data but
when it comes to action, it's very important
to understand that action should be semantic and descriptive when it
is taking place. They should not describe
the implementation detail of that action. So I will say that use delete user rather
than breaking it up into delete you. That ID clear user data
and so on. So remember that all the store
will receive the action and they can know that they need to clear
the data refresh potential by handling the same
delete user action. So instead of longing
the names of the action, you can be very precise while giving any action
to the store now, this is just a action example. So when a user clicks, let's say delete on a completed
to do a single delete to action is dispatched because in a to-do application
some of the tasks could be completed
and some are pending. So when you click or when any user clicks
the delete on a completed to do a single delete
to action is dispatched to the store now what our views
so we talked about dispatcher we talked about store we
talked about actions. Now the last thing which you want to talk about is
the flux in the flux is views. So this is the last
component you can say of any flux data flow data from
the store is displayed in views. So views are the Which
is displayed on or render on the browser on the Dom views can use
whatever framework you want. In most example, we are using the react so
when a view uses data from a store, it must also subscribe to change
events from that store. So if you remember the diagram, which I showed you
from view via action, it goes to dispatcher
from dispatcher. It goes to store and from store it
again goes to view so when a view uses
the data from a store because in a store something
has been updated something has been modified. So when I view uses
the data from a store, it must also subscribe to change
events from that store. This is very important and then
when the store em, it's a change the view can get
the new data and re-render it because it has become
the updated data now or the process data, so that's why we are calling
that now from the store when the data will flow. It will be the new data in which
is going to be rendered. For component ever
uses the store and does not subscribe to it. Then there is likely
a double bug waiting to be firm actions are
typically dispatch from views as the user interacts
with the parts of the application interface. So, please remember
whenever there is a user interaction on The View. So some actions
will go to dispatcher which are dispatched to a store and there will be
some processing happening some State changes
happening in the store, which is again moved to the view and the views will have
then the new data which they can re render
on the browser. Okay, so now we will talk
about what is Redux in react.js because we have already
talked about that. What is the flux and what
are its basic concepts? So let's talk about Redux
now so why we have to use Redux with react.js as we know that reactives only a view part in
MVC model kind of application. So to control the data flow we use Redux as
a data flow architecture. So the left hand
side you can see that there is a application
having multiple components which we talked about and if we want to flow the data
in this particular application, we want Redux. This is the basic use of Redux. You can see now
in react we already know that the data flow
through the components and always remember that it follows
uni directional flow of data that is data always flows from
the parent component to the child component. Now why we need Redux, so basically to understand what read access You
must first understand that what is the state we
have already talked about State and we also know that the child components cannot pass the data to its
parent component in react.js. So opposite flow
from bottom to top. It's not possible the non-parent
components can't communicate with each other react
does not recommend direct component to component
communication this way. So if you want to connect
from this component to this component or this component
from this component, so this component
to component approach or this component
to component communication. It does not allowed in react.js and it is not even recommended
to use this kind of approach. So basically Britax offers
a solution of storing all your application state
in one place called a stone. So here we are talking about two
terms two important terms one is State and one is
another one is a store. So if I talk about State
again very quickly, so a stateful react
component is a job. Script ESX class
which we already know and every stateful react
component carries its own state. So if we have
multiple components than every component holds
or carries its own state in a react component
the state holds up data and component might render
such data to the user. Now. What is Riddick's is doing over
here Redux holds of the state within a single location and that single location
is called a store now components that dispatch the state changes
to the store not directly to the components. This is very important
because as I mentioned that Redux holds of the state
within a single location, which is called store and then components then
dispatch the state changes to the store not directly to the components also with
Redux the logic for fetching and managing the state. It lives outside the reactor
now the basic question, is that should I Was
Redux or not? So using Redux or Lux for Estate Management
is totally up to you. Now when components dispatch
the state changes to the store and not to the components
now it is responsibility of the store to subscribe
to that particular data because you see here
from the store the components need to be aware
of the state changes so that they can subscribe
to the store. Now. What is the basic
definition of a Redux? So from the Redux website now,
what is this Redux website? Let me walk you through
the official Redux website. This is official readers
Redux website read x dot Js. Dot-org from where you can learn
about the Redux in detail. This is a very good website, which every developers follows
to learn the Redux, please remember Redux has no relation direct
relation with react. It has no direct relation
with react you can write. Apps with react with angular
with Amber with jQuery or even with vanilla JavaScript, but here we will see that how we can use
Redux with react.js. So that said Redux Works, especially well with
libraries like react because it let you describe
UI as a function of the state and Redux emits State updates
in response to actions and react bindings for separate
presentational components from other container components. So we will see what is
the definition of Redux. So on the official website, it is written that Redux is
a predictable State container for JavaScript apps now here
we have three important terms. What is predictable? What is the state
and what is container? So let me repeat
the definition of rhetoric from the official website Redux
is a predictable State container for JavaScript apps. Now what is predictable
predictable means State changes follow the three principles now,
we will talk. About what are
those three principles? And then there is
another term called State the applications data. What is the state over here? The applications data
including the data related to the UI itself. Now the third important term
here is container so read X is the container which applies action to the pure reducer functions
to return a new state. Finally Redux has been designed
for JavaScript applications. So I will say that what is Redux Redux is
a predictable State container for JavaScript apps now how it is different
from flux earlier. We talked about flux that what is flux what are
its different components now, we have to see that
how it is different from flux. So when Redux influx, they share similar Concepts
and principles still there are some differences
between flux and Redux so flux differentiates
between the dispatcher and store the reason being
flux supports multiple stores. Read X limits the application
to one store, which means there is only
a single source of Truth and which means the store and dispatcher can be combined
into one dispatcher store and this dispatcher
is stories created by Redux create stored function. So there is a predefined
function in Redux, which is create store function and it creates
this dispatcher store kind of functionality in Redux. So in short what is a Redux it
is the hottest Library as of now for front-end development. It is mostly used for application where
Estate Management is required. It is used in JavaScript
application where we need State Management read X is
a predictable State container. We already talked about that. It is also return
on its official website that Redux is a predictable State container
for JavaScript applications. And finally just
for the information that Redux it is developed by
diagonal entry you in 2015, but let me tell you
that it is the hottest Library as of Now for front-end
developers out there, it can be used with any framework beat
react angular Ember jQuery or even with vanilla JavaScript
now Redux principles, very very important
that we have to understand. What are these redox principles. So there are
three Redux principles, which I'm going to talk
about first is the single store as we saw that there is a comparison
direct difference between flux and Redux flux
allow multiple stores, but Redux allow only
single store state is read-only. This is again one
of the principal for using Redux and change using
pure functions only. So in redox changes are made
using pure functions only. So the first one let's talk about the first
one single Stone. So with only react
unidirectional data flow, we know that the data flow in One Direction only in
react.js so direct communication between the components
is not allowed. So what happens generally is that Redux uses a concept
called Dollar for storing the application State
at one place. If other components want
to talk to that store for their State Management, then they have to subscribe
to that store then only they receive the updates
from the store itself. So in the diagram
you can see over here that this is a tree
showing multiple components. The state is managed
in a single source of truth. That is the store. The store is single
entity over here. All the components state
is restored in the store and they receive the updates
from the store itself. Now the second principle
of Redux is state is read-only. So we talked about what is
the first principle of Readers first principle of Redux is that it has a single source of Truth it always follows
the pattern of flux only but all the data flows
through a redox system is in unidirectional Banner
all changes to the state comes from actions, which are applied to the state and all actions are then
we'll to into Redux. All part of the system can ever
receive data from two sources. This is very very important here because we are talking
about the first principle of Freedom Redux in react.js. Then there will always
be a single store. It cannot have multiple stores and all the components have
to receive the updates or the changes from
that particular store only now the second principle of Redux, the second principle of Redux is that state is read-only
which means that you can change the state only
by triggering an action. So without triggering an action
the state cannot be changed so you can change the state only
by triggering an action which is an object
describing what happened. So some action needs to happen. So in this particular example, you can see there is about
there is no action on it. Now triggering action
has happened on it and now you can change the state because you can change the state only by triggering
an action on a component which is an object describing
what has been happened. So we talked about single
Of Truth we talked about that the state needs to be read
only so we are saying that a state can never be
mutated new states are produced by applying an action to the current state from which
a new state object is produced and many of the times it
is the recommended practice that immutable programming
techniques needs to be utilized while working with Redux. So basically here we talked
about the single store we talked about state
is read-only so in single, so let me repeat quickly. Once again that the state
of your application is stored in an object tree
within a single store. And this makes it easy
to create Universal apps as the state from your server
can be serialized and hydrated into the client
with no extra coding effort. So there will be always
a single state tree which makes it easier to debug
or inspect an application. It also enables you to purchase
your apps estate in development for a faster development cycle. So we already talked
about single source of Truth. We talk them out state is Only
the second principle of Redux where we talked about that. The only way to change the state is to emit
an action which ensures that neither The View
nor the network callbacks. You can say will ever write
directly to the state instead. They express an intent
to transform the state. And finally we are talking
about the third principle of Redux that is change
using pure function. Solely. The changes are made
with pure functions only. So to specify how the state tree is transformed by
action fee right reducers, or you can say pure function. So pure functions
are called reducers and they are used to indicate how the state has
been transformed by the action. So reducers are
just pure functions that takes the previous
state and an action so you can say the combination
of this action and the combination
of the previous state. This is the reducers they take
this previous stated in action and the return the next state
by using a pure function. This pure function is called
a reduced Over here. Please remember to return new
state object instead of mutating the previous state you can start
with a single reducer and maybe as your app grows. You can split it off
into smaller smaller actions or smaller reducers that will manage the specific
part of the state tree. So what we are saying here is that because reducers
are just functions so you can say pure functions
you can control the order in which they are called you
can pass the additional data or even you can make reusable reducers for common
tasks such as pagination. So with respect
to reducers this function or the reducers the function
produces no side effects and many pure functions
can be composed together to process different parts
of your state tree. Now, what are the basic
components of Redux? So there are four components
of Redux first is action producer store and view. So let's talk about them. First one is action. So plain JavaScript objects. Chirpy loads of information
for the store. This is the action. So there is an application
actually happens on it. And this action is sent
to the store producers. We already talked about
at the reducers are the pure functions which specify how
the application State changes in response to an action. So for example, if this is a reducer the
previous state and the action it is given to the reducer
and it generates a new state. But please remember the things which you should never do inside a reducer you
can see these are the don'ts for using a reducer you should never mutate
its arguments never try to mutate the state
perform side effects, like API calls and routing Transitions
and do not do in a reducer. You cannot call a non
pure functions like data dot now or math dot random in a reducer
now the third read X component is stored store is an It which brings all the components
to work together. It calculates the state changes and then notifies
the root reducer about it. So there is a state tree where changes are happening
from the application. It is moved to the store and then it calculates
this store calculates the state changes and then notifies
the root reducer about it. So what are the various
responsibilities of a store the most important one that it is holding
the application state it allow access to a state via get State method
very important to understand it registered
the listeners wire subscribe. So if the components have
to subscribe to the store, they have to go
via the Subscribe way now the allowing the states
to be updated via dispatch that is an action for dispatch always dispatches
an action to the store and then some processing
happens in the store and a new update or you can say
updated state is rendered. The View stores also
handles the unregistering of listeners via the function
return by subscribe. Now, what is view the last
Redux component we are talking about what is a view so view
helps in displaying the data which is provided by the stew. So we talked about that from view via action
the data will flow to a dispatcher the dispatcher
will dispatch an action to the store now from store
the new or updated state or updated data will be rendered
on the Dom using the view. So basically view helps in displaying the data
provided by the store now how the data flow in Redux
components Redux architecture is concentrated on a strict
unidirectional flow of data, which means that in react.js
or read X components or Redux fundamentals
the data should flow in One Direction only ten in all the application the data follows the same
life cycle pattern making the Of your app more predictable and easier to understand
and it also encourages data normalization to ensure
the consistency of the data. Now, we will see
that how the data Flows In Redux component. So you can see that actions. These are the reducers which are working
on the store from store. They have been given to
the particular component. Some changes are rear ended when the store changes and these are the some
of the container you can say smart container
so dumb containers to which the data is passed or you can see
new data is passed. Now we will talk
about create router. So this is the last topic of this particular vigs
full course video series and then we will see some
of the example related to Redux. Now, what is the react router so you can say
react router again? It's a library. So you have to first install it
using npm install react - router once it is restored a library
gets added to your node underscore modules folder. So react router is
a powerful routing Library built on top of react framework. It helps in editing. You can say new screens and flows to the
application very quickly. So for example
in your application, there are multiple Pages
or multiple hyperlinks, you have to add new screens. So react router Library
allows you to do that the most important thing you can see
the third point over here that it keeps the URL
in sync with data that is being displayed
on the webpage. So here we are talking
about single page. Additions or developing single
page applications with react.js because routing means that it helps to route from one screen
to another screen and the flows through
the application very quickly and also keeps the URL
in sync with data that is being displayed
on a particular webpage. So what are the router
advantages in react.js. The first one is that it easily understand
the application views. So if you have
different different views in your application, it's very easily understand that it can restore any state
and view with simple URLs. There will be no complex URLs and it will allow you
to create friendly URLs. It handles nested views and resolutions State
can be restored by the user by moving backward and forward. So in any application where there are
multiple web pages, you have to move back and forth. You have to maybe move
backward and forward so State needs to be restored
on different pages so router Allows you that a state
can be restored by the user by moving forward and backward. Then it maintains a standardized
structure and behavior because as I mentioned
that here using routing Library, we are talking about
true routing Library. We are talking about creating
single page applications. And finally, what is
the advantage of a router that while navigating it it
can do implicit CSS transitions, which means that
the CSS remains seamless on your complete application whether there are
multiple web pages or a single web page. So let's go to the Redux demo. We will see Redux demo. So this is the official
website of Redux. Now, I am going to show
you to do application which is developed
using react Redux and Redux Library. So we know that Redux bindings
for you can say react bindings for Redux separate
the presentation components from the container components. This is very very
important to understand that what are the
presentational components and what our container components when we work with
react bindings for detox. So what is the use of or what
is the you can say advantage of this approach
this approach of dividing or separating the
presentation components with a container components. It will make your app
easier to understand and allow you to more
easily reuse the components. So what is the difference
basically between the presentational components
and the container components? We will see
in this particular example. So in this particular example, I am using you can say
the Redux library because you can see here
the create stored method, which is calling the always taking the parameter
as root reducer. So, please remember it. Any deducts application there
needs to be a root reducer and once you have the route reducer
always the store will talk to root reducer only. So if I talk about purpose
of presentational and container components the purposes
that presentational tells me that how the things look maybe
about the mark-up HTML or about the style
and container components means how the things work beyond
the actual business logic lies, which means data
fetching State Management or you can say State updates are
the presentational components aware of Redux. I will say no
and container components. Obviously. Yes. So presentation components
they always you can say read the data from props
and container components. They will subscribe
to redact state. So in this particular example, if I talk about
the presentational components, so if I go to the solution
structure I have here a to do list dot J's. Now in this to-do list. This is you can say
to-do list created for a list showing
the visible two dudes. So when I will write
something over here, I can see the visible to do
which means all toodles. I can see the active ones
and I can see the completed one. So for example, if I write here
edu Rekha training and I press add to do. So this is added to my to do list if I say
Ripple react.js classes, and I press enter then again this to do has been added
to this to-do list. So to-do list here basically is working as
a presentational component or you can say
presentational layer. Then I have another you can say
reducers defined over here for example to do
to lose dot J's. So this to do dot JS
is returning me just an array of to do items
with the properties ID text and completed so These are you can say we are talking about the
presentational components only. So another thing is that
if I have a footer component over here so footer dot JS it
this is photo component is where we let the user to currently see
the visible to tooth so you can see here that when I entered
at Eureka training and people react.js classes. This is my footer component where we can let
the user to change the currently visible to room. Now if I talk
about app dot JS now, what is this app dot JS
this app dot JS is basically calling at to do visible to do
list and footer components. It is calling
the three components so you can say this is
the root component that renders everything else. So whatever is getting rendered
as a output on the screen is because of this app door Chase. So basically I can say that these are all
the presentational components. They describe the look and feel but don't they don't know
from where the data comes from or how to change the state. How to change the data they basically presentation
components they basically render what is given to them. So if you migrate from readers to something else then
you will be able to keep all these components exactly
the same they have no dependency on the read X. Now. Let's talk about designing
the container components. So why we need
the container components, so we need container components to connect the presentational
components to Redux. So for example, there is a presentational
to-do list component. I showed you this to-do list. This is a presentational
you can say component now, it needs a container
like visible to do list. So I have a container which is a container component
for example visible to do list. So it is showing me all
the visible or you can say, oh it is showing me
the visibility of all the tools which is there on the screen. So basically The presentational
To Do List component. It needs a container
like visible to the list that subscribe to
the Redux store and once we substitute Scribe once we subscribe to the you
can say Redux store and knows how to apply the current
visibility filter to change the visibility filter. We can have a filter link
component or you can say filter link container component
that renders the link that dispatches and appropriate you can say action implemented
on click action over here. So it dispatches
and appropriate action on click. So if I talk about this visible
to do list or Jace if you see in this particular example and just defining
the multiple cases, so in this particular
visible to do list what Jays I am filtering the to do is according
to the current visibility filter and renders our to-do list
in filter link dot J's. I am getting the current
visibility filter and renders a link. So how about designing
the other component? So we talked about let's
say presentational components and then we talked about let's
say container components now. Everything you that how you can design
the other components as well. So here in this I have had
to do dot JS contain them because sometimes it's
very hard to tell if some components should be
a presentational component or a container company, for example,
maybe sometimes form and functions are really
coupled together such as in the case of maybe
this particular small example. So add to do this act
to do is again a component. It's an input field you can say
this is just an input field with a add button
technically speaking. I can split it probably
into two components, but it might be too
early at this stage. It's fine to mix presentation
and logic in a component that is very small because this is just a text box
and just a you can say button so you can see over here that I have taken the input type which is of a type text and then
a button of type submit' having the text at to so it sometimes happens
that you don't have to differentiate the
presentational and Component. Sometimes you can
combine the two logic into one single component just like this now we
will see the functionality that lets say this is complete and if I click on active pump em
active to those it is showing me that active one completed. It is showing me
the completed one. And if I click on all
it is showing me all the tools over here. So let's say if I write react routers
and click on add to do now I have three to do sin my list, which is showing me
the all of all list if I show want to see the active
I can see the active ones if I want to see my complete to those I can click
on the completed one. Now, let's talk about
one more example that how we can use the Redux
concept of actions reducers and store with react.js. So this is just another example
having the same architecture of the solution. We are in I have some components
which is counted or JS and Inspector Jai
specification dot J's. Then there are some producers
defined here index dot JSP. I want to increment
and decrement functionality. I want to implement
and then I want to increment that if this number is odd and there is
some amazing functionality which has been
implemented over here. So let me show you the output. So if I click on this one, so this shows increment by 1 because I'm returning
the state +1 every time and when I click on this minus sign, which is decrementing so I am deducting it always
from one from always from the state. So when I click
plus it is incrementing and when I click
on the minus button, it is decremented. Now, you see here I have implemented two more
functionalities one is increment if it is odd if this number
is particularly odd, I can click on this
and increment now it is not incrementing because this number has become
even at the same time. We can also Implement
a sink callbacks or a singing asynchronously. I know functionalities
in Redux with react.js if I click on this increment a sink it will take
some fraction of seconds to increment you can see
for L become the five now. So that's all about Redux. So let's go back to the PPT and this is
the final slide demo. So I will show you a demo
very quickly of how you can create a calculator kind
of application in react.js. So in this application, we already know
that we have to call react dom-jot render and app
will be my route components. So let's go to after JS
in this app dot JS you can see that I have make the simple code
very very simple. The reason being
that it's a very good practice while working with react.js or any application
to divide your code into multiple components. I could have written
it on a single file on a single component. That's not a problem at all. But for code modularity,
it's always free. Ingrid and I also recommend that divide your code
into multiple components. So as you can see here app
is my parent component. Then I have two sub components
one is info about app. So in the components folder
on the left hand side, you can see I have
a components folder in components folder. I have to subcomponents
calculated or JS and info about AB dot J's. So first component or you can see sub component
within the app tree is info about app and another sub
component is calculator. But once please remember that once the output
will be rendered on the screen. It will be rendered
in a specified order in which the components
are written or maybe the components are called. So for example, first component, which will be called
will be info about app. So let's talk about info about
a first in this info about app. I have written just
a static text and anchor tag. I'm showing you
a calculator application which is built. Using react.js so info
about tab its class info about app extends component. It's a render method which is implemented
for this class and a return statement simple. J6 or HTML I have written
in for about app. Now. What is the other component which is called after that
the other component which is called
after that is calculator. Now, what is happening
in this calculator? This is something very important because the complete
business logic is returned in this calculator subcomponent. So let's go to
the calculator subcomponent. Now as you can see that in the calculator
subcomponent I have implemented the complete logic. Now this calculator subcomponent
will start from class calculator extends component. It will start from here. Now in this what it is doing is that since it's
a es6 is standard or you can say class component. It will add the Constructor
in the super and here we are initializing the state
with some of the properties. So what all properties
are mentioned over here display value operator waiting
for operating first operand and clear all and some
with default values. Once this is done. I can bind a handle click event
or you can see event handler. It should be done
in the Constructor. So this is very well done
in the Constructor itself. Now there are some methods
which are defined over here for example process
digit process operators. All these methods
or functions are doing some kind of operations mathematical
operations on the numbers because here we are
talking about a demo of a calculator application now
the most important thing which I want to show
you is this handle clicks. This is binded in
the Constructor in this handle. Click. What I am doing is that I am calling a function
distraught process Nuki eat or targeted value either targeted value is
the value which is entered which will be entered
by the user on the calculator application. Now the render method in the render method
you can see that again in the calculator subcomponent
a Sub sub component is called which is called calculator
display now calculator displays another component button the render method you can see
the complete HTML is written to show you the field so you can see the controls
on the calculator a complete you can say
complete HTML is returned and on that on click
events are binded. So if I go to this calculator
display component because that is a subcomponent
of the calculator component. This is a function component which has been created
calculated display, which is props
is passed over here and some kind of calculations
normal mathematical operational. This has been done. So let's run
this particular code. So we already know that to run any react.js
application what you have to do that you have
to write npm start. I have pressed enter and now
what will happen that it will open on the local host on you
can say it default port number. For example, 3000 all the create
react App application. They run on 3000 port
number and let's see what will be the output great. So this is the output
which is shown which is calculator kind of functionality developed
using react.js now, we will see that how we
have divided our application. So I will go to app dot JS
in this app dot J's. The first component
was info about app. Now in this info
about a port was written that it's the calculator built
with reaction here. So you can see in the output that it is written calculator
built with react.js some you can say static text. So this complete thing
the top thing defines the info about app company as simple That if I talk about this particular
component in react.js, this has been particularly
developed using calculated or JS component why I am saying
you this the reason being that please remember that always you have
to divide your UI into different different
components in react.js. This is the basic fundamental
of any react.js application and the same has been
applied over here that the upper one was a static text or maybe
any other functionality. So this is divided into one of the component
and the other functionality which is a calculate
kind of functionality has been implemented
using another component which is calculated chairs. Now, if I do some basic
operations in this calculator, you can see that it is giving me
the correct output. So these are basically some
of the on click events. So if I go to the code
and go to calculated or Jays in the render method you can see
that in the render method. There are some button value 1 2 3 4 5 6 7 8 I so
one two, three, four, five six seven eight nine. These values are
defined over here, which are you can see
the digit Keys. Then you have the operator Keys. What are the operators is? These are your operator Keys the for operator Keys
has been defined along with the equal
to so this particular component is again rendered
using this HTML, but for every control over there on the calculator screen
on click event is defined. This is very very important and every time
whenever this control or keys will be clicked on the calculator to handle
click handle click function. You should handle click event which is binded to
the Constructor initially just will be called every time so if I go to the screen
if I want to let's say perform or operations may be
7 minus 4 n equals. It's three great. So that is how you can Implement small
small applications in react.js. Even you can Implement
very big applications will be accessed using
the advanced concepts. Create that is
flux Redux routing and so on so very quickly. Let me show you one more example
the same calculator example, I want to show you
but the UI is totally different and based on different
component methodology. So let me close this
and I'm opening another demo. Okay, so let's open. This is in Visual Studio code. And before explaining
this particular code piece, this is another kind of you
can say calculated functionality which has been developed. I want to show you the output
of this particular application. So for that
but I'm going to do is that I'm going to say npm start. Okay. Okay. So it's in another folder. So now I will say npm start. Now this is the large demo of this particular reaction
occurs at Eureka series. Now what I want
to show you here is that in the previous example, we saw a calculator application in this is just
another application which is implementing
the same functionality a calculator kind
of functionality, but there is a lot
many difference in the UI. So you see this this is
again a calculator which is built
on top of react.js like it is another libraries
have been used over here and the same functionality. Let's say, for example,
I want to do 5 into 5. It is giving me the output
same operational output now if I go to the code and we'll start
with index dot JS the root component is
obviously it's app now if I go to the component
and go to app dot JS now, this is very important
to understand what we are doing what we are doing over here is that I have created
a class component and two sub components are defined
in this particular component, which is display
and button panel. Now for this play if I go to display dot J's
and display dot J's. What I am doing is that I am just defining
the props and taking the value of the props. And if I go to button
panel dot JS now in the class button panel have
defined the various buttons, you can see over here
to various buttons are defined. But if I talk about the logic the you
can say container components because those were
the presentational components if I talk about the container
component container components has complete logic
in calculator Chase because we need to perform
the mathematical operations when it comes
to any calculator kind of thing. So that is why
the complete logic is divided into another folder
in calculator chairs where we are
doing the operations for addition subtraction
multiplication and division and percentage in
all other operations related to a calculator kind
of functionality. So that's why this
has been divided into different different components is
number dots Is operator chairs and calculator Chase? So in the previous example, what we did was that we wrote the complete code
complete operational code of a calculator in one file
that was calculated fears. That was a one way
of writing the code, but the another way
of writing the code is this particular example
where even a small piece of code if this is a very
small piece of code where I am just taking some if conditions it
could have been written into another component file, but I have created
a separate file for it to maintain
the code modularity and that is how you have to learn react.js. So that's all from my side. I have shown you
the calculator demo. Thanks a lot. Thank you. I hope you have enjoyed
listening to this video. Please be kind enough to like it and you can comment any
of your doubts and queries and we will reply them
at the earliest do look out for more videos in our playlist
And subscribe to Edureka Channel to learn more. Happy learning.
