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

In Summary:

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