I recommend that everyone learn React as a starting point. Why not jQuery? Or Angular? Or Vue?
Only one reason. There are more React jobs right now than any others, by a large margin.
This makes it a practical starting point. There’s also a wonderful and large community of React developers and the React documentation is absolutely, amazingly, delightfully beautiful (can you tell I’m a fan?).
This is a guide to my favorite resources for learning React. I’ve shared them with students over the last few years and have taken all of the courses myself.
If you’re starting from zero, or stuck on a specific aspect of learning React, this guide can help.
Feel free to reach out if there’s something you’re struggling with, I’m here for you.
As you progress through learning to code you will see lots of documentation for different frameworks and libraries. The React docs are the gold standard. I recommend walking through their tutorials before going anywhere else.
A lot of what you read or explore may not make that much sense at first, and this is okay. I have a lot of resources for you here, find the ones that fit your style the best.
There are a few main areas you need to spend time intentionally working to master. These are:
- State and Props – the way you store data in your application and pass it around.
- Components – the individual building blocks of any app, these come together to form the actual HTML that’s visible on the page.
- Lifecycle Methods – the built-in functions that come with React to trigger an event or get new data based on the lifecycle of the app.
- Event Handlers – the ways to capture user interaction and store or send data accordingly.
- Stateful vs. Functional Components – React ships with two types of components (more on this below), one for tracking state, the other as a pure function.
Stateful components in the form of classes are starting to disappear, however, I still recommend you learn them.
Any legacy codebase will still use them. The trend is shifting to focus on React hooks, which allow functional components to store and track state.
A word of caution around React Hooks. They are great to learn later, but you still need to understand how to use class based components. The same goes for learning Redux — you should learn it for now. I’ll update this guide later if this recommendation changes.
What Is A Frontend Framework?
Before I start listing out the ways I recommend you study React, let’s talk about what problem they solve. Up to this point you’ve been writing code, for yourself, in local files or in the browser. This is fine for getting started.
At some point you’ll want people all over the world to have access to your code.
More importantly, you’re going to want their experience to be the same (or almost the same) regardless of their browser or operating system. Also, you want them to be able to get updates to the website in real-time. Remember when you used to have to hit the refresh button on your browser to get new messages? If not, lucky you!
React is one of the solutions to manage writing a single page application (SPA) for client-side code. The main super-power in SPAs is how they manage the state of your application. State is the condition (data, user interactions) of your application at a given point-in-time. This blog post gives a great explanation of state.
React has a cool way of handling state internally, and passing it to different components within your application. I recommend reading both React’s definition of how it works and this post from Stack Overflow.
Now that you have a rough sense of the basics, I encourage you to start building things. The goal of this and the next 4 modules are the same – build small practice projects as often as possible to test your ideas and understanding.
If you ever get stuck, Google is your friend. Whenever you understand a topic, explain it to a buddy or write a blog post about it to practice your technical communication. I keep bringing this up method of practice for one reason. Your ability to verbally communicate your technical understanding will be crucial for job interviews. It only comes via practice!
Resources For Learning React
- My favorite courses for learning React, as a beginner, are from WesBos and on Frontend Masters.
- There are some fantastic free resources. My two favorite YouTube courses are from Traversy Media and Net Ninja’s (which also includes Redux). Redux is hard for beginners, work on mastering React before you master Redux. The reason Redux is challenging is a combination of new syntax and new concepts for managing the flow of data.
- For the above, focus on state vs. props – solidify your understanding of how to pass functions, and events around. Whenever you get stuck refer to the React docs or use Google. There are lots of great blog posts and Stack Overflow answers to help with common questions.
- There are two other course providers I enjoy. Stephen Grider already, has a TON of content out. I am not opposed to his teaching style, but it can be easy to code along with him and not actually learn the material, so be wary. The second I recommend is Scott Tolinksi. Scott has a fantastic YouTube channel, and he’s focused his energy the past couple of years on Level Up Tutorials. He has some great design oriented content, and goes deep on advanced React topics too.
- After you’re starting to feel comfortable I recommend you practice building several small apps. A great starting point is JSON Placeholder API – it has blog and todo data with RESTful endpoints. I use this as my go-to whenever testing something new. A large list of public APIs is here. I’d make fun projects using data from the big list and share them with friends!
- Use CodeSandbox to create practice projects, or use create-react-app to build projects locally. Practice, practice, practice!
Once you understand parent-child components, passing state around as props, and event handlers, you’re ready to move on! Don’t shortcut your time here, the concepts of how to move data around a local application are important.
As I’ve recommended elsewhere, you need to actually write code on your own in order to learn. Watching someone else code and copying what they write will not teach you.
Instead, build a small app and whenever you get stuck work through a tutorial to help explain the specific concept that you’re struggling with.
This is the formula for mastering any new topic. Roll up your sleeves, get your hands dirty. Don’t let the fear of the new thing prevent you from starting. This is the trap that catches so many people up!
If you enjoyed this post, please subscribe to my newsletter and check out some of the other resources here on the site!