Frontend, React, TypeScript Roadmap

learn-frontend-react-typescript.md

Frontend, React, TypeScript Roadmap

Tips:

• Read the introduction for each topic and dive deep only when needed
• Official documentation is, most of the time, the best source

Foundation

• HTML
• CSS
• JavaScript

JavaScript

Important Concepts

• Promises
• async/await
• ES Modules
• NPM: dependencies management

TypeScript

• Docs

Tooling

• ESLint (static analysis)
• Prettier (code formatter)
• Webpack (module bundler)

React

• Docs

Important Concepts

• Main concepts
• Hooks

Testing

• Jest: framework for writing and running tests
• React Testing Library - RTL: APIs for rendering React components on tests and querying the resulting DOM
• Cypress: End-to-end (E2E) tests

Styling

• CSS Modules
• Styled Components: write CSS in JS for React components (motivation)

Data Fetching

• TanStack Query: former React Query. Declarative data fetching.
• Apollo Client: declarative data fetching for GraphQL APIs

React Component Libraries

• MUI: former Material-UI