Learning React - Roadmap
Your first step to get better at React
The aim of this article is to handhold developers who wants to learn React . This article is part of the work in progress Web Developer Roadmap series. Once complete this series will be a step by step detailed guide to become a Web Developer. Awesome Right ? I know !!
Anyone who is interested in having a career in Web Development.
ReactJS is the leading UI library to develop web application. Its open source and is actively developed and maintained by the brilliant folks at Meta( previously Facebook). When you work on React, you will end up creating re-usable components which work with each other and eventually create beautiful pixel perfect User interface.
What is a component ?
In React, everything is a component. A component could be a Greeting Message shown to a user when he logs to an application. A component to show user avatar. could be a button or even a dropdown doing something within a web application. It could also be a slightly complicated component which is responsible for file uploads across the application. The main idea with Components is to make sure they are created in such a way that they can be re-purposed for multiple use cases. Sounds Interesting ? Read on.
Why should you learn React ?
- React is the go to library for creating User Interface since a few years now
- The demand for Web Developer was never this huge
- Its fun
- A bit of HTML, CSS
Note: Please do take these percentages with a pinch of salt. This is really to help you understand the importance of HTML, CSS and JS. Don't quote these percentages in any interviews. It wont help you :-)
So, Where do I start
I'll assume you are already aware of basics of HTML, CSS and JS. If you know a few HTML tags and how to style them, you are good to go.
Basics of JS
- Various data types, declaring variables - var, let & const
- If else statements
- For loops, For Each, For Of loops
- Arrays and Objects
Just make sure you read & understand everything in this MDN link and you will be fine.
Once you are done, read this MDN link for a quick reintroduction of the topics.
This will make sure you are ready.
ES6 & beyond
Pro Tip: Put knowledge to practice. Do examples of what you have read about.
With the Prerequisites taken care, now you can actually focus on learning about React. The official Documentation is pretty good.
React Basics - Level 0
- Introduction to React
- What is JSX and what is the need for JSX ?
- Function components In React. (Feel free to skip class components)
- Mindset needed to develop in React.
- Props and State
- Conditional Rendering & Handling Events
- React Hooks - useState & UseEffect
- Rules of Hooks
React - Level 1
- Prop Drilling and Context
- Refs & uncontrolled Components
- Error Boundaries.
- Babel, Webpack.
- Higher Order Components
- Make API calls to the server using fetch
React - Level 2
Once you have a clear understanding of Level 1, its time to start building real world applications with React and Friends. Friends? Yes, React is very good at showing data. For almost everything else it needs other libraries. Everything else means - Global State Management, Page Routing, Making API calls to name a few.
Learning these three libraries will make you that much closer to a real-world developer.
More to come
This is still a work in progress version. I'll add assignments in this section so that readers can practice and get better at React. More to come.
Until next time, Keep Learning, Sharing and Caring.
Photo by Damian Zaleski