Concept lesson · explains an idea. Code is shown for reading, not run.
React tutorials online were written over more than ten years, so you will find code in several styles. This lesson tells you which version this course uses and how to recognise older code.
What this course uses
- React 19.3, which was the current stable release when this course was written (September 2026). Everything marked as a Try it example runs on React 19.3.0 in the playground.
- Function components and hooks. This is how all new React code is written.
- Vite to create projects, and Node.js 22 or newer for the full-project lessons (the exact requirements are in Node.js and npm for React).
React keeps the main ideas stable from one version to the next. Components, props, state and hooks work the same way in React 18 and React 19, so what you learn here also helps with older code.
Old code you will still see
| Older pattern | Status | Use instead |
|---|---|---|
Class components (class App extends React.Component) | Still work, not recommended for new code | Function components with hooks. The one exception today is an error boundary; see Error Boundaries. |
ReactDOM.render(...) | Removed in React 19 | createRoot(...).render(...) from react-dom/client |
create-react-app | No longer maintained and no longer recommended | A framework, or Vite for a client-side app |
defaultProps on function components | Removed in React 19 | Default values in the parameter list. See Default Prop Values |
propTypes | No longer checked in React 19 | TypeScript, or plain careful code. See React with TypeScript |
forwardRef | Not needed in React 19 for most cases | ref is a normal prop for function components |
React.createClass, string refs, findDOMNode | Removed | Hooks and useRef |
UMD builds loaded with <script> tags | No longer published from React 19 | A build tool, such as Vite |
What is new in React 19
You will meet these in the lessons where they matter:
- Actions and form
actionprops,useActionState,useFormStatusanduseOptimisticfor forms and data changes. See Form Actions. use, a way to read a promise or context during rendering.refas a prop and cleanup functions for refs.- Document metadata tags such as
<title>rendered inside components. <Context>as a provider: you can write<ThemeContext value="dark">instead of<ThemeContext.Provider value="dark">.- React Compiler 1.0 (a separate, optional build plugin) can add memoization automatically. See Performance Optimization.
React 19.2 added <Activity> and useEffectEvent. React 19.3 made <ViewTransition> and Fragment refs stable. These are useful but advanced, so this course mentions them rather than building on them.
Tutorials from before 2023
ReactDOM.render, class components for everything, componentDidMount, or create-react-app, it is teaching an older style. The ideas still help, but copy the modern version from this course.How this course labels version-dependent behaviour
When something works differently in React 18 and React 19, the lesson says so in a note. When a feature is new and still changing, it is not used in the examples.