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.
Join the DZone community and get the full member experience.Join For Free
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.
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.
10. API Clients
Thankfully, there are many API clients available for React developers, here is a list of them:
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:
- class names
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.
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:
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.
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.
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:
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
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.
The Road Map suggests you learn the following libraries:
- React Native
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!
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
- 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.
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!
If you enjoyed this article and want to learn more about React, check out this collection of tutorials and articles on all things React.
Published at DZone with permission of Javin Paul, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.