Advanced Roadmap for React.js developers
Tags: react, showdev, javascript, programming
Published: 2021-11-25 11:15:46

![React.js advanced roadmap for developers](https://cdn-images-1.medium.com/max/2000/1*EXkscy4giJ6ec8TzftjcWw.png)

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.

![](https://cdn-images-1.medium.com/max/2000/0*zKcKlO3LuHbEBD2e.jpg)
>  *Roadmap to becoming a React developer:*

Below is the chart demonstrating the paths you can take and the libraries 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

![Roadmap For React.js developers](https://cdn-images-1.medium.com/max/3084/1*-A9vh80AqLKLIyV4HIA02g.png)

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

## Resources

* [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 details 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/)

These libraries offer 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.

### 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 is 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 is in JavaScript with a 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/): This allows you to be exciting 360 and VR experiences using React.

## 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, you need to be confused or overwhelmed by this roadmap; you can start small and 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 2020.

## About me:

I am a react.js developer at [DhiWise](https://www.dhiwise.com/?utm_campaign=Ravi%20Sojitra&utm_source=Infl), which is a ProCode platform that helps you build clean, scalable, and customizable Node.js, Android, iOS, Flutter and React code. Focus on what matters as a programmer and let DhiWise do the rest.

Also, If you wish to learn Advanced react component patterns, [please find it here.](https://medium.com/dhiwise/react-component-patterns-805a60b88dba)

- By Ravi Sojitra (Tech Lead | DhiWise)