# Roadmap and Resources to learn React

Today I want to talk about what to learn while learning react and the resources I used to learn react.

## Prerequisites

we need to learn about basic web technologies before learning react you can use the following resources to learn about them

1. HTML
you can use [MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML) to learn about HTML

2. CSS
you can use [web.dev](https://web.dev/learn/css/) to learn about CSS. It is a really good resource to learn and understand CSS. You can also use MDN to learn about CSS but I prefer this resource

3. JavaScript
you can use [javascript.info](https://javascript.info/) to learn about javascript to learn about advanced javascript you can watch [namaste javascript](https://www.youtube.com/playlist?list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP) playlist on YouTube

## learning react

here are some of the resources I used to learn about core react concepts and ideas

- [this](https://www.youtube.com/playlist?list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3) is a youtube playlist which explains react from basics to advance react concepts although it starts with the older class-based components it then goes onto hooks and explains them as well. It also covers advanced concepts about react rendering cycle and typescript
- [this](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d) is another playlist on YouTube which also explains react in a really nice way
- [react docs](https://reactjs.org/docs/getting-started.html). once you have understood basic ideas of react you can visit the docs to learn about more details and get a better understanding

## other things

here is a list of a few other web-related things you should also consider learning about
- [HTTP protocol](https://developer.mozilla.org/en-US/docs/Web/HTTP)
- [REST API](https://www.restapitutorial.com/)


You will also see a lot of videos about redux which is a state management library used with react. Although nowadays there are a lot of alternatives to redux, and you can even do global state management only with react without using any library, I will recommend you learn redux because you will most probably run into redux code at some point in your learning journey

after learning basic react you should make projects and learn about various libraries which are used with react a list of good project ideas and libraries are given below. If you do not know how to write an HTTP server you can use [firebase](https://firebase.google.com/docs/) to set up a backend


## libraries
- [react router](https://reactrouter.com/)
    - [this](https://www.youtube.com/playlist?list=PLcCp4mjO-z9_4Wak3Uq8dEWC6H1fbSNgL) is a playlist about react router
- [redux](https://redux.js.org/)
    - [this](https://www.youtube.com/playlist?list=PLC3y8-rFHvwheJHvseC3I0HuYI2f46oAK) is a playlist about redux
- [react query](https://react-query.tanstack.com/). This library is used to interact with backend REST API. [swr](https://swr.vercel.app/) is also a good alternative
- [zustand](https://github.com/pmndrs/zustand). This is a new library which can be used for global state management instead of redux 
- [chakra ui](https://chakra-ui.com/) - a really good ui library
- [material ui](https://material-ui.com/)
- [reactstrap](https://reactstrap.github.io/) - bootstrap for react
- [tailwind css](https://tailwindcss.com/). This is not a library but a css framework which is getting very popular nowadays
- [styled components](https://styled-components.com/). It is a different way of styling your react application.
- [react testing library](https://testing-library.com/docs/react-testing-library/intro/). This library is used to test react components

## projects to try
- todo list
- note-taking application
- blogging platform like Hashnode
- online forum / Reddit clone
- social network / Instagram clone
- project management tool / Jira clone
- real-time chat / multiplayer game with WebSockets
- peer to peer video chat with webRTC