#React
30 articles tagged with #React
Build a To-Do List App in React
A comprehensive guide to build a to-do list app in react — written for learners at every level.
Project: Build a Full-Stack To-Do App with React, Node.js and MongoDB
A full-stack to-do app is the perfect first MERN project — it covers every concept you'll use in production: REST APIs, database CRUD operations, JWT authentication, and deploying a frontend and backend separately. Build it once, understand the full stack.
React Hooks Explained: useState, useEffect, and Beyond
React Hooks replaced class components and changed how React developers think about state and side effects. This guide explains useState, useEffect, useContext, useRef, and custom hooks clearly, with practical examples for each.
Learn React Through Game Development: Build a Chess Clock
A chess clock is the perfect React project — it's small enough to finish in an afternoon but teaches useState, useEffect, timer management, and conditional rendering in a context that makes every concept feel purposeful. No boring counter apps.
Learn React Through Building a Gaming Leaderboard
Gaming leaderboards are the perfect React learning project: they need real-time state updates, list rendering, sorting, filtering, forms, and optional API fetching. This guide teaches core React through building a fully functional leaderboard for your favourite game.
React Hooks Explained: useState and useEffect
React Hooks let function components manage state and side effects: useState stores changing data, and useEffect runs code after render for fetching and timers.
How to Manage State in React Applications
Managing React state means choosing the right tool for each need: local useState, shared Context, server-state libraries, or a global store like Redux or Zustand.
What Is the Virtual DOM in React
The Virtual DOM is React's in-memory copy of the UI that it diffs against the real DOM so only changed nodes update. Learn how it works and why it matters.
React Props and Component Composition
Props pass data from parent to child in React, and composition combines small components into rich UIs. Learn to build flexible, reusable component trees.
React useContext and Context API Explained
The Context API shares state across a React tree without prop drilling, and useContext reads it. Learn when to use context and how to avoid its pitfalls.
React useReducer Explained With Examples
useReducer manages complex React state with a reducer function and dispatched actions. Learn when it beats useState and how to structure predictable updates.
How to Fetch Data in React With useEffect
Fetch data in React by calling your API inside useEffect, tracking loading and error state, and cleaning up to avoid updates on unmounted components safely.
React Router Basics for Beginners
React Router adds client-side navigation to React apps, mapping URLs to components without full page reloads. Learn routes, links, params, and nested layouts.
Understanding Controlled vs Uncontrolled Inputs in React
Controlled inputs store form values in React state; uncontrolled inputs keep them in the DOM read via refs. Learn the trade-offs and when to use each.
How to Optimize React Performance
Optimize React performance by preventing needless re-renders, memoizing wisely, splitting bundles, and virtualizing long lists. Measure before you tune.
Build a Notes App With React and LocalStorage
Build a notes app with React and localStorage to persist data in the browser. A hands-on project covering state, effects, and CRUD without any backend.
Build a Kanban Board With React
Build a Kanban board in React with columns, draggable cards, and drag-and-drop between lists. Learn component structure, state lifting, and persistence for a real productivity app.
Full-Stack Java Developer Roadmap 2026
Becoming a full stack Java developer in 2026 means mastering core Java, Spring Boot, SQL, and React in that order, over roughly six months.
Build a React Chatbot with the OpenAI API
Build a React chatbot with the OpenAI API using a backend proxy, streaming responses, and conversation state — full step-by-step walkthrough.
What Is React Native? Cross-Platform Apps Explained
React Native is a framework for building mobile apps for iOS and Android from a single JavaScript codebase using native UI components. This guide covers how it works, its trade-offs, and when it's the right choice for a project.
What Does a React Developer Actually Do?
A React developer builds and maintains user interfaces using the React JavaScript library, turning designs into interactive, component-based web applications. This guide covers the daily responsibilities, core skills, and typical career path for the role.
React Native vs React JS: Which One Do You Need?
React Native builds native mobile apps for iOS and Android from one codebase, while React JS builds interactive interfaces for the web. The right choice depends entirely on whether you are targeting a browser or a phone's home screen.
What Is the MERN Stack? A Practical Overview
The MERN stack is a set of four JavaScript technologies — MongoDB, Express, React, and Node.js — used together to build full web applications with a single language across front and back end. Here's how each piece fits.
How React Works: Rendering, State, and Reconciliation
React runs your components to produce a description of the UI, compares it with the previous description, and applies the differences to the DOM. Learn the render-and-commit cycle, why state updates are batched, how reconciliation uses keys, and how that explains most of the bugs you will hit.
Planner-Executor Agents vs ReAct Loops
Planner-executor architectures commit to a plan up front and then carry it out; ReAct loops decide one step at a time from the latest observation. Planning suits long, decomposable tasks with stable environments; interleaved reasoning suits exploratory work where each result changes what to do next.
ReAct, Chain-of-Thought and Tree of Thoughts Compared
Chain-of-thought adds reasoning tokens, ReAct interleaves reasoning with tool calls, and Tree of Thoughts explores multiple reasoning branches with backtracking. This article compares the three on cost, latency and the problem shapes where each genuinely improves accuracy, and shows how to escalate between them so that easy inputs never pay for the expensive scaffold.
Managing server state in React: caching, refetching and staleness
Fetched data is a cache of something you do not own, and storing it in ordinary component state is what produces duplicate requests, stale views and out-of-order responses. This covers the behaviours that cache needs — deduplication, staleness, invalidation, race handling — and what you take on by hand-rolling them.
React Context vs a state management library
Context is a dependency-injection mechanism, not a state manager: it has no selector granularity, so every consumer re-renders when the value changes. This sets out when that is fine, how far splitting contexts gets you, and what a store actually adds beyond avoiding prop drilling.
When useMemo and useCallback actually help in React
Memoisation pays only when it prevents genuinely expensive work or preserves a reference something else depends on. Everywhere else it adds allocations, dependency arrays and bugs for no benefit. Here is how to profile first, which reference-identity cases are real, and what to do instead.
React useEffect: when you actually need it
An effect is correct only when it synchronises React with something outside React. Most effects in real codebases are computing derived values, resetting state on a prop change, or responding to events — each of which has a simpler answer. Here is how to tell them apart and delete the rest safely.