ReactJS Roadmap 🗺 For Developers 💻
Tags: webdev, react, javascript, beginners
Published: 2020-10-06 13:53:31

The [React JS](https://reactjs.org/) or React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. It has grown as one of the best libraries in recent years for component-based GUI development.

Although, there are other front-end frameworks like Angular and Vue.js available, what sets React apart from others is, it just focuses on component-based GUI development and doesn’t invade other areas.

![ReactJS](https://dev-to-uploads.s3.amazonaws.com/i/me6sbpz893h3a6ip5zsv.jpg)

> Roadmap to becoming a React developer:

Below is the chart demonstrating the paths that you can take and the libraries that you would want to learn to become a React developer. This chart is made by [Adam Gołąb](https://twitter.com/adam_devops).

> Note: **This roadmap will give you an idea about the landscape and guide you if you are confused about where to begin or what to learn next. In the end, it depends on your experience as you will grow some understanding of why one tool is better suited for some cases than the other one. It is not necessary that handy and trendy one is always perfect. So, go through the map and start developing.**

---

### Roadmap: 

[![React roadmap](https://dev-to-uploads.s3.amazonaws.com/i/ilkbc3nbg9o30gibx1lx.png)![React roadmap](https://dev-to-uploads.s3.amazonaws.com/i/2l5255tz8gff1y0v71oz.png)![React roadmap](https://dev-to-uploads.s3.amazonaws.com/i/ry3vv43phgq362tpd91h.png)](https://github.com/adam-golab/react-developer-roadmap/blob/master/roadmap.png)

by [Adam Gołąb](https://twitter.com/adam_devops)

### Resources:

#### 1. Basics: HTML, CSS & JS

i. HTML: First pillar & the most important skill for web developers as it provides the structure for a web page.
- Learn the basics of HTML 
- Make a few pages as an exercise

You can check Tutorial For [HTML](https://www.w3schools.com/html/).

ii. CSS: Second pillar of web development and used to style web pages so that they look good.
 
 - Learn the basics of CSS Style pages from the previous step 
 - Build a page with grid and flexbox

You can check Tutorial For [CSS](https://www.w3schools.com/css/).

iii. JS Basics: Third pillar of web development and used to make your web pages interactive.

- Get familiar with the syntax Learn basic operations on DOM 
- Learn mechanisms typical for JS (Hoisting, Event Bubbling, Prototyping)  
- Make some AJAX (XHR) calls  Learn new features (ECMA Script 6+) 
- Additionally, get familiar with the jQuery library

You can check tutorials for [JavaScript](https://javascript.info/)

#### 2. General Development Skills

- Learn GIT, create a few repositories on GitHub, share your code with other people
- Know HTTP(S) protocol, request methods (GET, POST, PUT, PATCH, DELETE, OPTIONS)
- Don't be afraid of using Google,  [Power Searching with Google](http://www.powersearchingwithgoogle.com/)
- Get familiar with the terminal, configure your shell (bash, zsh, fish)
- Read a few books about algorithms and data structures 
- Read a few books about design patterns

Also check the **[Sneat React Admin Template](https://themeselection.com/item/sneat-mui-react-nextjs-admin-template/)**
[![Sneat MUI React NextJS Admin Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gkrwj5wdy71aq9xry74l.png)](https://themeselection.com/item/sneat-mui-react-nextjs-admin-template/)
An Ultimate [**Next Js Admin Template**](https://themeselection.com/item/category/next-js-admin-template/) with both JavaScript and TypeScript support. 


#### 3. Learn React on the official website of [ReactJS](https://reactjs.org/tutorial/tutorial.html)  or complete some  [courses](https://egghead.io/courses/the-beginner-s-guide-to-react)


#### 4. Get familiar with the tools that you will be using.

To become a React developer, you should spend some time on learning tools that you will use as a web developer like built tools, unit testing tools, debugging tools, etc.  
  
Here are some of the build tools:
 
i. Package Managers
   
-[npm](https://www.npmjs.com/)
-[yarn](https://yarnpkg.com/lang/en/)
-[pnpm](https://pnpm.js.org/)

ii. Task Runners
 
-[npm scripts](https://docs.npmjs.com/misc/scripts)
-[gulp](https://gulpjs.com/)
-[Webpack](https://webpack.js.org/)
-[Rollup](https://rollupjs.org/guide/en)
-[Parcel](https://parceljs.org/)

#### 5.  Styling
   
 i. CSS Preprocessor

A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. preprocessors can make CSS code more organized.

-[Sass/CSS](https://sass-lang.com/)
-[PostCSS](https://postcss.org/)
-[Less](http://lesscss.org/)
-[Stylus](http://stylus-lang.com/)
       
 ii. CSS Frameworks

CSS framework is a code library that abstracts common web designs and makes the designs easier for a developer to implement in their web apps. In simple terms, a CSS framework is a collection of CSS style-sheets that are prepped and ready to use.

-[Bootstrap](https://getbootstrap.com/)
-[Materialize](https://materializecss.com/),  [Material UI](https://material-ui.com/),  [Material Design Lite](https://getmdl.io/)
-[Bulma](https://bulma.io/)
-[Semantic UI](https://semantic-ui.com/)

> You can check this comprehensive guide on **[Best CSS Frameworks In 2020](https://dev.to/theme_selection/best-css-frameworks-in-2020-1jjh)** for detailed info.

iii. CSS Architecture

-[BEM](http://getbem.com/)
-[CSS Modules](https://github.com/css-modules/css-modules)
-[Atomic](https://acss.io/)
-[OOCSS](https://github.com/stubbornella/oocss/wiki)
-[SMACSS](https://smacss.com/)
-[SUITCSS](https://suitcss.github.io/)

iv. CSS in JS

-[Styled Components](https://www.styled-components.com/)
-[Radium](https://formidable.com/open-source/radium/)
-[Emotion](https://emotion.sh/)
-[JSS](http://cssinjs.org/)
-[Aphrodite](https://github.com/Khan/aphrodite)

#### 6.  State Management

i.  [Component State](https://reactjs.org/docs/faq-state.html)/[Context API](https://reactjs.org/docs/context.html)

ii.  [Redux](https://redux.js.org/)

a. Async actions (Side Effects)
           -[Redux Thunk](https://github.com/reduxjs/redux-thunk)
           -[Redux Better Promise](https://github.com/Lukasz-pluszczewski/redux-better-promise)
           -[Redux Saga](https://redux-saga.js.org/)
           -[Redux Observable](https://redux-observable.js.org/) 

b. Helpers
           -[Rematch](https://rematch.gitbooks.io/rematch/)
           -[Reselect](https://github.com/reduxjs/reselect)

c. Data persistence
           -[Redux Persist](https://github.com/rt2zz/redux-persist)
           -[Redux Phoenix](https://github.com/adam-golab/redux-phoenix)
 
d. [Redux Form](https://redux-form.com/)

iii. [MobX](https://mobx.js.org/)

iv. [Recoil](https://recoiljs.org/)

> It is always advisable to use [**React Admin Dashboard**](https://themeselection.com/item/category/react-admin-templates/) to create progressive, modern, and responsive web apps

#### 7. Type Checkers

- [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html)
- [TypeScript](https://www.typescriptlang.org/)
- [Flow](https://flow.org/en/)

#### 8.  Form Helpers

- [Redux Form](https://redux-form.com/)
- [Formik](https://github.com/jaredpalmer/formik)
- [Formsy](https://github.com/formsy/formsy-react)
- [Final Form](https://github.com/final-form/final-form)

#### 9.  Routing
Components are the main part of React's powerful, responsive programming model, and Routing components are an essential part of any application.  
  
- [React-Router](https://reacttraining.com/react-router/)
- [Router5](https://router5.js.org/)
- [Redux-First Router](https://github.com/faceyspacey/redux-first-router)
- [Reach Router](https://reach.tech/router/)

#### 10.  API Clients
You can create something which communicates with other application using APIs like REST and [GraphQL](https://graphql.org/).  
  
i. REST
-[Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
-[SuperAgent](https://visionmedia.github.io/superagent/)
-[axios](https://github.com/axios/axios)

ii. GraphQL
-[Apollo](https://www.apollographql.com/docs/react/)
-[Relay](https://facebook.github.io/relay/)
-[urql](https://github.com/FormidableLabs/urql)

#### 11.  Utility Libraries

Makes your work easier.
- [Lodash](https://lodash.com/)
- [Day.js](https://github.com/iamkun/dayjs/)
- [Moment](https://momentjs.com/)
- [classnames](https://github.com/JedWatson/classnames)
- [Numeral](http://numeraljs.com/)
- [RxJS](http://reactivex.io/)
- [ImmutableJS](https://facebook.github.io/immutable-js/)
- [Ramda](https://ramdajs.com/)

#### 12. ReactJS UI libraries and frameworks:

The following are some of the best ReactJS UI libraries and frameworks.

- [Material UI](https://material-ui.com/)
- [React Bootstrap](https://react-bootstrap.github.io/)
- [ReactStrap](https://reactstrap.github.io/)
- [Ant Design](https://ant.design/)
- [Blueprint JS](https://blueprintjs.com/)
- [Evergreen](https://evergreen.segment.com/)
- [Storybook](https://storybook.js.org/)

> For more detailes visit [**ReactJS UI Frameworks**](https://themeselection.com/best-reactjs-ui-frameworks/)

#### 13. Testing

It is a vital skill for React Developers. 

i. Unit Testing

-[Jest](https://facebook.github.io/jest/)
-[React testing library](https://testing-library.com/docs/react-testing-library/intro)
-[Enzyme](http://airbnb.io/enzyme/)
-[Sinon](http://sinonjs.org/)
-[Mocha](https://mochajs.org/)
-[Chai](http://www.chaijs.com/)
-[AVA](https://github.com/avajs/ava)
-[Tape](https://github.com/substack/tape)

ii. End to End Testing

-[Selenium](https://www.seleniumhq.org/)
-[Webdriver](http://webdriver.io/)
-[Cypress](https://cypress.io/)
-[Puppeteer](https://pptr.dev/)
-[Cucumber.js](https://github.com/cucumber/cucumber-js)
-[Nightwatch.js](http://nightwatchjs.org/)

iii. Integration Testing

-[Karma](https://karma-runner.github.io/)

#### 14. Internationalization

- [React Intl](https://github.com/yahoo/react-intl)
- [React i18next](https://react.i18next.com/)

Both these library offers, React components, and an API to format dates, strings, and numbers, including handling translations and pluralization. 

#### 15.  Server Side Rendering

- [Next.js](https://nextjs.org/)
- [After.js](https://github.com/jaredpalmer/after.js)
- [Rogue](https://github.com/alidcastano/rogue.js)
- [Frotinity](https://frontity.org/)

React components are rendered on the server, and the output HTML content is delivered to the client or browser.  
  
#### 16.  Static Site Generator


   - [Jamstack](https://jamstack.org/generators/) 
   - [Gatsby](https://www.gatsbyjs.org/)

You can use Gatsby to create a personalized, logged-in experiences website. They combine your data with JavaScript and create well-formed HTML content. 

For more details about SSG check out our detailed guide on Best [**Static Site Generator**](https://dev.to/theme_selection/css-grid-generator-55l9) 

#### 17.  Backend Framework Integration

-  [React on Rails](https://shakacode.gitbooks.io/react-on-rails/content/)

It integrates Rails with (server rendering of) Facebook's React front-end framework. It provides Server rendering, which is often used for SEO crawler indexing and UX performance, and not offered by rails/webpacker.  

#### 18.  Mobile

-  [React Native](https://facebook.github.io/react-native/)
-  [Cordova](https://cordova.apache.org/)/[Phonegap](https://phonegap.com/)

The standard way to develop a mobile application in JavaScript with native look and feel.  
 
#### 19.  Desktop

- [Proton Native](https://proton-native.js.org/)
- [Electron](https://electronjs.org/)
- [React Native Windows](https://github.com/Microsoft/react-native-windows)

Allows you to build native UWP and WPF apps with React.  

#### 20.  Virtual Reality

- [React 360](https://facebook.github.io/react-360/): Allows you to be exciting 360 and VR experiences using React. 

#### Other Useful Resources and Collections:

- [React Boilerplate](https://themeselection.com/react-boilerplate/)
- [React Redux Admin Templates free](https://themeselection.com/react-redux-admin-templates/)
- [Ultimate ReactJS Resources](https://dev.to/theme_selection/ultimate-reactjs-resources-for-web-developers-2021-424c)
- [Open Source ReactJS Admin Templates](https://dev.to/theme_selection/best-15-open-source-reactjs-admin-templates-1g8e)

****
Check out the **[Materio – MUI React Next.js Admin Template](https://themeselection.com/products/materio-mui-react-nextjs-admin-template/)**. 
It is the most developer-friendly 🤘🏻 & highly customizable✨ [React Admin Dashboard Template](https://themeselection.com/item/category/react-admin-templates/) based on React.  If you’re a developer looking for the **Best React Admin Template** that is enriched with features, and highly customizable look no further than the Materio 🤩. 

Besides, the highest industry standards are considered to bring you one of the best React Admin Templates.


[![Materio MUI React Next js Admin Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fc72wlvy9t1i8skiyrr3.png)](https://themeselection.com/item/materio-mui-react-nextjs-admin-template/)

It is not just fast 🚀 and easy to use, but highly scalable. Furthermore, it offers ultimate convenience and flexibility, you’ll be able to build whatever application you want with very little hassle.

Materio also offers invaluable features that aim to help you create premium quality single-page apps exactly as you imagine them🤘🏻. Furthermore, it comes with unique and useful tools such as fuzzy search, Dark, Semi-Dark & Bordered layout options, Advanced cards, and Charts. In addition, it offers amazing features as follows.

**Features:**

-   Pure ReactJS, No jQuery Dependency
-   Built with **Next.js & MUI**
-   Utilizes NextJS, React router
-   Based on **functional components & React hooks**
-   Includes Both **TS & JS Versions** 🎉
-   **AUTH & ACL** Support
-   **Internationalization/i18n & RTL** Ready
-   Code Splitting, Lazy loading

[Demo](https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/landing/) [Download](https://themeselection.com/products/materio-mui-react-nextjs-admin-template/)

Also, available in **[Bootstrap Dashboard](https://themeselection.com/item/category/bootstrap-admin-templates/)** Version.

[![Materio Bootstrap HTML Adin Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unw3ws7fbzz6ib1rz8fj.png)](https://themeselection.com/item/materio-bootstrap-html-admin-template/)

### Conclusion:

If you think the roadmap can be improved, please do open a PR with any updates and submit any issues on the original git repo, Adam Golab's [React-developer-roadmap](https://github.com/adam-golab/react-developer-roadmap). 

That's all about **The ReactJS RoadMap For Developers**. It's very comprehensive for sure, but there is a good chance that many of you may already know most of the stuff. Even if you don't know, no need to be confused or overwhelmed by this roadmap; you can start small and then follow along. 

Apart from this, there is an article on the best [ReactJS UI Frameworks](https://themeselection.com/best-reactjs-ui-frameworks/) and component libraries which will be helpful, too.

There are many ways to becoming a React Developer and if you already know React, you can surely find some more tools and technologies to add to your kitty and become even a better React Developer in 2022.
You can also download the [**Free Admin**](https://themeselection.com/item/category/free-admin-templates/) version of Materio.

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3ab15tepl4ll07d45zi.png)](https://themeselection.com/item/materio-free-mui-react-nextjs-admin-template/)

****

### About us:

We, at  [ThemeSelection](https://themeselection.com/), provide selected high quality, modern design, professional and easy-to-use premium and free [VueJS Admin Templates](https://themeselection.com/products/category/vuejs-admin-templates/), [Bootstrap admin template](https://themeselection.com/products/category/bootstrap-admin-templates/), and Free [UI Kits](https://themeselection.com/products/category/free-ui-kits/).

Also, don’t forget to follow us on  [Facebook](https://www.facebook.com/ThemeSelections/)  and  [Twitter](https://twitter.com/Theme_Selection)  for more cutting edge web design and development related articles and content.