react-core

React Core Fundamentals

Overview

The canonical reference for general React fundamentals. This skill covers the building blocks every React application shares: components and JSX, props and state, the core hooks, composition patterns, conditional and list rendering, and controlled inputs. It is the baseline "depends on React" target for ecosystem skills (styling, data fetching, state management, deployment) that assume core React knowledge.

Keep this skill focused on fundamentals. For advanced hook composition (SWR-backed custom hooks, debounced contexts, memoized providers), use the sibling react-hooks-composition skill. For explicit finite-state-machine modeling of complex UI flows, use the sibling react-state-machine skill.

When to Use This Skill

Reach for this skill when:

• Building components, wiring props, or managing local state
• Choosing among the core hooks for a given problem
• Rendering lists or conditional UI
• Implementing controlled form inputs
• Establishing the React baseline that another ecosystem skill depends on

Components and JSX

A React component is a function that returns JSX. Name components in PascalCase. Return a single root node, or wrap siblings in a fragment (<>...</>).

type GreetingProps = {
  name: string;
};

function Greeting({ name }: GreetingProps) {
  return (
    <>
      <h1>Hello, {name}</h1>
      <p>Welcome back.</p>
    </>
  );
}

JSX embeds expressions inside {}. Attributes use camelCase (className, onClick, htmlFor). JSX returns a description of the UI; React reconciles it against the DOM.

Props and State

Props pass data down from parent to child and are read-only inside the child. State holds data a component owns and mutates over time.

import { useState } from 'react';

function Counter({ step = 1 }: { step?: number }) {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount((prev) => prev + step)}>
      Count: {count}
    </button>
  );
}