UNIT-2 FULL STACK AMT
1. Introduction to React and its Core Concepts:-
React is a JavaScript library (not a framework!) created by Meta (Facebook)
for building interactive, efficient, and scalable UIs for web and mobile apps.
Core Concepts:-
• Component-Based Architecture: Break the UI into modular, reusable
components like NavBar, Footer, Card, etc.
• Declarative UI: Instead of telling how to do it (imperative), you tell what
the UI should look like.
• Unidirectional Data Flow (One-Way Binding): Data moves from parent
to child, never the other way around.
• JSX (JavaScript XML): Lets you write HTML-like code in JavaScript.
• Virtual DOM: React creates a virtual copy of the real DOM to make
updates efficient.
Real-life Analogy:-
Think of React like a Lego set. Each brick is a component. If you want to change
a door (component), you don't rebuild the house (entire UI)—you just replace
that piece.
2. Setting up a React Project with Create React App (CRA)
CRA is a tool that gives you a starter boilerplate for a React project with
everything pre-configured.
Install Node.js:-
• Download from: https://nodejs.org/
Steps to Create a Project:-
npx create-react-app my-app
cd my-app
npm start
This spins up a local dev server and opens your app at http://localhost:3000.
What CRA Does for You:-
• Sets up React & ReactDOM
• Adds Babel (JS compiler) & Webpack (bundler)
• Includes a development server
Analogy:-
CRA is like a cake mix box—you get all the ingredients ready to go, just add
code and run!
3. Virtual DOM:-
The Virtual DOM is a lightweight JavaScript object copy of the Real DOM.
How It Works:
1. React keeps a virtual representation of the UI.
2. On UI change, React creates a new virtual DOM.
3. It compares new vs old using Diffing Algorithm.
4. Only the changed parts are updated in the real DOM using
Reconciliation.
Code Example:-
const element = <h1>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById('root'));
Real-Life Analogy:-
Editing a Word doc: you only change the paragraph, not print the whole file
again.
4. React Element:-
A React Element is the smallest building block in React.
JSX:
const heading = <h1>Hello React</h1>;
Behind the Scenes (No JSX):
const heading = React.createElement('h1', null, 'Hello React');
• React Elements are plain JS objects.
• They are immutable (don’t change once created).
Analogy:
A React Element is like a single Lego block—not useful on its own, but great
when combined.
5. ReactDOM:-
ReactDOM is the bridge between React and the actual browser DOM.
Example:-
ReactDOM.render(<App />, document.getElementById('root'));
• <App /> is your component.
• #root is a div in your HTML where React renders everything.
Analogy:-
ReactDOM is like a projector that displays slides (your components) onto the
screen (DOM).
6. Constructing Elements with Data:-
React lets you render elements using variables and expressions inside JSX
using {}.
Example:
const user = "Aditya";
const greeting = <h2>Hello, {user}!</h2>;
Real-Life Analogy:
Imagine generating a certificate with your name—same layout, different data
per person.
7. React Components:-
Components are like JavaScript functions or classes that return JSX UI.
A. Functional Component:-
function Welcome(props) {
return <h1>Welcome, {props.name}</h1>;
}
B. Class Component:-
class Welcome extends React.Component {
render() {
return <h1>Welcome, {this.props.name}</h1>;
}
}
Why Components?
• Organized, reusable code
• Divide & conquer UI
• Easier testing
Real-life Analogy:-
Each app on your phone (Calculator, Weather, Clock) is an independent
component.
8. DOM Rendering:-
DOM rendering is how React transforms your code into real HTML elements
on the web page.
Example:-
ReactDOM.render(<Header />, document.getElementById('header'));
How It Works:-
1. JSX → React Element
2. React Element → Virtual DOM
3. Virtual DOM → Real DOM
Real-life Analogy:-
Like a smart signboard that only changes the departure time, not the entire
screen.
9. React with JSX:-
JSX allows writing HTML-like code inside JavaScript—makes code readable and
intuitive.
JSX Example:-
const message = <h1 className="msg">Hello JSX!</h1>;
Use className not class, because class is a reserved JS keyword.
Benefits:-
• Clean and simple syntax
• Easier to visualize UI
Analogy:-
JSX is like using a rich text editor instead of writing raw HTML manually.
10. React Element as JSX:-
JSX is just syntactic sugar—under the hood, React converts JSX into
React.createElement() calls.
JSX:-
const msg = <p>Welcome!</p>;
JS Equivalent:-
const msg = React.createElement('p', null, 'Welcome!');
Analogy:-
JSX is like using emojis on a keyboard—it's easier than typing :smile: manually.
