Still Learning React Hooks

Hooks let you extract component logic into reusable functions. They’re like the Swiss Army Knife of common class-based React logic for your functional components.

  1. Introduce newbies to the idea of Higher Order Function in JavaScript.
  2. (In a way that entertains, because HOs can get quite boring.)
  3. Show fun animations explaining how Higher Order functions work. — map all values to an expression.

So which one is better? Grid or Flex? When to use which? What are the differences? For me, I see both as fundamentally different ways of thinking about layout design. I don’t think one as better or worse than the other. It is common to use them together.

Different Layout Models

The 2ND part of my “Don’t Panic It’s Only…” crash courses covers the fundamentals of CSS, selectors, key properties, flex and grid. I’m still working on it (coming out in about 2–3 days from now,) but here’s what it will cover.

CSS Curriculum

  1. CSS Code Placement: internal, external, inline.
  2. Cascade, Specificity and Inheritance: The 3 main behavior types.
  3. Selectors: by tag name, id, class (id and class names can include - and _)
  4. Properties: Basic and short-hand (composite) properties.
  5. Attribute selectors: [attr], [attr=value], [attr~=value], etc
  6. Case-insensitive attribute selectors: [attr^=value i]
  7. Combinators: space ( ), >, +(adjacent sibling,) and ~(general sibling)
  8. is not the same as #id .clsname .active
  9. Comments /* unseen */
  10. Pseudo Classes :root, :first-child, :last-child, :only-child, :nth-child(), :checked, :disabled, :enabled, :past, :future, :is(), :not()
  11. User-action Pseudo Classes: :link, :hover, :focus, :visited

JavaScript Teacher

Issues. Every webdev has them. Published author of CSS Visual Dictionary few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store