DEV Community

Danish Saleem
Danish Saleem

Posted on

React - The Official Roadmap

The Prerequisites

Learning React is a great choice for Frontend Developer due to it’s larger community and popularity in the industry, however, you need to understand that React is not a technology for absolute beginners, so here is what you will need to know:

Basic HTML

  • Common Tags
  • Attributes
  • File Structure

Basic CSS

  • Applying Styles
  • Flexbox Layouts
  • Media Queries

Good Knowledge of JavaScript

  • Variables (let, const)
  • Loops and Conditionals
  • Arrow Functions
  • Arrays, Objects
  • Imports and Exports
  • How to use NPM

Initial Steps

Spend time to understand the base concept of React apps, learn how to create simple application, study the folder structure and the concept of components, your path:

create-react-app → Components → Functional Components → JSX → Props and States → Hooks: useState and useEffect → Conditional Rendering → Lists and Keys → Events and Input Handling

Follow the path and make sure to practice what you see, not just watch. Next, let’s learn about the React Ecosystem.

React Ecosystem

Since React is only a library and not a framework, you will need to work with various other libraries to build complete apps, here is the path to take:

Routing → React Router

State Management → Context API → Redux

Styling → Styled Components → Tailwind CSS

HTTP → Use Fetch In React → Axios

Forms → Hook Form Handling → Formik

There are plenty of options, but integrating libraries with the core React package is something that you will need to master in order to build advanced applications.

Advance Topics

If you think you mastered the basics, you should move on to learning these topics:

Advance Hooks (useRef, useMemo, useCallback, etc.) → Refs → Higher Order Components → Error Boundaries → Practice!

Now it’s time to practice and build some amazing projects and add them to your portfolio to impress!

Was this useful? Let me know with a comment. Share it with others and Save it for later!

Happy Coding 🧑‍💻


Let's connect 💜

You can follow me on Twitter, Instagram & GitHub

If you like this post. Kindly support me by Buying Me a Coffee

Buy Me a Coffee

Top comments (0)