The Prerequisites
Learning React is a great choice for Frontend Developer due to it’s larger community and popularity in the industry, however, you need to understand that React is not a technology for absolute beginners, so here is what you will need to know:
Basic HTML
- Common Tags
- Attributes
- File Structure
Basic CSS
- Applying Styles
- Flexbox Layouts
- Media Queries
Good Knowledge of JavaScript
- Variables (let, const)
- Loops and Conditionals
- Arrow Functions
- Arrays, Objects
- Imports and Exports
- How to use NPM
Initial Steps
Spend time to understand the base concept of React apps, learn how to create simple application, study the folder structure and the concept of components, your path:
create-react-app → Components → Functional Components → JSX → Props and States → Hooks: useState and useEffect → Conditional Rendering → Lists and Keys → Events and Input Handling
Follow the path and make sure to practice what you see, not just watch. Next, let’s learn about the React Ecosystem.
React Ecosystem
Since React is only a library and not a framework, you will need to work with various other libraries to build complete apps, here is the path to take:
Routing → React Router
State Management → Context API → Redux
Styling → Styled Components → Tailwind CSS
HTTP → Use Fetch In React → Axios
Forms → Hook Form Handling → Formik
There are plenty of options, but integrating libraries with the core React package is something that you will need to master in order to build advanced applications.
Advance Topics
If you think you mastered the basics, you should move on to learning these topics:
Advance Hooks (useRef, useMemo, useCallback, etc.) → Refs → Higher Order Components → Error Boundaries → Practice!
Now it’s time to practice and build some amazing projects and add them to your portfolio to impress!
Was this useful? Let me know with a comment. Share it with others and Save it for later!
Happy Coding 🧑💻
Let's connect 💜
You can follow me on Twitter, Instagram & GitHub
If you like this post. Kindly support me by Buying Me a Coffee
Top comments (0)