Learn REACT with Real Code Examples

React lets you build interactive UIs using a component-based architecture.

It uses a virtual DOM to optimize rendering performance.

Supports declarative programming and one-way data flow.

Declarative UI design

State management with useState, useReducer

Side effects handling with useEffect

Context API for global state

Integration with routing libraries (React Router)

JSX: HTML-like syntax in JavaScript

Components: functional and class-based

Props: data passed from parent to child

State: local component data

Hooks: useState, useEffect, useContext, useReducer

src/index.js - entry point

src/App.js - main component

src/components/ - reusable UI components

src/assets/ - images, fonts, styles

public/ - static files and HTML template

Create reusable components

Manage state using hooks or Context

Handle events using synthetic events

Update UI declaratively through state changes

Use routing libraries for SPA navigation

Beginner: static UI with components

Intermediate: dynamic state and event handling

Advanced: Hooks, context, and lifecycle methods

Expert: Integration with Redux, Router, API fetching

Community: contributing to open-source React libraries

More declarative than plain JavaScript DOM manipulation

Component-based unlike jQuery

Faster UI updates via virtual DOM

Not a full framework, flexible with other libraries

Easier maintenance for large-scale apps

2013 – Initial release by Facebook

2015 – React 0.14 functional components

2016 – React Fiber architecture announced

2018 – Hooks introduced

2025 – Continuous improvements with React 21+ features

JSX: JavaScript XML syntax

Component: reusable UI building block

State: local component data

Props: data passed to components

Hook: function to use React features in functional components