Concept lesson · explains an idea. Code is shown for reading, not run.
You have covered React from the first component to a tested, built and deployable project. This last lesson helps you decide what to do next, because the best next step depends on your goal.
First: consolidate
Before learning anything new, make the current skills automatic.
- Rebuild two projects from memory, such as the todo app and the cart, without looking at the solutions. Where you get stuck shows what to review.
- Build one project of your own that you care about, and ship it (Deployment Fundamentals). Real needs create real questions.
- Read other people’s code. Open source React projects and component libraries teach patterns that tutorials skip.
- Review the weak lessons. If effects, keys or immutability still feel shaky, re-run the playground examples and break them on purpose.
Choose a direction
| If you want to… | Learn next |
|---|---|
| Get a front-end job | TypeScript, testing, accessibility, data fetching with TanStack Query or SWR, a framework (Next.js or React Router framework mode), Git and a team workflow |
| Build content and marketing sites that rank in search | A React framework with server rendering (Client-Side React vs Frameworks), plus SEO basics and Core Web Vitals |
| Build mobile apps | React Native with Expo; your React knowledge transfers |
| Build full-stack products | A framework with server functions, a database, authentication, and API design |
| Work on design systems | Accessible component patterns, Storybook-style documentation, CSS architecture and design tokens |
| Improve performance | The Profiler, bundle analysis, Web Vitals, virtualization, the React Compiler |
A learning plan, step by step
Month 1: depth
- Convert a project to TypeScript (React with TypeScript).
- Add tests to every project (Testing).
- Fix every accessibility issue in one project with the keyboard and a screen reader (Accessibility).
Month 2: real data
- Build an app on a real API with a data library, caching, optimistic updates and error handling (Data-Fetching Libraries).
- Add authentication through a well-tested service or library; learn cookies, tokens and CSRF (API Security).
Month 3: a framework
- Follow the official tutorial of one framework (Next.js, or React Router in framework mode). Learn server rendering, data loading and deployment there.
Ongoing
- Learn the web platform: HTTP, caching, browser developer tools, CSS layout. React sits on top of it.
- Read the React blog and release notes (React 19.3 added stable View Transitions and Fragment refs; the React Compiler is stable).
- Keep dependencies updated and read changelogs.
Other courses on this site that complement React
- JavaScript Tutorial: the language underneath React; async code, modules and the DOM.
- CSS Tutorial: layout, responsive design and animation.
- HTML Tutorial: semantic markup and accessibility.
- PHP Tutorial and MySQL Tutorial: the back end that many React apps talk to.
Trusted places to keep learning
- react.dev: the official documentation and tutorial, kept current by the React team.
- MDN Web Docs: the reference for HTML, CSS, JavaScript and browser APIs.
- Documentation of each tool you use: Vite, React Router, Vitest and Testing Library are all well documented.
- web.dev and the WAI-ARIA Authoring Practices: performance and accessibility guidance.
- GitHub: source code and issues for the libraries you depend on.
Prefer sources with a date and a version. React changes: an article from 2019 may teach patterns that are no longer recommended (React Versions).
Habits of good React developers
- They keep state minimal and derive the rest.
- They treat loading, error and empty states as part of every feature.
- They measure before optimizing and test before refactoring.
- They write accessible HTML first, before reaching for ARIA.
- They keep secrets on servers and think about security from the start.
- They read error messages fully, and make small reproductions.
- They keep it simple: the fewest dependencies and the least abstraction that solve the problem.
A final challenge
Take the task board and add three features of your own choice: perhaps drag and drop, due dates with sorting, user accounts with a real backend, or a shared board that updates for several people. For each feature, write down the states (loading, error, empty), the accessibility behaviour and a test before you write the code. When it works, deploy it, and show it to someone.
Thank you for learning React with this course. Go back to the React Tutorial home whenever you want to review a topic.