Roadmap to Master React in 2021
(with project ideas to help in finding jobs)
A Thread
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread">
(with project ideas to help in finding jobs)
A Thread
Prerequisites
1. HTML
2. CSS
2.1 Flexbox
2.2 Grid
3. JS
4. ES6
4.1 Higher Order Function
4.2 Arrow Function
4.3 Callback function
1. HTML
2. CSS
2.1 Flexbox
2.2 Grid
3. JS
4. ES6
4.1 Higher Order Function
4.2 Arrow Function
4.3 Callback function
React Basic Building Blocks
1. States
2. Keys
3. Forms
4. Hooks
5. Event Handling
6. Lifecycle
7. Virtual DOM
1. States
2. Keys
3. Forms
4. Hooks
5. Event Handling
6. Lifecycle
7. Virtual DOM
Managing States in React
1. Local Storage
2. Global Storage
3. Redux
4. React Context
5. Flux Architecture
1. Local Storage
2. Global Storage
3. Redux
4. React Context
5. Flux Architecture
Making React Pretty
1. CSS in JS
2. Styled JSX
3. Styled Components
4. Inline Style
5. JSS
6. Emotion
1. CSS in JS
2. Styled JSX
3. Styled Components
4. Inline Style
5. JSS
6. Emotion
Advanced React
1. Higher Order Components
2. Portals
3. React Dev Tool
4. Type Checking
5. Optimization
6. Error Boundaries
1. Higher Order Components
2. Portals
3. React Dev Tool
4. Type Checking
5. Optimization
6. Error Boundaries
Unit Testing
1. React Testing Library
2. Jest
1. React Testing Library
2. Jest
React.js Project Ideas
1. Map Statistics Dashboard
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🗺️" title="Weltkarte" aria-label="Emoji: Weltkarte">
2. Musical Instrument
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎚️" title="Schieberegler" aria-label="Emoji: Schieberegler">
3. Personal Portfolio
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🌐" title="Weltkugel mit Längengraden" aria-label="Emoji: Weltkugel mit Längengraden">
4. Notebook
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🗒️" title="Spiralblock" aria-label="Emoji: Spiralblock">
5. Space Invaders Game
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🚀" title="Rakete" aria-label="Emoji: Rakete">
6. Framework Theme
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🖼️" title="Bilderrahmen mit Bild" aria-label="Emoji: Bilderrahmen mit Bild">
7. Webmentions
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔎" title="Nach rechts zeigende Lupe" aria-label="Emoji: Nach rechts zeigende Lupe">
8. Zoom Clone
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📷" title="Kamera" aria-label="Emoji: Kamera">
1. Map Statistics Dashboard
2. Musical Instrument
3. Personal Portfolio
4. Notebook
5. Space Invaders Game
6. Framework Theme
7. Webmentions
8. Zoom Clone
Platforms to Find Jobs
1. Twitter .com
2. LinkedIn .com
3. StackOverflow Jobs
4. Upworks .com
5. Freelancer .com
1. Twitter .com
2. LinkedIn .com
3. StackOverflow Jobs
4. Upworks .com
5. Freelancer .com