Build modern web apps with components, state, and hooks.
Try in Applaa Builder — FreeIn React, a component is often a function that returns what to show. The idea is: one function = one piece of the UI. Here we simulate that with a plain function returning a string (in real React it returns JSX).
State is data that can change over time (e.g. a counter, whether a modal is open). When state changes, the UI updates. Here we mimic that with a simple object and a function that updates it and 're-renders' (logs).
In React you often map over an array to render a list of components. Each item needs a unique key (usually an id) so React can update efficiently. Here we simulate with a simple loop and console output.
React uses camelCase event names (onClick, onChange). You pass a function that gets called when the event happens. Here we simulate: a function that would be the click handler and we call it to show the idea.
📚 What is JSX? JSX is a special syntax that lets you write HTML-like code directly inside JavaScript. React components return JSX, which the build tool converts to regular JavaScript calls. It looks like HTML but has the full power of JavaScript available inside {} expressions.
📚 What is Conditional Rendering? Conditional rendering shows different UI based on a condition - the component decides what to render at runtime. You use familiar JavaScript: if/else, ternary (? :), or logical AND (&&). This is how React makes interfaces respond to state and props.
📚 What are Controlled Inputs? A controlled input is a form element where React state is the single source of truth for the value. You set value={state} and onChange updates the state. This is different from normal HTML where the DOM owns the value. Controlled inputs give you full control over vali…
📚 What are Side Effects in React? A side effect is anything that affects something outside the component's render - like fetching data, setting up a subscription, starting a timer, or updating the page title. React's useEffect hook runs after the render and is where all side effects belong.
📚 What are Props? Props (properties) are the inputs that a parent passes to a child component. They are read-only inside the child. Any JavaScript value can be a prop: strings, numbers, arrays, objects, functions, even other components. The special children prop holds whatever JSX is placed betwee…
📚 Why do Lists Need Keys? When React renders a list, it needs a way to identify each item so it knows what changed between renders. Keys are unique identifiers you provide (usually the item's id). Without keys, React compares items by position, causing bugs when items are reordered, added, or remo…
📚 What is Lifting State Up? When two or more sibling components need to share the same data, move that data UP to their common parent. The parent owns the state and passes it down as props. Children can also receive a callback prop to update the shared state. This is one of the most important Reac…
📚 What is Component Composition? Composition means building a UI by combining small, focused components together -- like LEGO bricks. Instead of one giant component that does everything, you build many tiny ones and assemble them. React is designed around this idea: a Page contains a Header and a …
📚 What are Default Props? Default props give a component a fallback value when a prop is not provided. Without defaults, missing props cause 'undefined' to appear in your UI. There are two modern ways: default parameter values in the function signature, or the logical OR operator inside the functi…
📚 What are Callback Props? A callback prop is a function that a parent passes down to a child. When something happens inside the child (like a button click), it calls that function to communicate back UP to the parent. This is the standard pattern for child-to-parent communication in React.
📚 What are React Fragments? React requires every component to return a SINGLE top-level element. But sometimes you want to return two sibling elements without wrapping them in an extra <div> that messes up your layout or CSS. React Fragments solve this: they group multiple elements together withou…
📚 What are Inline Styles in React? In regular HTML you write style="color: red; font-size: 18px;" as a string. In React, the style prop takes a JavaScript OBJECT instead. This means you write camelCase property names (fontSize instead of font-size) and values as strings or numbers. React converts …
📚 What are Conditional Class Names? Conditional class names let you apply different CSS classes based on component state or props. This is how you make buttons look active, inputs show errors, or cards highlight on hover -- without inline styles. The pattern is: build a string of class names, addi…
📚 What are React Refs? A ref (reference) is a way to hold a mutable value that persists across renders WITHOUT triggering a re-render when it changes. The most common use is to get a direct reference to a DOM element -- like grabbing an input to call .focus() on it. You create refs with useRef() a…
📚 What is React.memo and When to Optimize? React re-renders a component whenever its parent re-renders, even if the component's own props didn't change. React.memo wraps a component and tells React: 'only re-render this if the props actually changed.' It's a performance optimization you add AFTER …
📚 What is React Context? Context solves the 'prop drilling' problem: when many nested components all need the same data (like the current user, theme, or language), passing props down through every level becomes messy. Context lets one component provide a value that ANY descendant can read -- with…
📚 What are the Rules of Hooks? React hooks (useState, useEffect, useContext, etc.) have two strict rules that you MUST follow. Breaking these rules causes mysterious bugs where state gets mixed up between renders. React actually includes a linter rule (eslint-plugin-react-hooks) to catch violation…
📚 What are Custom Hooks? A custom hook is a regular JavaScript function that starts with 'use' and calls built-in React hooks inside it. Custom hooks let you EXTRACT and REUSE stateful logic across multiple components -- without duplicating code. If two components share the same useEffect + useSta…
📚 React: The Big Picture React is a JavaScript library for building user interfaces out of components. Each component is a function that returns what should appear on screen. React keeps the UI in sync with your data automatically -- when state changes, the component re-renders.