How to learn React

How to learn React is high on the agenda for plenty of JavaScript developers this year. The recent State of JS survey has shown that many developers choose React for creating modern web applications. Due to its popularity and job demand, many JavaScript developers want to learn React. Here I want to give beginners a comprehensive overview of how to approach learning React without getting distracted or overwhelmed by other topics along the way.

Learn React [Quickly || Fast || Easy]

There is no shortcut to meaningful learning. You have to be patient. That applies for developers too. Personally, that's why I like being a developer; there will be always something new to learn. If you stay curious, you will not be disappointed as a developer. Learning is always a challenge and opportunity to hone your skills as long as the challenge and your skill are in balance. That's why it takes time to learn React.

Luckily, React does not have a steep learning curve when following one simple rule: Learn React, only React step-by-step, and don't let yourself be distracted by other tech on the journey. JavaScript and React are evolving constantly as both innovate and want to stay relevant in the future; learn and keep up with them first before learning anything else. I have heard success stories from developers who went from not knowing React to getting offered a React job at a company in a few days to a few months.

"I had a job interview coming up where I was asked to complete a project in React. I sat down on a Saturday and worked through The Road to React and on Sunday I completed my project with plenty of time left before my interview Wednesday. In one weekend I went from 0% to 80% comfortable working independently in React." (Source)

There are a couple of libraries (e.g. Redux with React) that people want to learn with React straightaway. React beginners tend to associate them with React when starting out. However, none of these additions will make the learning experience easier. You will have to learn two things instead of one. Start with React first. Learn one thing at a time!

React Prerequisites

Since React is a JavaScript library, there is no way around learning JavaScript. It makes heavily use of JavaScript, so it's difficult to attempt learning React without any prior JS knowledge.

Learn React or JavaScript first?

You should understand the basics of JavaScript and have decent knowledge about HTML and CSS. Many recommend learning web development and all JS fundamentals as prerequisite before learning React, but the skills they recommend go far beyond what's needed to build basic applications with React.js. A couple of them may be:

Functions are first-class citizens in JavaScript
bind(), apply(), and call()
scopes and closures
this
Object Methods
Array Methods
Prototypical Inheritance -> ES6 Class
Callbacks and Promises
Event Loop
Event Bubbling
Regular Expressions
Error Handling
JavaScript ES6 and beyond
Hoisting, Memoization
Declarative vs imperative programming
Functional vs object-oriented programming

I believe it's not necessary to have all this knowledge. It can be very disillusioning for beginners new to JavaScript, React and Web Development. You don't want to hang around in the "Scopes and Closures"-land while you could build real projects instead that motivate you to keep going. The "aha"-moment for grasping closures will come along the way. Personally I didn't know half of the things in the list when I started to learn React and I still have to look up regular expressions because I haven't bothered learning them; and still work successfully as freelancer for companies.

I believe most of JavaScript can be learned along the way when learning React. Doing so allows you to experience it in context while building web applications. That's exciting and drives us as human beings. Keep yourself excited while learning and don't spend too long with the fundamentals while not applying them in a real-world scenario. Start building real projects. Stay curious! Just move back and forth between JavaScript and React while you learn React.

Learn React or jQuery?

Historically jQuery filled the gap between vanilla JavaScript and modern frameworks such as React, Angular, and Vue. Early JavaScript wasn't as efficient in the browser as it is nowadays. That's why there was a real need for jQuery. However, modern JavaScript frameworks surpass jQuery. Hence my recommendation: Don't bother with jQuery.

If you are working on a larger application that utilizes React at your new job, it is likely to be confronted with jQuery in the application's legacy areas. But it's okay to not being proficient with jQuery and look up online what you need to get the job done. As an alternative, try to migrate the code from jQuery to React as a learning opportunity.

Why should I learn React?

Why do you want to learn React in the first place? Beginners may know about the shiny modern libraries in JavaScript but often don't ask themselves why they need them. They may only know that they are in huge demand by companies and jobs. It can make sense, though, to step back and ask the question: Why do I need this?

It doesn't only apply to React, but to all the other frameworks you will learn as a developer. What problem does it solve for me? Too often people throw libraries on top of their tech stack without experiencing a problem that necessitates using it in the first place. That's why I believe it is a great learning experience to implement the identical application with vanilla JavaScript and React. It demonstrates why using the new library is beneficial when solving your problem. The same technique can be applied when deciding whether you want to learn React or another solution such as Vue or Angular. Build a basic application with the solutions of your choice and compare the development experience. Which of the solutions felt right for you?

Learn React Step by Step

I strongly believe the best start is going through the official React documentation. The documentation keeps up with recent changes, is not biased, teaches you everything the React way, and is put together by the React core team and community.

Learn with React Docs

Being referred to the documentation of a library as a beginner in web development can be intimidating. But I strongly believe it's the best way to learn something new. On your path to becoming a developer you will often need to use the official documentation, so why not get used to it now? It comes with these benefits:

includes beginner tutorial
no commercial interest
opinionated way of doing things
thoughtfully put together by core contributors and community
latest material and updates for new versions
API references

Every time I pick up a new tech, I don't check any courses or books, I go straight to the tech's documentation and check whether there is a beginner tutorial. Often there is one and that's my entry point into a new world. From there, I can always check for other learning material. That's why I write my tutorials and books in close relation to the documentation by always refereing it in my guides. It helps beginners learn to use the documentation and will make them more efficient and effective now and in the future.

Learn React with Projects

After going through the React documentation's beginner tutorial and learned the basics of React from scratch, continue learning by building a project. It's not always simple to come up with project ideas, but there is plenty of inspiration out there.

For instance, there are also people who want to learn React by building games. You will find plenty of React Tic Tac Toe implementations out there. Implement the game in React yourself and compare your solution to the other solutions. You will learn from your mistakes and learn to evaluate your source code against others' implementations.

Learn React by Doing

Learn React by doing is one of the most common recommendations. It applies to almost everything in life. Every programming task will present you with a new challenge to grow as a React developer. It is too easy to passively consume video courses, books, and tutorials. Get your hands dirty and implement something yourself. Get stuck with a problem, become desperate, consider the problem by taking time away from the screen, eventually solve the problem, and reap the fruits of it.

Learn React every Day

Challenge yourself to code every day. You can participate in the 100 Days of Code challenge, write about it on Twitter or on your website. Make it a daily habit. Only when sticking to it, having the persistence and by coding every day, will you eventually become a React developer. It's a marathon and not a sprint.

Learn React in Public

Learning in a public setting will accelerate your progression. Expose yourself to other developers' feedback by sharing your work. If you have reached a milestone with your React project, show it to others and ask for their feedback. These are a couple of commonly known platforms to share ideas around React:

You will not only get valuable feedback there, but can further dive into React by joining other discussions. Be part of the community. A great way to learn something new is to explain it to someone else. Even if recently starting out, you are likely ahead of a fellow React beginner and can help them.

Continue to Learn React

After you went through the beginner tutorial in React's docs and started to implement a React project yourself, learn to use React with all its facets. React has only a slim API surface area, so try to get proficient with it.

Learn about React's JSX syntax
Learn about React Components
Learn about React Props
Learn about React State
Learn about React Component Composition

Learn and understand React. In the end, it doesn't take much to create a React component that returns JSX, to use a React component in another component while arranging them in a component hierarchy, to pass data from component to component with props, and to make components interactive with state. That's the gist of React.

React Setup for Beginners

How do you get started with coding a React project? If you don't have an editor/terminal or IDE installed and want to check out what React feels like in a code environment, you can use the go-to online code editor CodeSandbox. Play around with React. If you want to learn how to develop React applications on your local machine, check out these guides:

Both guides come with a minimal set of recommended tools to get you started:

Execute JavaScript with Node and NPM: While Node.js makes it possible to run JavaScript outside of the browser, NPM (node package manager) allows you to install libraries like React to your project.
Develop with Visual Studio Code (VS Code): A popular IDE and a go-to solution for React developers. VS Code comes with an editor to learn React development and a terminal (command line) to start your React project and install libraries for it.
Learn with Vite: 80% of the React tutorials create a React project with it. You can focus only on learning React while all the toolings around it are taken care of.
Format with Prettier: Opinionated code formatter that automatically formats your code in your development environment. It comes with a straightforward setup and integrations for popular editors (VS Code).

Learn Advanced React

After you learn the basics with React components, props/state, and React's JSX syntax, you can dive deeper with advanced React concepts and patterns.

Being equipped with these advanced React techniques, you should be comfortable to dive into larger React applications. React Hooks may make the other Higher-Order Components and Render Prop Components less used in the future, but you should still see them fairly often throughout the next year.

Learn React Online

After you went through React's documentation to learn about the basics and a few advanced concepts and patterns, and after you start to build a React application, it is time to look to other React resources online. Note that I mention this very late in this guide, because often React beginners are stuck in a never-ending story of just consuming content to learn React. Start to produce by developing React applications yourself or by writing about your learnings. Learning by doing is the key here. Every problem along the way can be looked up online.

And then if you want to learn more about React, check out all the other resources to learn React online. My recommendation is to not only consume one kind of learning material, but to diversify your learning resources:

React Tutorials
React Books
React Videos (YouTube, Twitch, Online Courses)
Web Development or React Podcasts
Interactive Courses

Not every kind of learning material may suit you. The same applies to the teaching styles of the people behind the larning material. Everyone has a different way to produce content and to offer it to their students, so check out which teaching style is best for you.

"Initially, when first approaching React, I had purchased a Udemy course from another teacher. However, I found myself getting quite lost after just a few videos. The teacher in that highly rated series kept it easy at first but then blindsided me with hard-to-grasp concepts and code and failed to inform what was going on. (Source)

If you are into reading, check out online tutorials and React books. Print books are a good resource to learn React offline. Even though many people are afraid that books are quickly outdated, many books are self-published and it takes the author only 1 day to have a new version of it online (even on Amazon). I believe it takes longer to update a video than written content nowadays.

If you are into watching videos, check out online courses by individual developers on YouTube, Udemy and the creator's own course platforms. As mentioned previously, don't get stuck only watching the content.

If you just want to keep up with recent React news, podcasts are a great way to stay ahead of the curve. You will listen to developers on the bleeding edge of the technology who regularly share something new. Podcasts are also a great way to learn while commuting or exercising. That's how I do it at least.

There are plenty of free React learning resources online that are high quality and accessible to everyone. If anyone asks me about becoming a React developer, I often send them straightaway to FreeCodeCamp. Regardless of which learning resource you pick, try to stay pragmatic by applying the learnings yourself. Don't passively consume the content. Be active and challenge yourself to hone your skills.

Learn React Roadmap

After you have learned React and feel comfortable with its basic and advanced implementation details, there are plenty of learning paths you can take to further advance your React skills. The React ecosystem is not opinionated but innovative and extensive. Two recommendations:

That's it from my side. Stay curious, commit to it every day by getting your hands dirty, be public about it, and run a marathon and not a sprint. Challenge yourself to advance your skills as a developer and become a React developer this year!