framework used to build dynamic, component-based user interfaces for web applications.
Vite is a modern build tool that makes starting a React project fast and intuitive. With sensible defaults and high extensibility, it allows developers to focus on learning React without being distracted by complex tooling. This article walks through setting up a React project with Vite, understanding the project structure, and upgrading React if needed.
This article introduces the npm scripts defined in your React project’s package.json file, which are used to run, build, and lint your application. It also walks through your first React component in App.jsx, simplifying it to focus on the fundamentals of JSX, function components, and variable scope inside and outside the component.
JSX is a syntax extension for JavaScript that allows developers to combine HTML and JavaScript inside React components. This article explains how to use variables, functions, and data structures in JSX, highlights key differences from native HTML, and shows how JSX enables declarative UI development.
In React, the map() method is commonly used to transform arrays of data into JSX elements. This article explains how to render lists using map(), the importance of the key attribute, and how to display multiple properties of each item. It also highlights JSX-specific syntax differences and best practices for rendering dynamic content.
In React, each component represents a self-contained unit of logic and UI. As your application grows, components should be split into smaller parts to maintain clarity and scalability. This article explains how to extract components, build a component hierarchy, and instantiate components in JSX — with practical examples and analogies to JavaScript classes.
This article explores how React connects to the HTML world using React DOM, how components are instantiated in JSX, and the different styles for declaring function components. It also introduces JSX event handlers for user interaction, laying the foundation for dynamic and maintainable React applications.
Props are the primary mechanism for passing data from one React component to another. This article explains how to move data from global scope into the App component, pass it down to child components using props, and extract reusable components like Item from List. It also covers best practices, immutability, and the role of the key attribute in list rendering.
In React, props are immutable and used to pass data from parent to child. For dynamic, changeable data, React provides state — a mutable structure managed with the useState hook. This article explains how to define and update state, how it triggers re-rendering, and how React tracks state internally. It also introduces the concept of hooks and the role of StrictMode in development.
In React, props allow data to flow from parent to child, but not the other way around. To enable upward communication, we use callback handlers — functions passed down as props and invoked in child components. This article explains how to define and use callback handlers, and introduces the concept of lifting state to manage shared data at the appropriate component level.
In React, controlled components use state to manage the behavior of form elements. This article explains how to synchronize input fields with React state, how to define controlled components, and how to use advanced props techniques like object destructuring and nested destructuring to write cleaner, more maintainable code.
In React, a component’s output is usually determined by its props and state. But sometimes we need to interact with external systems like localStorage or APIs — these are called side-effects. This article explains how to use the useEffect hook to manage side-effects, synchronize state with localStorage, and improve user experience by persisting data across browser sessions.
React’s built-in hooks like useState and useEffect are powerful tools for managing state and side-effects. This article introduces the concept of custom hooks by building useStorageState — a reusable hook that synchronizes component state with the browser’s localStorage. We explore naming conventions, return patterns, and how to make hooks flexible and maintainable.
