React Js

 React is a JavaScript library for building user interfaces.

 React is used to build single-page applications.
 React allows us to create reusable UI components.
 React, sometimes referred to as a frontend JavaScript framework, is a
JavaScript library created by Facebook.
 React is a tool for building UI components.
 the entire react application can be modeled as a set of independent isolated and reusable
components
 these complements are put together to design complex layouts.
 In other words you can see components are the building blocks of a real application.

Every react app has at least one component which would we refer to the app component.
React Js

This app component represents a react app and all the other components are placed inside it.
This results in a true like content hierarchy.

Component hierarchy for a current webpage

React Js
React Js

React is used to design views

 react is a library which means it has a very specific purpose and that is to define user
interfaces also called as views and this is where it gets more amazing.

 It gives you absolute control through application.

 It just takes care of the view and rest everything is left for you to decide.

 You can plan the architecture decide which libraries to use for what functionalities exec
tracks etc.

 You can even add react in parts of your existing web application because it's just for you
on a doesn’t disturbs existing technology stack and this is one of the biggest difference
between angular and react

 angular is a framework and it comes with out-of-the-box solutions for routing handling
network request etc So you don't have control at the that level.
React Js

2. ReactJS - Understanding SPAs and MPAs

React Js
React Js

3. ReactJS - Creating our First React App

Search create react app in chrome ahe install as per github intsructions provided

 So in this case you will be using create react app only once to create our project and we
would notneed to run it afterwards.
 So that's why we're using npX over here.
 So first let's install node Js so then simply download and install

Cmd=>
React Js

node -v

 So this gives the version of node installed installing the system so this just confirms
whether node install started properly or not.

npm -v
 So this returns the version of npm install along with node.
 So again this verifies whether npm was installed on the system or not.
 So as you can see I'm getting versions
 That means it's installed properly on my system.

 Now we can run and create react up commands.

npx

npx create-react-app my-app

(npx is a package runner tool that comes with npm 5.2+ and higher, see instructions for older
npm versions)

 So do running.
 First we need to go to the project directly.
 So CDE followed by whatever was your project name.
React Js

So if I do dir it gives me lists of all the files inside the directory.

Where ever you got this file package.json then run command
>npm start


So what does command does is
it starts a local server unloads the default apllication created by create react app
in the browser.
So if I go back to the Chrome on as you can see create react app created this default application
for us

4. ReactJS - Project Structure created by CRA

React Js

open the project in the vs code

first react app followed by a path

So this is the project structure created by create react app for our ReACT application.

Let's talk about this first directory node modules so it contains all the dependencies or packages
which
are installed by create react app the build and run your react application.
React Js

Then we've got this public folder in here you've got the index html file.
React Js

So this is the html file which is used in single page applications to load all the remaining content
dynamically.

Then you've got fav item for your browsers

then you've got a manifest file so inside this manifest
file they've got an object.
So this object and these details for application if you to link up BW eight or progressive that
application

then you've got robots.txt file.

You can also have your site maps here.
So anything which is going to be directly used inside the yout html or index.html file can be put
here.

Then you've got this package-lock.json files that contains the details of all the different
dependensies installed along with their specific versions.

Similarly you've got another file package.json that contain some more details about your
application. So the name of the application , version the in dependencies with minimum versions
some scripts browserless.
so which browsers to support in production which browsers to support in development et c et c.

 final directly src or the source directory.

React Js

So this is where we write all our code.

Opened index.js and index.html

<div id="root"></div>

So index.js file it mounts an entire application inside that root div or the div with id root.

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

it is using this library ReactDom this reactdom library is used to manipulate the
browser dom
so this line is it's mounting are application component in the
division with Id root

app component =>

opened app.js file
got a file with a function inside that function.
You've got a return statement and inside that written statement html code .