Resources to master 5 popular react libraries
Tags: react, javascript, webdev, beginners
Published: 2021-07-18 00:26:31

Hello everybody, I'm [Aya Bouchiha](https://t.me/AyaBouchiha) today, I'm going to share with you useful resources to learn 5 libraries that you will use at least one of them in your next react project.


## react-router

**React Router** is used for developing Single Page Web Applications. It is used to define multiple routes in the application. When a user types a specific URL into the browser, and if this URL path matches any 'route' inside the router file, the user will be redirected to that particular route.

[more details](https://www.javatpoint.com/react-router)

### Resources to learn react-router

+ [documentation](https://reactrouter.com/web/guides/quick-start)

+ [react-router-cheatsheet](https://www.freecodecamp.org/news/react-router-cheatsheet/)

+ [react-router by Dev Ed (30 min)](https://www.youtube.com/watch?v=Law7wfdg_ls)

+ [react router crash course (40 min)](https://www.youtube.com/watch?v=Jppuj6M1sJ4)

## Material UI

**Material UI** is the world's most popular  UI framework, additionally, it is based on Google Material Design.

### Resources to learn material UI

+ [documentation](https://material-ui.com)

+ [Material UI React tutorial (40 min)](https://www.youtube.com/watch?v=vyJU9efvUtQ)

+ [Material UI React crash course (50min)](https://www.youtube.com/watch?v=Xoz31I1FuiY)

+ [Material UI Tutorials By The Net Ninja (playlist: 18 videos)](https://www.youtube.com/watch?v=0KEpWHtG10M&list=PL4cUxeGkcC9gjxLvV4VEkZ6H6H4yWuS58)

## Redux

**Redux** is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test. [more details](https://blog.logrocket.com/why-use-redux-reasons-with-clear-examples-d21bffd5835/)

### Resources to lean Redux

+ [documentation](https://redux.js.org/)

+ [Redux for begginers by Dev Ed (40 min)](https://www.youtube.com/watch?v=CVpUuw9XSjY)

+ [Redux crash course by Travesy Media (1h)](https://www.youtube.com/watch?v=93p3LxR9xfM)

+ [Redux tutorial by Codevolution (playlist: 30 vidoes)](https://www.youtube.com/watch?v=9boMnm5X9ak&list=PLC3y8-rFHvwheJHvseC3I0HuYI2f46oAK)

### React Icons

**React Icons** is a library that provides popular icons as React components for your React applications.

### Resources to lean React Icons

+ [documentation](https://react-icons.github.io/react-icons/)

+ [Tutorial by Eric (7 min) ](https://www.youtube.com/watch?v=aor9hlcODUE)

+ [React icons by Codevolution  (7 min)](https://www.youtube.com/watch?v=4l0nsK4ezNc)

## Styled Components

**styled-components** is a library that lets you write CSS code in your Javascript 

### Resources to learn Styled components

+ [documentation](https://styled-components.com/)

+ [Styled Components React Tutorial by Adrian (10 min)](https://youtu.be/eQkkoUEVY-Q)

+ [React styled-components tutorial by Ben Awad (15 min)](https://www.youtube.com/watch?v=syqw5UJrfoc)

+ [styled component tutorial by Pedrotech (25 min)](https://www.youtube.com/watch?v=-FZzPHSLauc)

## Summary

+ **React router** is used to define multiple routes in a single page application.

+ **Material UI** is a UI framework based on Google Material Design.

+ **Redux** is a predictable state container 

+ **React Icons** provides you popular icons as React components

+ **Styled-components** lets you write CSS in your Javascript.

Have a nice day!