Skip to content

Latest commit

 

History

History
19 lines (16 loc) · 1.28 KB

README.md

File metadata and controls

19 lines (16 loc) · 1.28 KB
Raw

TEACHING REPO: Context API Introduction

This repository contains code and examples used for teaching "Reactjs Context-API" For Frontend and Full Stack Development courses

Purpose

These examples are intended for instructional use and demonstrate basic concepts. They are not representative of production-level code or my professional work.

Steps:

  • In React project, create folder: context, then inside it, create file appContext.js
  • inside appContext.js, create context called AppContext: const AppContext = createContext()
  • inside appContext.js, create AppProvider arrow function
  • inside AppProvider , return AppContext.Provider with value={{}} as attribute: <AppContext.Provider value={{}}></AppContext.Provider>
  • inside AppProvider, create your states and functions. DON'T forget to add them in value attribute "in AppContext.Provider opening tag"
  • add children props to AppProvider and to its return
  • export AppProvider: export const AppProvider.....
  • import and render AppProvider in index.js
  • inside appContext.js "at the bottom" create custom hook called useAppContext and return useContext(AppContext) and export it: export const useAppContext = (() => {return useContext(AppContext)})
  • Import and use useAppContext into desired components: const {valueName} = useAppContext()