What is React?
React is a free and open source JavaScript library for building complex user interfaces by dividing your application into smaller components. It is maintained by Facebook and a community of developers.
Pre-requisites
Before learning React, it is important to have a solid understanding of
- HTML
- CSS
- JavaScript
You should have already used HTML and CSS for creating layouts for your web application. JavaScript takes some time to lean as it is a programming language. Spend at least a month or two learning JavaScript.
Don’t just learn and learn, but also apply what you have learned by creating small projects to implement the knowledge that you have gained.
These are the topics to learn and understand deeply:
- Variables
- if/else conditions and switch statements
- Difference between var, let & const
- Functions
- Arrays
- Array methods like filter, map, reduce etc.
- Promises
- Callbacks
- Async/await
- Classes and OOPs Concepts
React
Now that you have a solid grasp of JavaScript essentials, it is finally time to start diving into React. You can start learning React by taking a look at the React official documentation or by taking the Official React Tutorial to help get you started and to get an idea of how React works.
The React Docs are are written very well and it covers all the fundamentals of React.
Learn these topics very well to understand React fundamentally.
- JSX
- Components (Functional and Class based)
- Lifecycle Methods
- State
- Props
- Handling events
- Forms
- Conditional Rendering
- Working with third-party APIs.
Once you have gained understanding of these topics, it is time for you to create projects to practically apply the topics that you have learned. You can create new projects from scratch with React or remake the ones you already made while learning vanilla JavaScript using React.
The React Router
React router is a routing library for react which will help you to navigate through different pages in your React App. Learn about loading specific page’s content, passing params in the URL and redirecting. Additionally, it’s important to understand that react router is not a part of React but it’s a routing library made for React.
Advanced React
Now, that you have basic React knowledge and also created some basic projects, it is time to learn some advanced concepts like Hooks, Context, Refs, etc.
Take a look at React Docs and learn these concepts.
- Context
- Hooks
- Error Boundaries
- Higher Order Components
- Code Splitting
- Refs
- Forwarding Refs
- Render props
Extras
You can also learn some additional libraries like Material UI, reactstrap, tailwindcss, and Semantic UI once you have learned the basics of React. These libraries will help you in your day-to-day development with React. But, you don’t have to learn everything. You can try and learn them once you are done with React basics and can fully make projects.
Congratulations! 🎉
You are now a React Developer.
Resources to learn React
- React JS Crash Course 2021 by Traversy Media
- Full React Course 2020 — Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks By FreeCodeCamp
- Full Modern React Playlist by The Net Ninja
Useful tips
- Don’t try to learn everything at once, understand and accept the fact that you a beginner and spend enough amount of time to learn these concepts.
- Don’t be afraid of writing bad code. Like I mentioned earlier, you are a beginner, at some point everyone is. Understand that progress is better than perfection.
- Avoid Tutorial Hell. Tutorial Hell refers to the term when you follow a tutorial after tutorial, and you think you are learning, when in fact you learn nothing. If you watching Youtube tutorials, don’t just watch video after video but start creating your own projects.
