Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Learn React.js, Part 2: The React Road Map for Modern Web Developers

DZone's Guide to

How to Learn React.js, Part 2: The React Road Map for Modern Web Developers

If you're interested in becoming a React.js developer, read on for a list of topics to learn, as well as courses and resources to help you learn them.

· Web Dev Zone ·
Free Resource

Code something amazing with the IBM library of open source blockchain patterns. Content provided by IBM.

Welcome back! If you missed Part 1, check it out here!

8. Form Helpers

Apart from type checkers, it’s also good to learn form helpers, like Redux Form, which provides the best way to manage your form state in Redux. Apart from Redux Form, you can also take a look at Formik, Formsy, and Final form.

9. Routing

Components are at the heart of React’s powerful, declarative programming model, and routing components are an important part of any application.

React Router provides a collection of navigational components that are composed declaratively with your application. Whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering. Apart from React Router, you can also take a look at Router 5, Redux-First Router, and React Router.

Both Max’s React 16 — The Complete Guide and Stephen Grider’s Modern React with Redux course cover React Router in good detail.

10. API Clients

In today’s world, you will rarely build an isolated GUI, instead, there is more chance that you will build something which communicates with other application using APIs like REST and GraphQL.

Thankfully, there are many API clients available for React developers, here is a list of them:
 
 REST

  • Fetch
  • SuperAgent
  • Axios

GraphQL

  • Apollo
  • Relay
  • urql

Apollo Client is my favorite and provides an easy way to use GraphQL to build client applications. The client is designed to help you quickly build a UI that fetches data with GraphQL and can be used with any JavaScript front-end.

By the way, if you don’t know GraphQL and REST, I suggest you to spend some time learning them. If you need courses, the following are my recommendations:

11. Utility Libraries

These are the libraries which make your work easier. There are many utility libraries available for React developers as shown below:

  • Lodash
  • Moment
  • class names
  • Numeral
  • RxJS
  • Ramda

I don’t suggest you learn all these and neither does the Road Map. If you look closely, only Lodash, Moment, and class names are drawn in yellow, stating that you should start with them.

12. Testing

Now, this is one of the important skills for React developers which is often overlooked, but if you want to stay ahead of the competition then you should focus on learning libraries which will help you in testing. Here also, you have libraries for unit testing, integration testing, and end-to-end testing.

Here is a list of libraries mentioned in the roadmap:

Unit Testing

  • Jest
  • Enzyme
  • Sinon
  • Mocha
  • Chai
  • AVA
  • Tape

End-to-End Testing

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

Integration Testing

  • Karma

You can learn the library you want but Jest and Enzyme are recommended. The Complete React Web Developer Course (with Redux) also covers testing React applications, and goes over both Jest and Enzyme.

13. Internationalization

This is another important topic for developing front-end apps which is used worldwide. You may need to support the local GUI version for Japan, China, Spain, and other European countries.

The Road Map suggest you learn the following technology but they are all under good to know:

  • React Intl
  • React i18next

Both of these libraries provide React components and an API to format dates, numbers, and strings, including pluralization and handling translations.

14. Server-Side Rendering

You might be thinking, what is the difference between server-side rendering and client-side rendering? Let’s clear that up before talking about the libraries which support server-side rendering with React.

Well, in client-side rendering, your browser downloads a minimal HTML page. It then renders the JavaScript and fills the content into it. 

In the case of server-side rendering, React components are rendered on the server and the HTML output is delivered to the client or browser.

The Road Map recommends the following server-side rendering libraries:

  • Next.js
  • After.js
  • Rogue

But, I suggest that learning just Next.js should be enough, and thankfully Max’s React 16 — The Complete Guide also covers Next.js basics which should be good enough to start with.

15. Static Site Generator

The Gatsby.js is a modern static site generator. You can use Gatsby to create personalized, logged-in experiences website. They combine your data with JavaScript and create good HTML content.

16. Backend Framework Integration

React on Rails integrates Rails with (server rendering of) Facebook’s React front-end framework. It provides server rendering, often used for SEO crawler indexing and UX performance and not offered by Rails/Webpacker.

17. Mobile

This is another area where learning React can be really beneficial, as React Native is quickly becoming the standard way to develop mobile application in JavaScript with a native look and feel. 

The Road Map suggests you learn the following libraries:

  • React Native
  • Cordova/PhoneGap

But, I think, just learning React Native is good enough.

Thankfully, there are some good courses to learn React Native that are also available like Stephen Grider’s The Complete React Native and Redux course which will teach you how to build full React Native mobile apps ridiculously fast!

18. Desktop

There also exists some React-based frameworks to build desktop GUIs, like React Native Windows which allows you to build native UWP and WPF apps with React.

The framework suggests the following libraries:

  • Proton Native
  • Electron
  • React Native Windows

But, they all are for advanced exploring. If you have already mastered React, take a look at them.

19. Virtual Reality

If you are interested in building Virtual Reality-based applications, then there are frameworks like React 360, which allows you to exciting 360 and VR experiences using React. If you are interested in that area, you can further explore React 360.

Closing Notes

That’s all about for this 'How to learn React.js'series. It’s indeed very comprehensive and there is good chance that you won’t learn all of these in the remaining 2018, but don’t worry, all the technologies will still be valid for 2019 and you can effectively use this as 2019 React Road Map.

Thanks for reading this article series. You might be thinking that there is so much stuff to learn, so many courses to join, but you don’t need to worry.

There is a good chance that you may already know most of the stuff, and there are also a lot of useful free resources which you can use. I have also linked to them throughout the articles, along with best resources, which are certainly not free, but completely worthy of your time and money.

I am a particular fan of Udemy courses as they are very affordable and provide a lot of value; but you are free to choose the course you want.

At the end of the day, you should have enough knowledge and experience about the things mentioned here.

Good luck with your React.js journey! It’s certainly not going to be easy, but by following this road map and guide, you are one step closer to becoming tghe React developer you always wanted to be.
 
All the best on your React journey!

P.S. — If you don’t mind learning from free resources then you can also check out my list of Free React JS courses to start your journey.

Start coding something amazing with our library of open source Cloud code patterns. Content provided by IBM.

Topics:
web dev ,react.js ,react tutorials ,front-end development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}