Skip to content

Instantly share code, notes, and snippets.

@theodorosploumis
Last active December 3, 2022 10:25
Show Gist options
  • Save theodorosploumis/9cdd82f05c5ae444a5449f93a3733cbf to your computer and use it in GitHub Desktop.
Save theodorosploumis/9cdd82f05c5ae444a5449f93a3733cbf to your computer and use it in GitHub Desktop.
First steps in React JS. A list of resources to study on before starting with React.

There is always an enaqx/awesome-react for reference!

JS basics

React Basics

React Hooks - learn

React Hooks - collections

React Patterns

React Cheatsheets

React Best Practices

React props

Rendering methods

@theodorosploumis
Copy link
Author

theodorosploumis commented Mar 23, 2022

Debug (Drupal) page on NextJS

  • router.query.id (assuming the path is like /pages/[id].js. Get it const {id}= router.query)
  • pathName
  • drupal.node.nid
  • drupal.node.path_alias
  • drupal.node.uuid
  • Get data value from JSON (Chrome plugin)
  • UI to debug JSON API queries (VSCode extension)
  • render stats
  • page size
  • page web-vitals stats
  • invalidate time (NextJS)
  • context available
  • Environment indicator (dev, test, production etc)
  • Link to get JSON API request
  • Link to edit Drupal node
  • React Hook useDebugValue

@theodorosploumis
Copy link
Author

theodorosploumis commented Mar 23, 2022

Elements information

  • Name/Label
  • Description
  • Type (Component/Utility/Layout etc)
  • Data source
  • Data type (static/dynamic)
  • Re-validate/cache info
  • Lazy load, dynamic import
  • Has Variations
  • Hydration
  • Paths available (visibility)
  • Rendering
  • Stateless/Pure

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment