foocoding / reactjs

React and TS 👩‍🚀 👨‍🚀

Week 1

• JS Frameworks 👨‍🎨
• Component based web development 📦
• JSX
• Introduction to React
• Create React App
• Rendering elements with React 📝
• Assignment introduction

Checkpoints

• Setup a CRA project
• Render some custom elements.

Week 2

• Introduction to TypeScript
• Naming conventions and project structure (examples)
• Components, props, prop validation

Checkpoints

• Create a component with type-safe props.

Week 3

• React hooks: useState 🪝
• State vs. Props 🥊
• React data flow ♻️
• Handling DOM events in React

Checkpoints

• Create interactive state.
• Pass state through props.
• Use DOM events (such as onClick).

Week 4

• React hooks: useEffect (fetching data from the web) 🪝
• Conditional rendering and rendering lists

Checkpoints

• Fetch data in useEffect hook.
• Render a list of items.
• Conditionally render something based on a statement.

Week 5

• Single page application (concept)
• SPA and client routing in React 🛣

Checkpoints

• Setup React Router v6.
• Add at least two pages to navigate between.

Week 6

• Global state management (concept)
• React hooks: useContext 🪝

Checkpoints

• Use context with useState.

Week 7

• Introduction to other React hooks: useRef, useCallback, useMemo
• Deploying a React app 🚀

Checkpoints

• Deploy the app.

Week 8

• Assignment presentations