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.
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.
by Adam Gołąb
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
- 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
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
ii. Task Runners
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.
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.
You can check this comprehensive guide on Best CSS Frameworks In 2020 for detailed info.
iii. CSS Architecture
iv. CSS in JS
d. Redux Form
Components are the main part of React's powerful, responsive programming model, and Routing components are an essential part of any application.
You can create something which communicates with other application using APIs like REST and GraphQL.
Makes your work easier.
It is a vital skill for React Developers.
i. Unit Testing
ii. End to End Testing
iii. MIntegration Testing
Both these library offers React components and an API to format dates, strings, and numbers, including handling translations and pluralization.
React components are rendered on the server, and the output HTML content is delivered to the client or browser.
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.