Complete road map to learn React
Tags: react, webdev, javascript, beginners
Published: 2021-05-01 10:30:07

The original post is in Notion. Do checkout.
[Here](https://www.notion.so/zephyrus21/React-Complete-Road-Map-8a0dde12c3f840928cac9cf0fad93838)

*React is a library (from Facebook) for building composable user interfaces. It encourages the creation of reusable UI components, which present data that changes over time. React abstracts away the DOM from you, offering a simpler programming model and better performance.*

# Getting Started - React, Hooks & Redux

*You could learn React.js from a variety of resources. Pick the best for you.*

### Learn from the official documentation of React.

[React - A JavaScript library for building user interfaces](https://reactjs.org/)

### Take a course from Udemy.

*Link to some of the best Courses.*

[Modern React with Redux Training Course](https://www.udemy.com/course/react-redux/)

[React 16: The Complete Course (incl. React Router 4 & Redux)](https://www.udemy.com/course/react-the-complete-guide-incl-redux/)

### Watch YouTube Tutorials.

*Complete React Course (the best on YouTube)*

[Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks](https://www.youtube.com/watch?v=4UZrsTqkcW4&list=PLoG5w2Kv7mVSc0NpSR6uWE2Y0q0mWUSVe&index=2&ab_channel=freeCodeCamp.org)

[Full Modern React Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d)

*Only looking for React Concepts (do watch for clearing concepts)*

[ReactJS Tutorial for Beginners](https://www.youtube.com/playlist?list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3)

[React Hooks Tutorial](https://www.youtube.com/playlist?list=PLC3y8-rFHvwisvxhZ135pogtX7_Oe3Q3A)

*If you are looking for a quick Crash Course.*

[Learn React JS - Full Course for Beginners - Tutorial 2019](https://www.youtube.com/watch?v=DLX62G4lc44&ab_channel=freeCodeCamp.org)

In this section you must have learned about React along with Redux and other various packages and technologies. Here is a quick link for you on Create React App.

[Create React App](https://create-react-app.dev/)

### Deep dive into Redux

*Refer to this websites for in-depth concepts on Redux.*

[React Redux | React Redux](https://react-redux.js.org/)

[Redux Toolkit | Redux Toolkit](https://redux-toolkit.js.org/)

*A complete advanced Redux Course.*

[The Ultimate Redux Course](https://codewithmosh.com/p/ultimate-redux)

*Clear you redux concepts with this playlist.*

[React Redux Tutorial](https://www.youtube.com/playlist?list=PLC3y8-rFHvwheJHvseC3I0HuYI2f46oAK)

### Firebase with React

*Learn how to integrate Firebase with Your App.*

[React, Redux & Firebase App Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9iWstfXntcj8f-dFZ4UtlN3)

---

# UI Components and Styles

*Though you can use CSS, SCSS for your styling but there are some UI components libraries.*

### UI Libraries

[Material-UI: A popular React UI framework](https://material-ui.com/)

[Ant Design - The world's second most popular React UI framework](https://ant.design/)

[Design System for React JS](https://atomizecode.com/)

### Styled Components

*This is one of the most in fact the most powerful styling tool for react.*

[styled-components](https://styled-components.com/)

### Also look for this awesome CSS framework

[Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.](https://tailwindcss.com/)

*Here is a awesome site to motivate you to develop awesome shits.*

[React.js Examples](https://reactjsexample.com/)

Another site with awesome Libraries for your React project.

[React Libraries](https://reactlibraries.com/)

Now that you have a complete knowledge on React, Styling and Firebase, have a look at this curated playlist of some awesome react projects.

[React Best Tutorials](https://www.youtube.com/playlist?list=PLoG5w2Kv7mVSc0NpSR6uWE2Y0q0mWUSVe)


## Also below is a complete React roadmap.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3dyx36heqi8jza22dlt.png)

> At this point of time you must have made 2, 3 projects and are ready to go on to the next thing. React Frameworks.

# React Frameworks

*There are two best framework using React.*

### Gatsby.js

[The Fastest Frontend for the Modern Web](https://www.gatsbyjs.com/)

*Here are some of the best Tutorials available on YouTube*

[Gatsby Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9hw1g77I35ZivVLe8k2nvjB)

[Gatsby JS - The Great Gatsby Bootcamp [Full Tutorial]](https://www.youtube.com/watch?v=8t0vNu2fCCM)

### Next.js

[Next.js by Vercel - The React Framework](https://nextjs.org/)

*Here are some of the best Tutorials available on YouTube*

[Next.js Tutorial for Beginners](https://www.youtube.com/playlist?list=PL4cUxeGkcC9g9gP2onazU5-2M-AzA8eBw)

[Next.js Crash Course 2021](https://www.youtube.com/watch?v=mTz0GXj8NN0&t=10s&ab_channel=TraversyMedia)

---

# GraphQL

*This is a awesome Tool for query, specially if you use Gatsby or Next then you must learn it as both of them heavily rely upon this.*

[A query language for your API](https://graphql.org/)

*Here are some of the best Tutorials available on YouTube*

[GraphQL Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9iK6Qhn-QLcXCXPQUov1U7f)

[GraphQL Full Course - Novice to Expert](https://www.youtube.com/watch?v=ed8SzALpx1Q&t=1866s&ab_channel=freeCodeCamp.org)
---