ReactJS
React.js is an open-source JavaScript library by Facebook that is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components.
JSX :heart_eyes:
In React, instead of using regular JavaScript for templating, it uses JSX. JSX is a simple JavaScript that allows HTML quoting and uses these HTML tag syntax to render subcomponents. HTML syntax is processed into JavaScript calls of React Framework. We can also write in pure old JavaScript.
Who uses React? :raising_hand:
Facebook, Netflix, Instagram, Netlify, Dropbox and many more Tech Giants.
Topics to Cover :books:
Follow either the Official Docs or The Net Ninja or both and cover the following topics:
| S.No. | Topic |
|---|---|
| 1. | Setup |
| 2. | Components |
| 3. | State Management |
| 4. | DOM Events |
| 5. | Forms |
| 6. | Nested Components |
| 7. | Props |
| 8. | Outputting Lists |
| 9. | Stateless Components |
| 10. | Conditional Outputs |
| 11. | Functions as Props |
| 12. | Deleting Data |
| 13. | Virtual DOM |
| 14. | CSS Files |
| 15. | Lifecycle Methods |
| 16. | Router |
| 17. | Redirects |
| 18. | Higher Order Components |
| 19. | Axios |
| 20. | Route Parameters |
| 21. | Switch Tag |
| 22. | Importing Images |
| 23. | Redux |
| 24. | Redux Stores, Actions, Reducers |
| 25. | Store Subscriptions |
| 26. | Mapping State to Props |
| 27. | Mapping Dispatch to Props |
| 28. | Action Creators |
| 29. | Deployment on Netlify |
Once you get familiar these, you can very well call yourself a React Developer. It’s recommended you practice this on a few projects to ensure you understand everything.
Useful Chrome Extensions :muscle:
|S.No.|Extension| |—-|—–| |1.|React Developer Tools| |2.|Moesif Origin & CORS Changer
Beginner Friendly Projects to Try :star_struck:
|S.No.|Projects| |—-|—–| |1.|Todo Application| |2.|Weather Application| |3.|Hangman |
These are some of the projects to get to you started on your React journey.
Done? :disappointed_relieved:
Not yet! Now that you’ve explored React, you can either learn React Native or Flutter and start developing mobile apps.
Why Flutter?
Flutter and React have really similar State Management. A lot of other things also feel familiar so you won’t really find it hard to learn Flutter.
You could also explore VueJS as it is pretty similar to React.
Tutorials
In English(https://youtu.be/bMknfKXIFA8)
In Hindi(https://youtube.com/playlist?list=PLu0W_9lII9agx66oZnT6IyhcMIbUMNMdt)
We hope you now know the roadmap to being a professional React Developer :v: