React is a Javascript library for building fast and

interactive user interfaces

It was developed at facebook in 2011 and currently
it is the most popular Javascript library for building
user interfaces
As you can see on google trends React is
dominating the space of library and framework for
building user interfaces the other two players are
Angular and Vue
so if you want to expand job opportunity as a front
developer you should have a React on your resume

at the heart of all react application are

components
a component’s is essentially a piece of the UI so
when building application with React we build a
bunch of independent isolated and reusable
component and composed them to build complex
user interfaces
every react application has at least one component
which refer to as the root component
this component represent the entire application
and contain other child components so every react
application is a tree of every component
if you work with Angular 2 or higher this will sound
familiar
lets take an example of building application like
twitter we can slit this page into component like
side navbar profile trends and feed
here is a representation of component in a Tree
on the top we have App below that we have
navbar profle trends and feed
now feed include several tweet component and
each tweet component can include like component
which we can reuse on other pages even on
different applications as you can see each
component is a piece of UI which can build this
component in isolation and then put them
together to build complex UIs
In terms of implementation
A component is typically implemented as a
javascript class that has some state and a render
method the state here is the data that we want to
display when the component is rendered and the
render method as you can tell is responsible for
describing what the UI should look like the output
of this render method is a React element which is
simple plain a javascript object that’s map the
DOM element it’s not the real DOM element it’s
just the plain javascript object that represent the
DOM element in memory
So React keeps a light weight representation of a
DOM in memory which refers to a as a Virtual
DOM unlike the Browser or Real DOM this virtual
is cheap to create
When we change the state of the component we
get a new React element react will then compare
this element and its children with the previous one
its figure out what is changed and then it will
update the parts of the real DOM to keep it in sync
with the Virtual DOM

so that means when building application with

React unlike vanilla javascript jquery its no longer
have to work with the APIs in browser in other
words its no longer we have to write codes and
query manipulate the DOM attached event
handler to DOMs Element

its simply change the state of our component and

react will automatically update the DOM to match
that state this is why this library is called React
REACT :- reacts to state changes
So when does state changes react essentially
reacts state change and updates the DOM

If you compare Between REACT AND ANGULAR

both are similar in components based architecture
however Angular is a framework a complete
solution while javascript is a library its only takes
to render a view and makes its sure that views is in
sync with the state that’s all react does for this
very reason React is a very small APIs to learn so
when building application with react we need to
use other libraries for things like routing or calling
http services and so on that means you only need
to get the libraries you prefer as opposed to be
fixed what Angular gives you often breaks one
version to another

---------------------------------
Setting up Development Environment

Installing NodeJs from nodejs.org

In this course we are not going to use node we will
be only going to use one of its built in tools called
Node Package Manage or npm to install third part
libraries

Down load the latest and stable version of Node

After installing open up the cmd prompt window
And run this command
npm i -g create-react-app
i for install
-g for global
and the name of a package we are going to install
create-react -app
we are going to use this package to create a react
app
make sure you are going to install same version
which i am going to use
because in the future their might be breaking
changes and you might get frustrated
what is see is a different which i am going to show
you
so @sighnversion1.5.2
for mac user they need to put sudo at the front of
this command
this will run this command under administrative
privileges

npm view react version” this command will show

you the version of react if it is installed.

install visual studio code

Add Extensions
Simple React Snippet developed by burke holland

reload VS Code

Other Extension
Prettier
developed by Esben Peterson

Enable Formatting onSave

whenever you save the changes
this extension is automatically reformat your code
Go to Code menu - File - Prefrences - Settings
Command Palette (Ctrl+Shift+P)
under the user settings add this line of code
Path of settings.json
Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application
Support/Code/User/settings.json

Add this line in settings.json

"editor.defaultFormatter": "esbenp.prettier-
vscode",
"editor.formatOnSave":true,

Video 3
Now lets use create react app package to create a
new react app
In a terminal type
create-react-app and give the application a name
the name of a app

create-react-app react-app
install react and all the third parties libraries we
need
its going to install light weight development server
Web pack for bundling our files
Babel for compiling our Javascript code as well as
other useful tools
So when you create an application you create react
app you have to do any configuration zero-config
setup all the configuration is done for you however
If you want to coustomize the configuration for
production environment you can use
npm run eject command
so after completing of this command
if you see Happy Hacking you are set to go

lets go the folder which was created after this

command
Basics of React JS

Basics of React
What Component is what State is what Prop
React is an efficient, declarative, and flexible open-source
single JavaScript library for building simple, fast and
scalable front-ends application and building user
interfaces (UIs) created and maintained by facebook

The goal of the react is to produce or show useful

content that is going to show up on the screen of the
users browser when we say content we are talking
about (HTML) same type of html you probably learnt
divs span button forms headers all those classic html
elements are going to produce by the react library and
then it's going to shown up on to users browser and
once those element shown up on the screen the user
going to somehow interacts with them it might click on
the button it might insert or type some text input it
might drag and drop some divs
the second goal of react is to handle those user
interaction
a user manipulates some apps react gonna respond to
that in some way
What we will learn?
All about Significance Aspects About React JS like:-
Props
State
Life Cycle Methods
Events
React Router
React Portal
and so much more etc..
--------------------------------------
what is the purpose of react is what library is before that
we instead ...
Let's make a tiny app on the online tool called
codepen.io
we can use it to put easily together to built little react
application
but in general we use to built app our at local code editor
lets work on codepen.io
first we have to work in codepen
open a new pen
add a library and in order to do this
click on the settings button on the top right hand
then we click on javascript button in the middle you will
noticed on the text label that we have the ability to add
in some external scripts
React is an external scripts
so you have to add it as discreet stack
so select Babel from drop down menu of JavaScript
Preprocessor and then in next search field we will type
react you will see two similar library name react and
react-dom so we will select both one by one so we have
two separate library is selected that's all we have to do
so save and close now we can rewrite react code inside
this project

you will noticed that we have three separate panels html

css and javascript so now we are going to write react
code in this three different panels and the result we will
see our app down at the white side panel
let's get into the js panel and create
ReactJS Class Based Components

Code:
Create a Class component called App
class App extends React.Component { // this syntax is to
define or create a React component as a plain JavaScript
class
React "components" are using either Javascript functions
or classes here we use a React Class
To define a React component class,
you have to make a class and you need to extends
React.Component
the component's name must start with an upper case
letter and extend React.Component statement,
here we name our component App so
this statement creates an inheritance to
React.Component, and gives your component access to
React.Component's functions followed by sets of curly
braces
In Short: the class itself was creating something called a
React component .
A component is one of the basics pieces of react and in
this project we build tremendous amount of Component
so class component is a JavaScript class that extends
React.Component which has a render method to the
class
----------------------
and then inside this class body I am going to say
state = { //Javascript object and this object is going to have
one properties inside of it name
btn_color which as a value of 'button_red'
remember ending with semi colon at the end of the line

btn_color: 'button_red'
};
//Event Handler
onClick = (event) => { // OnClick method assign this method to
and outputting it arrow function this arrow function called
within a single argument that we refer to as event and inside
the body of this function we

// Changing state
this.setState({
btn_color: 'button-grey'
})
}

render(){ // after that we will add in a method to the class

the method is going to be called render method

so inside it here we write out

return keyword and then
i am going to place which look like html syntax but it jsx
code
we will learn syntax in detail later opening and closing div
return(
<div> // inside div we write button with the same
class name

<button
onClick={this.onClick} // Same capital letter * Set
click handler */
 className={this.state.btn_color} // refrencing
button red inside of the button its read click me
>
Click Me!
</button>
</div>

Now we have React application has a component called

App, which returns a <div> element.
write another method above render which called onClick
check on top

To use this component in your application, use similar

syntax as normal HTML: < />

// Set initial state

this.state button and add some css class

)
}
}
// To use this component in your application, use similar
syntax as normal HTML: < />

ReactDOM.render( <App />, document.querySelector('#root')

)--------------------------------------------
that it's for javascript side of things
Go to HTML Panel
<div id="root">
<!-- This element's contents will be replaced with
ClassComponent. -->
</div>
Adding CSS to css panel

.button-red {
background-color:red;
color:white; #text will be white
}
.button-grey {
background-color:grey;
color:white;

}
when we click it will turn grey
that's a react app code
to change the state of react component on click

code:
class App extends React.Component {

state = {

btn_color: 'button-red'

};

onClick = (event) => {

// Set initial state

// this.setState({ stateName : new-state-value})

this.setState({

btn_color: 'button-grey'

})

render(){

return(

<div>

<button

onClick={this.onClick}

className={this.state.btn_color}

>

Click Me!

</button>

</div>

ReactDOM.render( <App />, document.querySelector('#root')

HTML
<div id ='root' />

CSS

.button-red {

background-color:red;

color:white;

.button-grey {

background-color:grey;

color:white;

1- What is React and its purpose?

See on the top
2 -What was the 'class' thing?
what was the class that we put together in line 1 of our code
we have
class App extends React.Component

this syntax is a javascript class

javascript classes are is part of what is refer to as ES2015 syntax

What was the html looking stuff?

if you look inside the render method we have something like
html its look like html but its not html it is something called JSX
a special dialect of javascript language and can be placed in
javascript code
Determines the contents of our React app
so how the component look like when it shows on the screen
or the browser
almost all of the syntax of jsx is identical with html elements

Why did we add two separate libraries React and ReactDom?

React is split into two libraries
React knows what a component is and how to make
components work together
ReactDOM knows how to take a component and make it shows
up in the DOM
How did the color changed when we clicked on the button?
Event Handler
Event handler are used to detect user interaction and respond
to it

Difference between Javascript classes and functions

What is Arrow function?

class properties
What is difference between let, const and var?
lets create an outside block which is going to be a function
and i am just going to called that oakacademy
and inside the block we are going to create an another block
using curly braces is going to have simple if statement and
inside it her lets declare a new variable the old var pi and its
going to be a number 3.4
and we call that function and outside of the if block let print
that out and variable inside this block
SO WE GOT 3.14 in a console inspite of outsdire the block
function OakAcademy() {
if(true){ var pi = 3.14;

}//declaring variable name

console.log (pi) //OUTSIDE OF IF BLOCK
}
OakAcademy() // call the function

however if we change to let instead of var and if we try the

same thing to print then we will get an refrence error because
variable pi actually is accessible from outside of the block so by
the time we are running this line here variable doenst exit any
more
so if we have variable pi up above the so lets print also that one
out if we run that and see that pi is declared up here then we
have new verison of pi whcih is 2
if you use let o const then they are block scopes so they only
exist the closet block that surrounds them and thats the same
from const as well
so if we change let to const it work the same way we hav eprint
the only difference between con and let is const is immutable
means you cannot change the data value no matter what so
using let you cange and defien the value within that ler variable
bu tif its const then you can do that
this code wont work because const is imutable and we are
trying to change the value of pi

function OakAcademy() {

const pi = 2;
if(true) {
let pi = 3.14;
console.log (pi)

}
pi=1;
 console.log (pi)
}
OakAcademy()

----------------------------------------

function OakAcademy() {
let pi = 2;
if(true) {
let pi = 3.14;
console.log (pi)

}
pi=1;
console.log (pi)
}
OakAcademy()

Learn more about JSX

Good understanding of the rule behind it so that you can
determines it behavior and predicts its behavior
code pen is great but not frequently use for professional
projects we should move to local cod editor on react projects

Lets generate a new local react project on local computer and

in order to do so we have to follow some steps

Installing / update Node JS on our local machine

to check if node is installed
open up terminal and run the command
node -v
if you see a number then its ok and if not and some error
message then you have to installed it

nodejs.org/en/download

select the installer matching your required operating system

and download the installer
once node js is installed we install react using

Generate a New Project using create react app

Create Your React App
install create-react app

Generate the Project

npm install -g create-react-app

npm- node package manager used to install tons of opensource

javascript packages on your local computer to power project
that you are putting together
install - install a package onto our computer
g- install the package globally
create-react-app -name of the package we want to install on to
the local computer

npm command has many different sub command associated

with it so here we want to install a subcommand a package
globally with -g flag and we list out the name of package
create-react-app a very popular package
create a workspace directory over desktop
and then i run a command to create react app and then the
name of a project the i want to generate here we called
firstapp

so we have node js installed on ur local machine

and using create react app command we create a new project
their are many different ways to install

ruunning one command instead of two

npx is only work on 5.2 or higher

so you can see after installing their are so many npm packages

why we have so many packages and why we use create react

app tool

6. Why You Will Need To Create a React App?

just using the create react app to generate a new react app
project
inside react project their tons of different dependencies we are
going to use in our application

so we will look after one dependencies which makes us

understand why we have so many packages and dependencies
the name of the dependencies we will focus on Babel
Quick Overview on Babel in this context why we use it and why
we included inside of React Installation and the other things
such as Webpack and webpack Dev server

as we learning javascript
we have different version of javasaacript

we have different version of ES every year with new updates

and with some poort support from 2016 to 2019
so we came up a solution for this problem a dependencies
called Babel a command line tool that can take any version of
javascript to a newer version
this is right here is a diagram when we might not use babel we
might have es2015 code inside our javascript file and then send
it down to some browser with no guarantee ES2015 support so
if we did that our code might completely failed on th euser
browser they probably wont see any content on the browser a
balnk page or something like that so with babel if we write our
code of any version of javascript babel convert into es5 version
of javscroipt code thast going to be safely executed in nay
browser
any time we generate new react project Babel is included by
default internally Bebel consist of tremendous amount of
packages

The Contents of the Projects that we just Generate

Exploring our Newly created project

open your code editor of your choice
open your project directory
so we newly created firstapp folder
inside this folder we couple of different files and folder is
automatically generated when we created so we will explore
this files and folders
src stand for surce if you open that folder you will find couple of
files over here again these are all automatically generated
when we create react app
we delete some of this files

here we write our code in src directory

public directory- contains different static FIles lets take an
example html files never changes images music you want to
serve on an application

Node_Module Directory contains all of the different

dependencies into our project which you saw in the terminal
everyone of the different folders inside of here represent
different dependencies in general we dont have to go manually
into node_module directory

package.json file- list out all of the differnent dependencies that

our project requires and some project configuration settings
everytime we going to several updates to the pacakge.json file

package-lock.json- records version of all dependencies we

installed in our project
records

read me - how to run create react project a kind of manual

gitignore file- is a refrence to the git version control system
tracking our project we made changes our project

yarn package manage alternate to npm faster then npm

Start a Project get into the project directory then

get into the newly created firsapp folder
and then i am going to run a command
npm start
you cannot run the npm start from nay where you have to
make sure that you inside the newly create project direct
created by react app command
you wil find little bit of out put scroll and you see a starting a
development server running message
which let your browser to open automatically react default
application page with localhost:3000
this page is powered by index.js

you see some error messages when you run this command
or when you try to visit your application on the browser
we now have a react application been run iside of a terminal as
long as its running in the terminal we can visit localhost 3000
and thats the address of our app
stop the react app using command cntrl c

you might get error sometimes

stop the other server or running the server on the other port
number
instead of localhost run your server on local network IP
Functional Components
we are going to make a couple of changes to our project
inside of my cod editor OPEN UP get into the src directory
Remember that our goal is to understand how jsx works
we delete all the codes inside of this files and we are going to
create a new files which we are going to experiment with and
that way we start from scratch to get a better understanding
how jsx works
so after highlighting every files inside the src directory and
delete all of it
now the scr directory is empty i am going to
create a new file inside the src called index.js
the name of the file is indeed very special make sure you name
the file index.js
so when we create a new file and flip get to the browser
our react application is running in local host with port 3000
if we refresh the page so now we have a completely blank page
so now we have to figure it out how to use React?
to get to appear some content on the screen using react
and we do that by playing jsx with certain rules
You need to know the rules to breakup
or you need to break the rules to learn
It's a three steps process basically and we are going to follow
one two three to show up content to show up on the screen
this is what you have to do
we begin right now with Step Number 1 import
we have to import react and react dom library
and in order to do so i am going to write a code
import React from 'react';
imort ReactDOM from 'react-dom'
make sure you have a capital DOM in your import statement
just we have it here
so now we going to talk about little
what import statement s are and why we have to use it here
in codepen online tool
when we create a project we didn't have to write an import
statement
we just added React and ReactDOM to our project
and now we are using it with create react app and we are using
a bundler system called web pack
we will talk about what webpack is and why we are using it
later
but right now all we need to understand is that every file we
are going to create inside our project is essentially all tiny little
universe
any code we write inside this files is not going to be
automatically shared or made available to other files or sent
vice versa so
in another words we want to gain access any libraries or any
code inside that we write our project we have to write import
system like the one we use in index.js file
lets look diagram

first we use import keywords and those javascript that we want

to reach out for dependency or other file inside our project
so import statement can be use to import either dependencies
or packages that we install to our project
such as React and ReactDOM

the second word is going to React which is name of the

variable to take all the code from the dependencies or the file
and is assign to
essentially what going on here we are going to reach out the
react dependencies
we take all the code inside that dependencies and then
assigned it to this react variable
one thing we aware of this variable right here is not have to be
exactly React either you can name it something like MyReaact
or anything else we want here we are following a naming
convention of variable name along within the name of the
library itself so that nobody get confused
library name is React we assign it to variable called React
the name of library is react-dom we can assign it to variable
called ReactDOM

the Next step is from which is keyword to pull a code from a file
or a dependencies and then finally we will list either it the
dependencies we want to import from or a path to the file
which we want to import
in case we are importing a file that we created ourselves

so Now here we list out dependencies right here what happen

is javascript going to say ok ill see you want react its going to
inside and look into node module directory and its goingto try
to find a folder inside of here is called React so if we scroll
down into node module directory we wil find a folder called
React so when we say import React from React that means we
are tellin that go and find a react folder inside the node module
and get all the codes from react and the samthibng with react-
dom you wil find react dom folder is riht here so like this we
want to import any of this folder inside our node modules
directory
we can also install module inot tour node module directory and
import those as well but for time being we are importing tis
dependencies and we are only care about

so Next Step number 2 is

we are going to focusing on creating a React Component but
before we do that i do like to know you about what Exactly
React Component is
Diagram

React component is a Function or Class Component

in codepen when we creating a click button we saw an example
of a class based component and we also create them as a
function the purposes of component is either a function or class
is to produce HTML that is going to show the user and the
secondary purposes is to handles feedback from the user
for example anytime the user clicks types or drags any type of
event like that so in order to produce content HTML to show
the user we have to write some amount of JSX
JSX that stuff is going to look like HTML
and in order to handle feedback from the user
we have to write some eventhandlers in order to handle
feedback from the user
we will learn those steps of event handling later
her we just focusing on to show up the content to the User
and using small amount of JSX
so let flip back to Over index.js file

here we create a new functional component

const App =function() {
return (
<div>Hi there!<?div>
)
}
here we going to say const APP isequal to function and inside of
it here i am going to return a div that has a text Hi there
so above code is function based component
this is a component that is using a function with the function
keyword
so very frequently you will see this rewritten in ES2015 arrow
function it will look like that rather than function key word that
we put in the arrow which is equal and then greater sighn on
the other side of parenthesis
inside the functional component we return lillte bit of JSX right
here

const App = () => { >#functional component

return (
<div>Hi there!<?div
)
}
ReactDOM.render(
<App />
document.querySelector('#root')

)
so here we got function based component together and sholw
it on the screen in our browser
here we take pour app component we just created and put into
JSX tags essentially look like HTML tags and comma and second
argument is a reference to the DOM element that already exist
inside our HTML file

inside our public directory we have index.html file anytime

someone goes localhost:3000 they get this html file so inside
this html file you can scroll down to the body and inside you
see that their is a div with an ID of root
so by convention in a create react app generation we take our
component and render it inside of this div with id of root so
essentially we need to get a reference this div with id root and
then we going to pass a second argument to react.DOM render
call back over here inside our index.js file so to that i am going
to write our document.querySelector and i passes a string with
pound sighn root
that call right there will get a refrence withj an ID of root
this is built in native function that is available in al browsers so
we dont havre to impor tanything or do anything like that in
order toi use it
thats the three step we need to follow to appearthe content in
our browser
lets sve the file
flip over the browser
localhost:300
hi there is appear on the screen

In Short steps are

import React and ReactDOM
create react component
and take that component
and show them on the screen with
React.DOM render library

------------------------------------------------------------------------------------
Learn more about JSX How JSX Works? and How we interact
with it?
So in the last section, we finally got some content to appear on
the screen of our browser.Ah, but that's just not good enough,
is it?Oh, no way, so.
Stay tuned, because now that we've got a working application
put together, we're going to start to
focus on the JSX that we had written into our app component in
the index as file.
First, I just want to explain what exactly JSX is.
You've had a little bit of an introduction, but I want you to know
that when you look at this stuff,
as I've said many times, it looks like HTML, but in reality it's not.
So I want to give you a quick reminder about something that
we spoke about just a little bit ago, so
remember that I told you that when we write ES2015 code,
which you and I like to do as developers, we do not send it
directly into a user's browser because their browser might not
have E 2015 or 2016 or 2017 fully supported.
So in order to get around that, we made use of the dependency
called Bable.
Now we made use of Bable to take that ES 2015, 2016 or
whatever code and convert it down to normal ES fiveJavaScript.
All right.
We got that out the way now before JSX
actually gets sent down to a user's browser.
It gets converted into normal looking JavaScript code.
And you might be immediately curious as to how do we take
something that looks like this right here

and turn it into an equivalent normal JavaScript.

Well, my friends be curious no more, because that's why we
use this little brilliant tool called Babel.
Now I'm going to open up a new browser tab and I'm going to
navigate to the baby's homepage, which

is at https://babeljs.io/
Oh, right on here.
And we're going to find the right out button right here at the
very top.
So now on this interface, we can write a certain amount of code
here on the left hand side.
Now, this can be E as 2015 2016 code that contains JSX as well.

Then babies will automatically convert that code into normal

ES5 JavaScript and show it on the right hand side.
So really quickly, I want you to have a look at the left hand
panel over here and find the preset section
and just make sure that the react checkbox is checked.
All right, so then once we're sure that is checked, I'm going to
go back over to my index.js file, and I'm going to copy the entire
app component that we just put together.

And I'm going to paste it back over here on the left hand side.
All right, so as you can see, that div right there and that kind of
jazz looking thing actually
gets turned into JavaScript function call.
Actually, it's a call to react, not create element.
So the first argument is a string that indicates that type of
element that we want to create.
And then the third element.
Is the text that we want to show inside of that div.
So every time that you see JSX the actual writing gets turned
into this big function called right here.

So you might be curious.

If this JSX gets turned into a function call, why don't we just
write it out, write out a lot of function calls?
Well, I think the answer is really simple.
Let's picture, if you will, that we have a little bit more of a
complicated component than what you might see right here.
So let's say, for example, maybe we have div that contains a ul
element inside of it and then the other elements contain a
couple of li

So I'm going to put a couple of Eli and maybe those I have texts
of their own like Hi.

Now, when we take a look at this thing and it's JSM form, it's
pretty easy to tell what's going on
if we're familiar with how HTML works.
Now, you can take a glance at this over here and understand
that this app component is going to create
a device that has a ul and three li
Now, also, you can very quickly see what text those allies are
going to contain.
However, if you look at the converted results over here on the
right hand side, it's a lot harder
to understand the exact structure and content of what this
component is.
So the entire purpose of JSX is to just be able to allow us to
write out these different function calls

that normally occur behind the scenes for us in a much easier

to understand, much easier to read, and that we will get a
better sense of what's going on.
Now, when you make use of react, it's not required to use JSX,
but it's not just me.
I'd say that most everybody I highly recommend it because if
you try to write out all these different
function calls, you're going to very quickly write out some code
that's very challenging and difficult to maintain.
OK, I'm glad I got that off my chest, thanks for listening.
So let's take a pause here and I want to see you in that next
section.
--------------------------------------------------------
Code With Mosh - Mastering React For Frontend Developer
React is a Javascript library for building fast and attractive user
interfaces
it was developed by Facebook in 2011 and currently it is the
most popular javascript library for building user interfaces

if you check in Google Trend React is dominating in the space of

libraries framework for building user interfaces
the other two player are Angular and View

Components - it is essentially a piece of User Interfaces

so when building application with React we build a bunch of
Independent Isolated and reusable components and then
compose them to build complex user interfaces

App - Every React Applications has at least one component

which refer to as the root component this component
represent the entire application and contains other child
component so every React application is essentially a tree of
component
if you worked with Angular 2 or Higher you sound familiar

lets imagine we want to build an Application like Twitter you

can split this pages into component
Navbar | Profile | Trends | Feed
these are the representation of components of Tree
so on top we have
APP
navbar profile Trends Feed
Tweet
Like
so this components can be used in different pages even on the
different application
as you can understand now each component is a separate UI
build as isolated components and later composed in one single
complex UI
Implementation of Components :in terms implement is done
as a javascript class that has some state and a render method
class Tweet {
state = {} // the state here is the data that we want to
display when the component is rendered
reder () { // the render method is responsible to describing
how the UI look like

}
}

The Output of the render Method is the React element which is

simple plain Javascript Object React Element maps with DOM
Element its not real DOM Element its a plain Javascript object
represent DOM element in memory so React keep the light
weight representation of the DOM in memory which refer to as
Virtual DOM unlike the browser or the real DOM this virtual
DOM is Cheap to create
when we change the state of component we get a new React
element
Rect will compare tbhis element and its children with previous
its figure whati s hchanged

Routing

Calling Http request

--------------------------------------------------------------
Setting up development Environment for React
Setup need to install node js to use npm (node package
manager ) to install third parties libraries
download installer from node.js
npm i -g [email protected]

Code Editor- Visual Studio Code

Extension : for React app
simple React snippets - by Berk Howland
Reload vs code

Prettier : - Code formatter by peterson

preference -settings- right user settings
add
"editor.formatOnSave":true,
theme setting mirage

Create first React app

create-react-app create-app
this will install react and al the third party libraries
install lightweight development server
webpack for bundling our files
babel for compiling javascript code

you don't need to create any configuration when you create

using create react app command
all the configurations is done by default

for custom config you can use

npm run eject command

so now we have full working react app after running create

react app command and the name we give here create react
app you can give any name

enter into newly created folder react-app

and run this command
npm start to fire development server
now open this folder in vscode