What do we need to know?

HTML + CSS + TS

HTML Tutorial: https://www.w3schools.com/html/default.asp CSS Tutorial: https://www.w3schools.com/css/ TS Tutorial: https://www.w3schools.com/typescript/

HTML Checklist

  • I can structure a page using semantic elements (header, nav, main, section, article, footer)
  • I can explain difference between paragraph <p> and span <span>
  • I can name most used input types and understand difference between them
  • I can create links with <a href="...">
  • I can add images with meaningful alt text and use width/height
  • I can use numbered and unnumbered lists correctly (<ul>/<ol>/<li>)
  • I can create keyboard-friendly UI by choosing the right element (button vs div) and understanding tab order/focus

CSS Checklist

  • I can define a Flexbox container and define its Direction (row/column, row/column-reverse)
  • I can explain FlexContainer properties: justify-content and align-items (flex-start, flex-end, start, end, space-around, space-between, space-evenly, center)
  • I can explain FlexItem CSS properties: flex-grow, flex-shrink, align-self
  • I can explain different CSS position values and know which one is the default position (static, fixed, relative, absolute, sticky)

TS Checklist

  • I can name TS most popular primitive types (Boolean, Number, String)
  • I can define a variable or constant with implicit or explicit type definition
  • I can explain the difference between == and ===
  • I can explain and define Type Aliases
  • I can explain and define Enums (Number and String)
  • I can create Interfaces and Classes and extend/inherit them
  • I can explain keywords/types: any, unknown, object, value, null, undefined
  • I can write conditional expression or nullish coalescence
  • I can write Arrow function (const notation) and type its arguments or return value
  • I can derive the return type of a function even if it is not explicitly provided (ReturnType<>)
  • I can create Union types (with |) and extend type aliases (with &)
  • I can use TS Utility types: Partial, Required, Record, Omit, Pick, Exclude, ReturnType, Parameters
  • I can use TS Spread operator ([...array] or {...object} or { property1, property2 } = object)
  • I can state TS "falsy" values (that evaluate to false): (false, 0, NaN, "", null, undefined)

React Basics

React documentation: https://react.dev/learn

React Checklist

  • I can write a Functional React Component with props and children in TS in using Arrow Function (const) notation
  • I can use props, children or variables to interpolate JSX
  • I can render a list of items (from TS array) without errors in console (key prop)
  • I can explain what causes React components to re-render (props, local state, context, global state, parent rendered)
  • I can explain React useState() hook
  • I can explain React useEffect() hook without dependencies, with dependencies and with [] as dependencies
  • I can explain React useCallback() hook and give an example for when it is useful
  • I can explain React useMemo() hook and give an example for when it is useful
  • I can explain React useRef() hook and give an example for when it is useful
  • I can explain React.memo() function (and how it is different from useMemo)

React Advanced Reading

Router + State Management

React Router Checklist

  • I can define a Component such that it is rendered at exactly route '/maps'
  • I can define a Component such that it is rendered at exactly route '/maps/:id' and know how to get the id from URL
  • I can define a Component such that it is rendered at route '/maps/anything-else'
  • I can get current URL from inside the component
  • I can get params of current URL from inside the component
  • I can navigate to other components

State Management (Zustand) Checklist

  • I can define a simple new global Store of desired shape and with needed actions using Zustand in our React app
  • I can explain what shape my state will actually have
  • I can see find my state with Redux Dev Tools
  • I can define and export needed selectors for my store
  • I can retrieve my store inside my component
  • I can explain why Selectors are needed (instead of importing the whole Store object)
  • I can explain Selectors best practices
  • I can explain when my Store object will be created
  • I can use onDemand Store Loading approach and can explain how it is different from normal way

Tanstack Query Checklist

  • I have read Tanstack Query overview
  • I know the important defaults of useQuery and useMutation hooks
  • I can use Queries
  • I can write Query Functions
  • I can configure Query Options
  • I can use Mutations
  • I can use Query Invalidation
  • I can do Invalidation from Mutations

Quizzes

5 min quizzes for self check:

  • https://www.w3schools.com/quiztest/quiztest.asp?qtest=HTML
  • https://www.w3schools.com/quiztest/quiztest.asp?qtest=CSS
  • https://www.w3schools.com/quiztest/quiztest.asp?qtest=JS
  • https://www.w3schools.com/quiztest/quiztest.php?qtest=TS
  • https://www.w3schools.com/quiztest/quiztest.asp?qtest=REACT