Introduction to React

React is a JavaScript library used for building user interfaces, especially single-page applications where UI updates happen frequently.

It was developed by Facebook and is widely used in modern web development for building fast and reusable UI components.

What is React?

React is a component-based library that lets developers build encapsulated UI elements that manage their own state.

These components can be reused across the application, making development more efficient and organized.

Why Use React?

React makes it easier to build dynamic and interactive web applications with better performance.

It updates only the parts of the page that change using a virtual representation of the DOM.

What is a Component?

A component is a reusable piece of UI in React that can be as small as a button or as large as a full page.

Components can be created using functions or classes, though functional components are now the standard.

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

JSX in React

JSX is a syntax extension that allows you to write HTML-like code inside JavaScript.

It makes React code easier to read and write by combining UI structure with logic.

const element = <h1>Welcome to React</h1>;

Rendering Elements

React renders UI elements to the DOM using a root element in your HTML file.

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello World</h1>);

Props in React

Props are inputs to components that allow data to be passed from parent to child components.

They make components dynamic and reusable.

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

State in React

State is a built-in object that allows components to store and manage data that can change over time.

When state changes, React automatically re-renders the component.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Event Handling in React

React handles events similarly to JavaScript but uses camelCase syntax.

You pass functions directly as event handlers.

function Button() {
  function handleClick() {
    alert('Button clicked');
  }

  return <button onClick={handleClick}>Click Me</button>;
}

Virtual DOM

React uses a Virtual DOM to optimize updates and improve performance.

It compares changes and updates only the necessary parts of the real DOM.

Summary

React is a powerful library for building modern web interfaces using components.

Understanding components, JSX, props, and state is the first step to mastering React development.