Core Concepts

React - A JavaScript library for building user interfaces, particularly web applications with dynamic, interactive content.

JSX (JavaScript XML) - A syntax extension that allows you to write HTML-like code within JavaScript, which gets transpiled to React.createElement() calls.

Component - A reusable piece of UI that can accept inputs (props) and return a React element describing what should appear on the screen.

Element - A plain object describing what you want to see on the screen. Elements are what components return.

Virtual DOM - A programming concept where a "virtual" representation of the UI is kept in memory and synced with the "real" DOM.

Reconciliation - The process React uses to compare the current component tree with the previous one and determine what changes need to be made to the DOM.

Fiber - React's reconciliation algorithm that enables features like incremental rendering, prioritization, and better performance.

Components

Functional Component - A component defined as a JavaScript function that takes props as an argument and returns JSX.

Class Component - A component defined using ES6 class syntax that extends React.Component (largely superseded by functional components with hooks).

Pure Component - A component that only re-renders when its props or state change, implementing a shallow comparison optimization.

Higher-Order Component (HOC) - A function that takes a component and returns a new component with enhanced functionality.

Render Props - A technique for sharing code between components using a prop whose value is a function.

Fragment - A React component that lets you group multiple elements without adding extra DOM nodes (<React.Fragment> or <>).

Portal - A way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

Hooks

Hook - Functions that let you "hook into" React state and lifecycle features from functional components.

useState - A hook that lets you add state to functional components.

useEffect - A hook that lets you perform side effects in functional components (data fetching, subscriptions, DOM manipulation).

useContext - A hook that lets you consume context values without wrapping your component in a Context.Consumer.

useReducer - A hook that lets you manage component state with a reducer function, similar to Redux.

useMemo - A hook that memoizes expensive calculations and only recalculates when dependencies change.

useCallback - A hook that memoizes functions to prevent unnecessary re-renders of child components.

useRef - A hook that provides a way to access DOM elements directly or store mutable values that persist across renders.

useLayoutEffect - Similar to useEffect but fires synchronously after all DOM mutations, useful for DOM measurements.

useImperativeHandle - A hook that customizes the instance value exposed to parent components when using ref.

Custom Hooks - Functions that use other hooks to encapsulate and reuse stateful logic between components.

State Management

State - Data that can change over time and affects what a component renders.

Props (Properties) - Read-only inputs passed from parent components to child components.

Lifting State Up - Moving state from child components to their common parent to share state between siblings.

Context - A way to pass data through the component tree without having to pass props down manually at every level.

Provider - A component that provides context values to its descendant components.

Consumer - A component that subscribes to context changes (mostly replaced by useContext hook).

Controlled Component - A component where form data is handled by React state.

Uncontrolled Component - A component where form data is handled by the DOM itself, typically using refs.

Lifecycle & Effects

Mounting - The process of a component being created and inserted into the DOM.

Updating - The process of a component being re-rendered as a result of changes to props or state.

Unmounting - The process of a component being removed from the DOM.

Side Effect - Operations that affect something outside the scope of the current function (API calls, timers, DOM manipulation).

Cleanup - Code that runs when a component unmounts or before an effect runs again, used to prevent memory leaks.

Dependency Array - An array passed to useEffect that determines when the effect should run based on value changes.

Event Handling

SyntheticEvent - React's wrapper around native events that provides consistent behavior across different browsers.

Event Handler - Functions that respond to user interactions like clicks, form submissions, keyboard input, etc.

Event Delegation - React's technique of using a single event listener on the root element to handle all events.

Bubbling - The process where events propagate from the target element up through its ancestors.

preventDefault() - A method to prevent the default behavior of an event (like form submission or link navigation).

stopPropagation() - A method to prevent an event from bubbling up to parent elements.

Rendering & Performance

Render - The process of calling a component function to get the JSX that describes the UI.

Re-render - When a component renders again due to state or props changes.

Memoization - A technique to cache results of expensive operations to improve performance.

React.memo - A higher-order component that memoizes the result of a component and only re-renders if props change.

Lazy Loading - Loading components or resources only when they're needed, often using React.lazy().

Suspense - A component that lets you specify a loading state while waiting for lazy-loaded components to load.

Concurrent Rendering - React's ability to interrupt rendering work to handle more urgent tasks like user input.

Batching - React's optimization where multiple state updates are grouped together into a single re-render.

Routing

React Router - A popular library for handling navigation and routing in React applications.

Route - A component that renders specific UI when the URL matches a certain path.

Router - A component that keeps UI in sync with the URL (BrowserRouter, HashRouter, etc.).

Link - A component for navigating between routes without page refresh.

Navigation - The process of moving between different views or pages in a single-page application.

Dynamic Routing - Routes that are created and managed at render time rather than in a static configuration.

Testing

React Testing Library - A popular testing utility that focuses on testing components from the user's perspective.

Enzyme - A JavaScript testing utility for React (less commonly used now, replaced by React Testing Library).

Jest - A JavaScript testing framework commonly used with React applications.

Snapshot Testing - Testing technique that captures component output and compares it against saved snapshots.

Mock - Test doubles that simulate the behavior of real objects or functions.

Integration Testing - Testing how multiple components work together.

Unit Testing - Testing individual components or functions in isolation.

Build Tools & Ecosystem

Create React App (CRA) - A tool that sets up a modern React development environment with zero configuration.

Webpack - A module bundler commonly used in React applications to bundle JavaScript, CSS, and other assets.

Babel - A JavaScript compiler that transforms modern JavaScript and JSX into code that browsers can understand.

Vite - A modern build tool that provides fast development server and optimized builds for React apps.

Next.js - A React framework that provides features like server-side rendering, routing, and API routes.

TypeScript - A typed superset of JavaScript that adds static type definitions to React applications.

ESLint - A tool for identifying and fixing problems in JavaScript/React code.

Prettier - A code formatter that ensures consistent code style across React projects.

Hot Reloading - A development feature that updates components in real-time without losing state.

Tree Shaking - A build optimization that eliminates unused code from the final bundle.

This glossary covers the essential terms and concepts you'll encounter when working with React.js. Keep it handy as a reference while developing React applications!