Skip to content

React — UI Library Training

Last reviewed: 2026-05-29

React is a JavaScript library for building user interfaces, developed and maintained by Meta (Facebook). It's the most popular frontend framework/library for building dynamic, component-based web applications.

Overview

React's core philosophy: component-based architecture where UI is composed of self-contained, reusable components. Each component manages its own state and renders declarative UI.

Key concepts: JSX, Virtual DOM, props, state, hooks, lifecycle, component composition, one-way data flow.

Training Content

Core Materials

  • JSX syntax and expression embedding
  • Functional components vs class components
  • Props: passing data to child components
  • State: useState hook, state immutability
  • Effects: useEffect for side effects (API calls, subscriptions)
  • Event handling in React
  • Conditional rendering and lists (keys)
  • Forms and controlled components
  • Context API: useContext for global state
  • Custom hooks: extracting reusable logic
  • React Router for SPA navigation
  • react-sidebar.zip (66.6 MB) — Full React project: a responsive sidebar navigation component with dynamic routes, toggle functionality, and icon support. Good reference for layout components.

React Native

See NATIVE/ subfolder for mobile development:

  • React Native Guide.pdf (12.3 MB) — Comprehensive PDF guide for building mobile apps with React Native: components, navigation, native APIs, performance.

Core Concepts

Components

// Functional component with props
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Hooks

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

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

Data Flow

  • Props — Parent → child (read-only)
  • State — Component-local mutable data (useState)
  • Context — Shared state across component tree (useContext)
  • External state — Redux, Zustand, Jotai for complex state management
  • Server state — React Query / TanStack Query, SWR

Key Libraries

Library Purpose
React Router Client-side routing (SPA)
React Query / TanStack Query Server state, caching, fetching
Zustand / Redux Global state management
React Hook Form Form handling and validation
Tailwind CSS Utility-first CSS framework
Next.js React meta-framework (SSR, SSG)
Vite Fast build tool for React projects

Resources