Skip to main content

2. Front-End

Recommended stack:

  • React using Vite
  • TypeScript? Optional based on the student
  • Definitely a UI library like Material-UI, TailwindCSS, or AntDesign
  • NO REDUX (explained below)

Duration​

  • Average for past successful students: 16 sessions
  • 90th percentile: 23

Expected Outcomes:​

At the end of the module, the student:

✅ Understands the 3-tier architecture (client/server/db); responsibilities and limitations of each tier ✅ Can create fairly complex front-ends using React.js without help ✅ Is hireable as a junior front-end developer ✅ Has the project deployed and live (Github Pages)

Topics​

Below are the topics that we expect students to know by the end of this module:

  • Basics: React components, State vs Props, JSX, rendering
  • Class vs Functional
  • Styling:
    • Inline
    • CSS files
    • styled-components
  • React lifecycle
  • Hooks: useState, useEffect, useContext
  • Interactions between:
    • Parent to child
    • Child to parent
    • Independent components
  • Debugging React:
    • Chrome devtools
    • Breakpoints
    • Console.log
  • Organization
    • When to separating components
    • How to organize components, files and folders
    • React component hierarchy: Best practices
  • Stateless components
  • react-router

Avoid:​

  • Performance optimization
  • Redux: We have tried redux with 2 students and they both suffered. Both coaches regretted the decision.

Projects:​