React Js:

React is a JavaScript library used for building user interfaces. Main use is to create reusable UI components. We
create once component and we reuse them multiple times.

What is DOM?

When you develop a static website using HTML,. However, to make the website dynamic and interactive, JavaScript is
commonly used.

JavaScript provides the DOM (Document Object Model) API, which represents the structured tree-like representation
of the HTML elements on the page. When the browser loads a web page, it parses the HTML and constructs the DOM
tree based on the elements .

With the DOM API, you can access and manipulate the DOM elements using JavaScript. This allows you to
dynamically change the content, modify styles , add or remove the elements and respond according to the user
interactions.

DOM Manipulation:

1. Selecting DOM Elements: You can use the DOM API (e.g., methods like getElementById, querySelector, etc.)
to select specific elements in the DOM based on their IDs, classes, tags, or other attributes. Once you have a
reference to a DOM element, you can further manipulate it or retrieve its properties and contents.

2. Updating DOM Elements: When you want to update a DOM element, you can modify its properties,
attributes, or content using JavaScript. This update process is generally lightweight because you only need to
update specific elements or properties instead of the entire DOM tree.

3. Re-rendering: Re-rendering refers to the process of updating the entire DOM tree or a significant part of it
due to changes in the applications, so frequent re-rendering can lead to performance issues. This is because
updating the entire DOM can be time-consuming, especially when dealing with a large number of elements.
So libraries like React virtual DOM to optimize rendering and reduce unnecessary updates.

Reacts uses virtual DOM acts as a copy of the Original DOM. Virtual DOM is created when we use the react library
components in your application.

React Structure:

Packages.json File:

These file contains all the meta data about the react applications like app name, app version, dependencies , script
When External packages or libraries are installed then "dependencies" section is store information and they are
stored In the node modules These dependencies are necessary to run the application any problem is occurred then
application not run.

The "scripts" section is enables developers to execute custom scripts using the npm run or yarn run command.

These scripts serve different purposes like starting a development server, building the project, running tests, or
performing other custom actions. When we use these command that particular script will be executed so it make
easy to execute the code.
package.json: The package.json file is manually created and edited by developers. It contains metadata about the
project, such as the project name, version, author, license, and most importantly, the list of dependencies.

package-lock.json: The package-lock.json file is automatically generated by npm when dependencies are installed or
updated. It serves as a lock file that records the exact versions of all the installed dependencies

NODE MODULES:

The "node modules" directory contains the installed packages In your project. When you run npm install or yarn
install, the package manager fetches the specified packages from the npm registry or a private registry and stores
them in the "node_modules" directory.

We cannot manually modifies bcz package manger will handle that we cannot handle so if we modified it lead to
error.

PUBLIC FOLDER:

This folder contains the static assets and the HTML file.

Static assets like images, fonts, icons etc.

HTML file is used for entry point for your React application. These file will load first in the browser and display the
content

SRC FILE:

The "src" folder contains the source code and it is a main folder of your application it contains the JavaScript, CSS,
and other files.

We can stores the images in both public and src folder but static images are in public folder and dynamic changes
images are stored in the src folder.

App.js defines the main component structure and behaviour, while index.js connects the React code to the HTML
page and renders the root component into the DOM.

Webpack is a bundler widely used in web development , it is used to bundle the multiple js files or other files into a
single js file. So it decrease the number of http requests and increase the performance.

MANIFEST FILE:

The manifest file used to specify metadata about the application, such as the name, short name, description, author,
and version. These meta data help browsers to understand and present the application correctly the manifest file lets
you specify a set of icons and images on different screen sizes.

NPM:

NPM (Node Package Manager) is a repository of thousands of libraries and packages it is used for developers to use
in their applications. With the help of the npm command-line tool, developers can easily install these packages from
the NPM registry and include them as dependencies in their projects.
import React from 'react';

import ReactDOM from 'react-dom';

React Module is a used to create React components. It provides the necessary functions and utilities to work with
components. React also supports JSX syntax, which is a JavaScript extension that enables us to write HTML-like code
within JavaScript.

ReactDOM is another important module that focuses on rendering and updating React components in the browser's
DOM. It provides functions like render, hydrate, and createPortal for interacting with the DOM and handling
component rendering.

Creating React components:

 Components are created using functions. A component is defined as a function, and the name of the function
becomes the name of the component.

 The component body is defined using JSX, which is a syntax extension for JavaScript. JSX allows us to write
HTML-like code within JavaScript, making it easier to define the structure and content of the component.

 Components can be reused because they are functions. Once a component is defined, it can be used multiple
times throughout the application.

 The export statement is used to make the component available for use in other files. By exporting the
component, it can be imported and used in other parts of the application.

render() method:

 The render() method is used to display the component on the screen by rendering it into the DOM.

 we use the ReactDOM.render() function to invoke the render() method. It takes two arguments: the
component to render and the DOM element where the component will be rendered.

ReactDom.render(<BlockComponent></BlockComponent> , root);

JSX:

JSX is a syntax extension for JavaScript used to write HTML-like code in JavaScript files.

In the past, web development involved separate files for HTML, CSS, and JavaScript, but as webpages became more
interactive, the need arose to include content and logic together.

React introduced JSX to combine content and logic in a single file, making it easier to build reusable and interactive
components.

When creating a component using a function in React, directly copying and pasting HTML code will result in an error
due to certain rules.

One of those rules is that the component's code must be wrapped in a single parent tag to return multiple elements
from the component.

To fulfill this requirement, you can use a fragment represented by <></>. Or <react.fragment> Fragments allow you
to group multiple elements without introducing an additional DOM element.

By using the fragment syntax, you can specify the entire component code within a single parent tag, enabling the
component to return multiple elements.
We can add the JavaScript in the jsx syntax by using the curly braces.

Let a=5;

<h2>number is {a}</h2>

Jsx uses the camelCase letters, it automatically convert into camelCase letter.

Apply the inline style ---------- style={{ background:"red"}}

const ab={

theme:{

background:'red',

color:"blue"

} // <div class="card" style={ab.theme}>

{ {} } --- outter bracket is include the jsx sytax and outter bracket object create the property.

COMPONENT:

React build application with the help of components that component may be button , img or large block of ui design
etc.

Each react component contains the markup code written in the jsx syntax.

Component encapsulate the logic and data

Two types of components

Function component:

Function component is way to create the component

function MyFunctionalComponent(props) {

return (

<div>

<h1>Hello, {props.name}!</h1>

<p>{props.message}</p>

</div>

);

}
Function name is component name and props is the parameter that is act as a object that holds the properties
passed though the function.

Function body is containing the jsx code that represents that represent the UI component. Div is component.

Call the Component directly with the help of FunctionName() or <FUnctionName> Tag name.

Object contains the State and Properties The state means data stored variables.

It is a stateless component and They don’t have any Lifecycle methods. that means It doesn’t have any state that
means it only receive data as input and return the jsx syntax.

The Main use is creating the simple components.

Wit the help of React Hooks we achieve the State and Lifecycle methods.

Class component:

class MyClassComponent extends React.Component {

render() {

return <h1>Hello, {this.props.name}!</h1>;

React.Component is a base class provided by the React library. It serves as the parent class for creating class
components in React. When you define a new class component, you extend React.Component to inherit its
functionality and create your own custom component.

Class Component contains the Own State and Lifecycle Methods

Methods:

 render(): This method is a required method in a class component. It returns the JSX (JavaScript XML)
elements that make up the component's UI. The render() method is automatically called by React when the
component needs to be rendered.

Lifecycle Methods:

 componentDidMount(): This method is called immediately after the component is mounted (inserted into
the DOM). It is commonly used for initialization tasks and side effects that need to happen once the
component is in the DOM.

 componentDidUpdate(prevProps, prevState): This method is called immediately after the component

 componentWillUnmount(): This method is called immediately before the component is unmounted

Properties:

 props: The props object holds the properties passed to the component from its parent component. It allows
you to pass data from a parent component to a child component.
 state: The state object holds the internal state of the component. It represents the data specific to the
component and can be updated using the setState() method.

 setState(): This method is used to update the component's state. It accepts an object representing the new
state values. When the state is updated, React re-renders the component with the new state.