How to learn React JS?

Question

My background: I have completed courses in HTML, CSS, Bootstrap and JavaScript and I can read and write code in these languages.

I want to learn React and I want to build frontends of websites.

What's the best way to learn React for my case? Which books, courses and tutorials are recommendend? Which projects are recommended?

Answer 1

I suggest learning through projects and documentation rather than books in this case. React has very good documentation and there are hundreds of thousands of React questions and answers on Stack Overflow you can consult if you get stuck as you work on projects. There are few technologies with as abundant support as React.

Books are wonderful, but React evolves quickly and books don't. I prefer books for topics that change slowly, like algorithms, computer organization and software engineering principles. Books tend to offer deep, conceptual dives, but what ultimately made React comprehensible for me was playing with code in a hands-on manner and consulting resources on an as-needed basis. The hardest parts of learning React are the many weird gotchas and counterintuitive rules, which aren't easily grasped except by facing them head-on as you code.

Here's a general outline you could follow:

1. Work through the official React tutorial. You'll build tic tac toe, which will teach you most of the basic React concepts: JSX, rendering, props, state, event handling, lists and keys. It'll also ensure you're up to speed on JS basics like arrow functions, mapping over arrays, etc.

   This tutorial has been updated to use functional components and hooks. Bear in mind that this newer approach was preceded by class components, which you may see from time to time when looking for help on Stack Overflow and in older books.

2. Read through the getting started sections of the official docs.

3. Make a few simple projects from scratch on your own. The idea here is to run into problems and debug them by searching Stack Overflow and the React docs. Suggested toy projects:

   • Click counter (click a button to increase a counter value--the "hello world" of React; teaches basic state and event handling)
   • Celsius to Fahrenheit converter, or anything with a form input or two.
   • Rock, Paper, Scissors
   • A to-do list with child components and an array of objects in the parent component. If you're feeling ambitious, add local storage via a custom hook.
   • A calculator
   • A music player (a list of buttons that play/pause audio on click)

4. Now you're ready for the useEffect hook, which is tricky to learn but essential. Make a project that uses fetch to call a REST API. You can use https://jsonplaceholder.com/ or another API you like. You should be able to fetch a list of comments or posts and display that list, both when a component loads and on a button click. Consider also coding a clock or pomodoro timer app, keeping in mind these can be difficult.

5. Add the React Router package and create a multi-page application of your choosing.

With these basics under your belt, you should be equipped to create a larger project and explore the React ecosystem under your own steam.

Here are a few other things you may want to explore once you've mastered the basics and made a few apps on your own:

• Advanced concepts from the React docs like context and refs
• Deeper backend integration (if you're not a backend engineer, you can mock fetch and keep a fake database in local storage for starters, although this hits limits like authentication quickly)
• Unit testing with Jest and React Testing Library
• Integration testing with Playwright, Puppeteer or Cucumber
• UI frameworks like Material, Semantic, Tailwind or Bootstrap
• Styled components
• Redux