loading...
Cover image for ReactJS Roadmap 🗺 For Developers.💻

ReactJS Roadmap 🗺 For Developers.💻

theme_selection profile image themeselection Updated on ・7 min read

The React JS 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

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.

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 roadmapReact roadmapReact roadmap

by Adam Gołąb

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.

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.

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

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
  • 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

3. Learn React on the official website of ReactJS or complete some courses

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
-yarn
-pnpm

ii. Task Runners

-npm scripts
-gulp
-Webpack
-Rollup
-Parcel

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
-PostCSS
-Less
-Stylus

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
-Materialize, Material UI, Material Design Lite
-Bulma
-Semantic UI

You can check this comprehensive guide on Best CSS Frameworks In 2020 for detailed info.

iii. CSS Architecture

-BEM
-CSS Modules
-Atomic
-OOCSS
-SMACSS
-SUITCSS

iv. CSS in JS

-Styled Components
-Radium
-Emotion
-JSS
-Aphrodite

6. State Management

i. Component State/Context API

ii. Redux

a. Async actions (Side Effects)
-Redux Thunk
-Redux Better Promise
-Redux Saga
-Redux Observable

b. Helpers
-Rematch
-Reselect

c. Data persistence
-Redux Persist
-Redux Phoenix

d. Redux Form

iii. MobX

iv. Recoil

7. Type Checkers

8. Form Helpers

9. Routing

Components are the main part of React's powerful, responsive programming model, and Routing components are an essential part of any application.

10. API Clients

You can create something which communicates with other application using APIs like REST and GraphQL.

i. REST
-Fetch
-SuperAgent
-axios

ii. GraphQL
-Apollo
-Relay
-urql

11. Utility Libraries

Makes your work easier.

12. ReactJS UI libraries and frameworks:

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

For more detailes visit ReactJS UI Frameworks

13. Testing

It is a vital skill for React Developers.

i. Unit Testing

-Jest
-React testing library
-Enzyme
-Sinon
-Mocha
-Chai
-AVA
-Tape

ii. End to End Testing

-Selenium
-Webdriver
-Cypress
-Puppeteer
-Cucumber.js
-Nightwatch.js

iii. Integration Testing

-Karma

14. Internationalization

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

15. Server Side Rendering

React components are rendered on the server, and the output HTML content is delivered to the client or browser.

16. Static Site Generator

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

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

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

19. Desktop

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

20. Virtual Reality

  • React 360: Allows you to be exciting 360 and VR experiences using React.

You can check Vuexy React Admin Template which is made using the React.

Vuexy ReactJS Admin Template

Demo

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.

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 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 us:

We, at ThemeSelection, provide selected high quality, modern design, professional and easy-to-use premium and free bootstrap admin template, and UI Kits.

Also, don’t forget to follow us on Facebook and Twitter for more cutting edge web design and development related articles and content.

Discussion

pic
Editor guide
Collapse
jaca22 profile image
Jacek Dunikowski

Very nice content, thank u.

But are u sure moment.js should be listed here?

https://momentjs.com/docs/#/-project-status/
Enter fullscreen mode Exit fullscreen mode

Another common argument against using Moment in modern applications is its size. Moment doesn't work well with modern "tree shaking" algorithms, so it tends to increase the size of web application bundles. If one needs internationalization or time zone support, Moment can get quite large. Modern web browsers (and Node.js) expose internationalization and time zone support via the Intl object, codified as ECMA-402. Libraries like Luxon (and others) take advantage of this, reducing or removing the need to ship your own data files.


Alternative with same API:

https://github.com/iamkun/dayjs/
Enter fullscreen mode Exit fullscreen mode
Collapse
theme_selection profile image
themeselection Author

Agree...!! 👍Thank you very much for your appreciation and feedback. We are adding Day.js 🙂

Collapse
rowemore profile image
Rowe Morehouse

@themeselection ⇨ What did you use to create the roadmap / diagram?

Collapse
theme_selection profile image
themeselection Author

It is created by Adam Gołąb. We have mentioned his Github repo. He has made this map using Draw.io.

Collapse
thewdhanat profile image
Thew Dhanat

I think React Testing Library is taking over Enzyme. You might also consider mentioning Jamstack.

Collapse
theme_selection profile image
themeselection Author

Thank you very much for your appreciation and feedback🙂. We are adding it. 👍

Collapse
thewdhanat profile image
Thew Dhanat

Thanks for the updates. However, Jamstack is not a testing framework. It is an architecture design. It might be in “2. General development skills”

Thread Thread
theme_selection profile image
themeselection Author

Thanks for informing us, That's by mistake. We've added Jamstack in Static Site Generator.

Collapse
stevewhitmore profile image
Steve Whitmore

@kragon741 this is right up your alley

Collapse
kragon741 profile image
Matthew Kohn

Already bookmarked and in progress! Thanks. I have so much to learn, and I love it.

Collapse
theme_selection profile image
themeselection Author

Thank you very much for your appreciation. We are glad that you find this article useful.🙂

Collapse
pra3t0r5 profile image
Pra3t0r5

I've been learning and developing a large project in React the las two and-a-half months and man, the satisfaction that i felt reading this!

Althrought I consider most Javascript-based environments quite captivating to develop with, they have this tendency to make you wonder a lot if you are implementing things the best way. That's because every problem has already from dozens to thousands of solutions (some very distinct, many others very similar).

That begin said, i've been following almost the same path by mostly gut feeling. The only difference is that i started learning the whole framework by using React Native.

Nice.

Collapse
theme_selection profile image
themeselection Author

Thank you very much. We are glad that you like this article.🙂

Collapse
benfaught profile image
Benjamin Faught

Frontity. Server Side Rendered -> React for Wordpress - Framework
frontity.org/

Collapse
theme_selection profile image
themeselection Author

Thank you very much for your Feedback 👍. We are adding it. 🙂

Collapse
garethbrown82 profile image
Gareth Brown

Great road map! It might be worth mentioning Recoil as an up and comer for state management.

Collapse
theme_selection profile image
themeselection Author

Thank you very much for your feedback. We are adding it.👍

Collapse
nikhilroy2 profile image
nikhilroy2

everything you added there will be missing and updating day after day, so keep learning and finding new source to figure out more, thanks for this post man.

Collapse
theme_selection profile image
themeselection Author

Yes, learning is the key👍. Thank you very much for your appreciation.🙂

Collapse
jivkojelev91 profile image
JivkoJelev91

What about StoryBook ? I think he is great for documentation.

Collapse
theme_selection profile image
themeselection Author

Thank you very much for your suggestion👍. We have added it.

Collapse
aloksoni11 profile image
Collapse
theme_selection profile image
themeselection Author

Thank you very much. We are glad that you like it.🙂

Collapse
andrewbaisden profile image
Andrew Baisden

Great roadmap lots of information to read here.

Collapse
theme_selection profile image
themeselection Author

Thank you very much for your appreciation. We are glad that you find our article helpful.🙂

Collapse
opusmagnum profile image
Alexander Dobriakov

Thank you for a great overview!
What about Authentication and Authorisation flows and tools/services for ReactJS?

Collapse
theme_selection profile image
themeselection Author

Thank you very much for your appreciation👍. We are glad that you find our article useful.🙂 We have tried to cover steps that can help to kickstart the journey as a ReactJS Developer. To make it easy for all we have tried to keep it as simple as possible.

Collapse
williamxlr profile image
williamxlr

Really nice post, congrats!

Collapse
theme_selection profile image
themeselection Author

Thank you very much for your appreciation.🙂

Collapse
carmellemillar profile image
carmellemillar

what does gray mean, versus yellow in the diagram?

Collapse
enriqueedelberto profile image
Edelberto Enrique Reyes

Thanks for sharing. It's really interesting.

Collapse
theme_selection profile image
themeselection Author

Thank you very much for your appreciation 👍. We are glad that you find our article helpful.🙂

Collapse
timbogdanov profile image
Tim Bogdanov

LESS is way more popular than POSTCSS. How is Post CSS a must know?

Collapse
tbeseda profile image
Taylor Beseda

Got some numbers on that?

Collapse
edshav profile image
Eduard

Greate content but for 2019