TopolearnKnowing React's core idea (UI as a function of state) makes every later API feel like a consequence rather than a rule to memorise.
React is a JavaScript library for building user interfaces. Instead of writing code that finds DOM nodes and changes them step by step, you write components: functions that take data and return a description of the UI. When the data changes, React works out what changed and updates the real DOM for you.
This is the central idea: UI = f(state). You describe what the screen should look like for the current state, not how to get there from the previous screen. That declarative style removes a whole class of bugs where the page and your variables drift out of sync.
A few things React is and isn't:
- It is a library, focused on rendering and state. Routing, data fetching and server rendering come from libraries or frameworks built on it (React Router, TanStack Query, Next.js, React Router's framework mode).
- It runs anywhere JavaScript does:
react-domtargets browsers, React Native targets iOS and Android, and the same component model is used on the server. - Modern React is written with function components and Hooks (
useState,useEffect, ...). Class components still work but are legacy; you won't need them for new code.
React 19 adds a lot on top of the basics: Actions for forms and async updates, the use() API, Server Components, and the React Compiler, which memoizes your components automatically. This curriculum climbs from your first component to those features and to how React works inside.
Example
// A component is a function that returns UI for its inputs
function Greeting({ name, unread }) {
return (
<p>
Hello, {name}! You have {unread} new messages.
</p>
);
}
// You never touch the DOM yourself: change the data,
// and React re-renders <Greeting> and patches the page.
export default function App() {
return <Greeting name="Ada" unread={3} />;
}Remember
- React components describe what the UI looks like for the current data
- React updates the DOM for you when data changes (declarative, not imperative)
- Modern React = function components + Hooks; frameworks add routing and server rendering
Watch out for
- Thinking of React as a full framework: routing and data fetching come from other libraries or a framework.