Today I Learned Introduction of React...

React is a JavaScript library used for building user interfaces (UIs), especially for single-page applications where you need a fast and interactive user experience. It was developed by Facebook and is widely used in web development.

Key Features of React:

• Component-Based: UIs are built using components, which are reusable pieces of code that define how a part of the interface should look and behave.
• JSX Syntax: Uses a special syntax called JSX, which allows you to write HTML-like code inside JavaScript.
• Virtual DOM: React uses a virtual DOM to optimize rendering. Instead of updating the real DOM directly, it updates a lightweight copy first, then efficiently updates only the parts that changed.
• Unidirectional Data Flow: Data in React flows in one direction, making it easier to understand and debug applications.
• Hooks: React supports hooks, which let you use state and other React features in functional components.

Example of a React Component (JSX):

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Welcome;

Where React Is Used:

• Web applications (e.g., Facebook, Instagram, Airbnb)
• Mobile apps (via React Native)
• Desktop apps (using frameworks like Electron)

---

---

Use Create React App (Local Setup)

Run this in your terminal (you need Node.js installed):

npx create-react-app my-app
cd my-app
npm start

It will open a React app in your browser at http://localhost:3000

---

Understand the File Structure

After setup, you'll see something like:

my-app/
├── public/
├── src/
│   ├── App.js       ← Your main component
│   └── index.js     ← App starts here

---

Edit Your First Component

Open App.js and change this:

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

Save the file and your browser will update automatically!

---

Learn Key React Concepts

Start learning these step by step:

• Components
• Props
• State
• Events (like clicks)
• Hooks (useState, useEffect)

---

---

What is JavaScript DOM (JS DOM)?

• It’s the browser's built-in way to access and change web page elements.

• Uses methods like:

  • document.getElementById()
  • document.createElement()
  • element.innerHTML = '...'

Example:

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

<script>
  const root = document.getElementById('root');
  root.innerHTML = '<h1>Hello from JS DOM</h1>';
</script>

---

What is React DOM?

• It’s React’s way of updating the DOM efficiently.
• React creates a Virtual DOM in memory, compares it with the real DOM, and updates only the parts that changed.
• Uses ReactDOM.render() to show components on the page.

Example:

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello from React DOM</h1>;
}

ReactDOM.render(<App />, document.getElementById('root'));

---

Comparison Table

Feature	JavaScript DOM (JS DOM)	React DOM
Type	Native browser API	React library's rendering method
Update Method	Manual DOM manipulation	Declarative rendering with components
Speed/Performance	Slower with many updates	Faster using Virtual DOM diffing
Code Reusability	Low	High (reusable components)
Structure Management	Can become messy in big apps	Organized through component hierarchy
Learning Curve	Easier to start	Needs to learn JSX, components, etc.

---

In Summary:

• JS DOM: You control every change manually.
• React DOM: React controls the DOM for you and optimizes updates.