Skip to main content

React

Courses​

note

NOTE: FrontendMasters provides access to course partially even without a paid account. Most of the courses host the course code and slides publicly on GitHub.

TIP: Course code and slide links are visible in FrontendMasters Mobile app

Ecosystem​

  • Create React App
  • Vite
  • React Developer Tools (Browser Extension)
  • React Router
  • UI Components
    • Mantine
    • MUI
  • Utilities
    • Prettier
    • Mantine hooks
  • Styling
    • Tailwind CSS
    • Utilities
      • prettier-plugin-tailwindcss
      • Tailwind CSS line clamp
  • Icons
    • Tabler Icons React
  • Dates
    • date-fns
  • State Management
    • Context API
    • Zustand
  • API integration (Server state)
    • React Query (TanStack Query)
    • axios
    • graphql-request
  • Forms
  • Storybook (UI Component Documentation)
  • Framer Motion (Animation)

Resources​

Setup​

Developer tools​

  • VS Code extensions
    • ES7 React/Redux/GraphQL/React-Native snippets
    • Additional
      • Tabnine (auto complete)
  • Browser extensions
    • React Developer tools

Project Setup​

Vite​

  • Vite is a frontend build tool
npm init vite
# select react or react-ts template
cd project-name
npm run dev

Create React App​

  • Use create-react-app
npx create-react-app example
cd example
npm run start
  • VS Code
    • ES React Snippets Extension
    • type rfce for functional component boilerplate snippet

Overview​