⚛️

What is React?

A JavaScript library by Meta for building user interfaces. Uses a component-based approach and Virtual DOM for fast, reusable UI.

Meta (Facebook)2013v18+MIT License

🔄 How React Works

🧩 Component — Core Concept

React builds UI by breaking it into small, reusable pieces called Components. Each component manages its own state, receives data via Props, and returns JSX (HTML-like syntax) to render on screen.

// Example Component
function Button({ label, onClick }) {
return (
<button onClick={onClick}>
{label}
</button>
)
}

ComponentReusable UI block (function that returns JSX)

PropsData passed from parent to child (read-only)

StateInternal data that triggers re-render when changed

JSXHTML-like syntax in JavaScript (compiled to React.createElement)

Virtual DOMIn-memory copy of DOM — React diffs it before updating real DOM

🪝 React Hooks (Most Important)

📦

useState

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

const [count, setCount] = useState(0)

⚡

useEffect

Runs side effects after render: fetch API, subscribe to events, set timers.

useEffect(() => { fetchData() }, [id])

🌐

useContext

Access shared data (theme, auth, language) without prop drilling through every component.

const user = useContext(AuthContext)

🎯

useRef

Reference a DOM element or store mutable value without triggering re-render.

const inputRef = useRef(null)

🚀

useMemo

Cache expensive calculated values. Recalculates only when dependencies change.

const total = useMemo(() => calcTotal(items), [items])

🔁

useCallback

Cache a function reference. Prevents child components from re-rendering unnecessarily.

const handleClick = useCallback(() => {}, [deps])

♻️ Component Lifecycle

🌱

Mount

Component appears in DOM for the first time. useEffect with [] runs once here.

🔄

Update

State or Props change → React diffs Virtual DOM → updates only changed parts.

🍂

Unmount

Component removed from DOM. useEffect cleanup function runs (clear timers, unsubscribe).

🌐 React Ecosystem

▲

Next.js

React framework for SSR/SSG, file-based routing, API routes.

🗺️

React Router

Client-side routing for single-page apps (SPA).

🔄

Redux / Zustand

Global state management for complex apps.

⚡

React Query / SWR

Data fetching, caching, background sync with API.

🎨

Tailwind / MUI

UI styling libraries for beautiful components.

🚀

Vite / CRA

Build tools and dev server for React projects.

Want to build with React? ⚛️

We develop React web applications with Next.js, TypeScript, and modern best practices.

← Back to LearnContact Us

Address

TNGroup soft thailand Mueang District, Maha Sarakham

Phone

093-3381817
098-7799609

Email

Tngroupsoft@gmail.com