Learning Path: Getting started with React

Not long ago I started learning React. I have more than 10 years of experience using JS and before React I was actively coding in first wave generation web frameworks (like knockoutJS) and starting to get a grasp on components architecture (but using KO components + web components). Today I am coding entirely in React (both at work and for personal projects) and it’s been great. I love the community, there are a lot of projects & learning resources and I also found React to be a fast way of creating web applications.

In this post I want to share some resources that helped me learn React and I hope they are useful for anyone starting out there.

To be more effective in this learning path, intermediate knowledge on JS, HTML and CSS is recommended. If you are not there yet, you might want to take it at a slower pace and maybe mix it with some tutorials on JS, HTML and CSS basics. Also make sure that you are familiar with newer JS concepts. Check Javascript to know for React as a refresher.

Before we begin it is important to understand what React is. This Introduction to ReactJS video explains it in a nice and concise way. Also, if you want to understand better why React is a library and not a framework, check this chapter on What React Is and Why it Matters by Eric Baer.

Let’s continue with the official React website as it has solid documentation and tutorials. I find myself checking the official site here and there to reinforce core concepts of the language. If I had to recommend 2 sections from the official docs those would be:

• Thinking in React: Explains a simple process to design and implement UI with this library.
• Design Principles: Understanding the reasoning behind React also helps to reason about the features and practices.

After following these docs it is time to watch some videos. I recommend 2 React tutorials:

• React - The Complete Guide (incl Hooks, React Router, Redux): Super complete tutorial where you code along. It is not free, but usually you can get it for $10 USD which is not bad.
• Going a little bit more advanced, there is a training course by Wes Bos called Fullstack Advanced React & GraphQL. This one is more expensive ~$50-70 USD but it goes a little bit deeper, you will end up doing a full web application (uses an e-commerce example). It will not only walk you through React but also a solid stack (NextJS, Apollo, GQL Yoga and Prisma).
• If you are looking for free options check this article on 10 free courses to learn React.

Now is a good time to check that some core principles are solid. Refresh some concepts by checking these articles:

• React concepts you should know
• Top 10 important things of React
• Important topics of React
• Also check this React cheatsheet

You are never finished until you tested your app. Here are some resources to help you learn more about testing:

• React Testing crash course.
• At this point you probably know about Kent C. Dodds. He has amazing resources and recommendations on how to test React apps. Also he created the React Testing Library, check his article introducing it.
• I am more a fan of Enzyme but I will let arrive to your own conclusions 🙂

If you are still excited to continue learning is time to dig into React internals. Also check this talk on how react concurrent mode works.

A bonus resource is this awesome React GitHub resources repo which has tons of links to keep learning and building your path!

Enjoy!!