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.
So let's start to follow the roadmap step by step.
Don’t let perfectionism become an excuse for never getting started.
1) Basics:
Before starting any new web framework you should know the basic building blocks of web development i.e. HTML, CSS, JavaScript. Without these, you can't go any further and achieve any milestone in web development.
HTML:
- Learn the basics of HTML and its core syntax.
- Make some web pages and exercise your skills.
CSS:
- Learn the basics of CSS.
- Styles pages with CSS properties.
- Explore different layout properties in css.
JavaScript:
- Learn the basic syntax.
- Learn the DOM operations.
- Learn the new ES6 features.
- Learn mechanisms typical for JS (Hoisting, Event Bubbling, Prototyping).
2) Necessary Development Skills:
Git, GitHub, GitLab:
- Learn GIT, create a few repositories on GitHub, share your code with your friends and community.
- Know HTTP(S) protocol, request methods (GET, POST, PUT, PATCH, DELETE, OPTIONS)
- Get familiar with the terminal, configure your shell (bash), learn some basic terminal commands.
- Practice some questions on algorithms and data structures so that your solution thinking capabilities can increase.
3) Learn React:
Now, this is the main purpose. You got to learn React and learn it well to become a React developer. The best place to learn React is the official website, but as a beginner, it can be a little bit overwhelming or I can a bit advance for you.
So for starting you can see some React Tutorials on YouTube or any kind of basic React JS Course so that you a brief content regarding React and then start learning from the official documentation provided by React.
4) Learn Some Build Tools:
Package Managers:
- npm
- yarn
Webpack
Rollup
Parcels
5) Styling in React:
CSS Preprocessors
CSS Frameworks
CSS Architecture
CSS in JS.
6) State Management:
Component State/Context API
Redux
MobX
7) Routing:
react-router
react-router-dom
redux-first router
router 5
8) API Clients:
Rest
- Fetch
- axios
GraphQL
- Apollo
- Relay
9) Utility Libraries:
Lodash
Moment
classnames
Numeral
Conclusion:
I think this will be enough for a starter pack I will add some paths later in this roadmap.
But for a beginner, it is more than enough to learn React Js and is ready to make some mind-blowing react apps.