React.js
Think in components, keep state minimal, and build dynamic user interfaces that scale. Master the most popular library in the industry.
Rendering + State
React updates the UI when state changes. Your job is to model state cleanly and render a UI from that state.
SPA Workflow
A Single Page Application loads once and then uses JavaScript to swap views. It's like a movie where only the background changes, but the camera never stops rolling.
UI Components
Components are the building blocks of React. They are reusable, encapsulated pieces of UI that manage their own logic and display.
Name components by what they are (UserCard, PriceTag), not how they look (BlueBox).
function Badge({ label }) {
return <span className="badge">{label}</span>;
}
export default function App() {
return <Badge label="New" />;
}
JSX Essentials
JSX looks like HTML, but it has the full power of JavaScript. Use curly braces to embed logic, and map for dynamic lists.
const items = ["HTML", "CSS", "JS"];
<ul>
{items.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
Everything inside { } is pure JavaScript.
Props are Inputs
Props (short for properties) are how you pass data from a parent component to its children. They are read-only and help maintain a predictable data flow.
Children should never modify their props. If you need to change data, use state.
function UserCard({ name, xp }) {
return <div>{name} • {xp} XP</div>;
}
<UserCard name="Jeremiah" xp={2500} />
State Management
State is the memory of your component. When state changes, React automatically updates the UI to reflect the new data.
const [count, setCount] = React.useState(0);
const increment = () => {
setCount(prev => prev + 1);
};
useEffect Hook
Effects let you run code when a component mounts, updates, or unmounts. Use them to sync with external systems like APIs or manual DOM changes.
Always return a cleanup function from useEffect if you set up subscriptions or timers.
React.useEffect(() => {
console.log("Component mounted");
return () => console.log("Unmounting");
}, []);
Event Handling
React events are written in camelCase. You pass a function as the event handler rather than a string.
<button onClick={() => alert("Clicked!")}>
Click Me
</button>
Controlled Forms
In React, the "source of truth" for form data should be the component state. This makes form validation and submission much easier.
Check state values before allowing submission.
const [val, setVal] = useState("");
<input
value={val}
onChange={e => setVal(e.target.value)}
/>
Fetching Data
Use the fetch API or libraries like axios inside useEffect to bring external data into your React app.
Launch Playground
Ready to build something? Try our interactive React problems.
useEffect(() => {
fetch("/api/data")
.then(res => res.json())
.then(setData);
}, []);