https://github.com/khaledalabssi/teaching_repo_context_api_intr

Teaching materials / code-examples: Simplified Context API for Frontend course F23
https://github.com/khaledalabssi/teaching_repo_context_api_intr

classwork-demo code-example context-api hands-on-demos react-context-hooks react-global-state-manager teacher-student-learning teaching-materials use-context

Last synced: 1 day ago
JSON representation

Teaching materials / code-examples: Simplified Context API for Frontend course F23

• Host: GitHub
• URL: https://github.com/khaledalabssi/teaching_repo_context_api_intr
• Owner: KhaledAlabssi
• Created: 2023-11-30T20:31:03.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-06-02T09:25:29.000Z (6 months ago)
• Last Synced: 2024-06-02T10:37:12.218Z (6 months ago)
• Topics: classwork-demo, code-example, context-api, hands-on-demos, react-context-hooks, react-global-state-manager, teacher-student-learning, teaching-materials, use-context
• Language: JavaScript
• Homepage:
• Size: 177 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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: 

- 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()