React III

Assets, Metadata, and CSS

• assets: in project directory, images, files, robots.txt
• Metadata: serve as a link/path to the sub JS files
• Third party JS: functional JS ready for use by import the link
• CSS:
  • global.css
  • CSS modules:create local css
  • import by Sass
  • tailwind CSS
  • CSS IN JS libraries

context

React context allows us to share data (state) across our components more easily. The following data can be passed:

• Theme data (like dark or light mode)
• User data (the currently authenticated user)
• Location-specific data (like user language or locale)

React context helps us avoid the problem of props drilling.

Props drilling is a term to describe when you pass props down multiple levels to a nested component, through components that don’t need it.

Use React context

• Create context using the createContext method.
• Take your created context and wrap the context provider around your component tree.
• Put any value you like on your context provider using the value prop.
• Read that value within any component by using the context consumer.

useContext hook

makes our components more concise and allows us to create our own custom hooks.