Exploring Various Coding Languages
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.
Comparing values is essential for decision-making in JavaScript programs. This article explores the nuances of strict equality (===), identity vs structural comparison, and special cases like NaN and -0. It also explains how object and function comparisons work and why JavaScript doesn’t support structural equality natively. Understanding these distinctions is key to writing reliable code.
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.
In React, components must return a single root element. To avoid unnecessary DOM wrappers, we use Fragments. This article explores how to use React Fragments and their shorthand syntax, and how to refactor a specialized Search component into a reusable InputWithLabel component with flexible props and cleaner structure.
React components can be composed like HTML elements using opening and closing tags. This article explores how to use the children prop for flexible content injection, and how to imperatively access DOM elements using useRef and useEffect. We refactor a reusable input component to support both declarative and imperative focus control, demonstrating the power of composition and lifecycle hooks.
Inline handlers in React allow you to execute functions directly within JSX. This article demonstrates how to use inline handlers to remove items from a list. Using useState, callback handlers, and the filter method, we manage a dynamic list and define removal logic directly in JSX using arrow functions or bind. We also explore when to extract handlers for better readability.
