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: 6 months 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 (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-02T09:25:29.000Z (over 1 year ago)
• Last Synced: 2025-01-12T10:06:53.948Z (12 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.jsx

- inside appContext.jsx, import createContext, useState, and useContext from react: ```import { createContext, useContext, useState} from "react"```. 

- inside appContext.jsx, create context called AppContext: ```const AppContext = createContext()```

- inside appContext.jsx, create and export AppProvider arrow function: ```export const AppProvider = ({children}) => {};```

- inside AppProvider , return AppContext.Provider with value={{}} as attribute: ```{children}```

- inside AppProvider, create your states and functions. **DON'T forget to add them in the value attribute**.

- Make sure you have the children in AppProvider and to its return

- import and render AppProvider in "index.js" or in "main.jsx" if you are using Vite: ```

    

```

- inside appContext.jsx "at the bottom" create and export custom hook called useAppContext: ```export const useAppContext = (() => {return useContext(AppContext)})```

- Import and use useAppContext into desired components: ```const {valueName} = useAppContext()```

- Your appContext.jsx should looks like: 

``` javascript

import { useContext, createContext, useState } from "react";

const AppContext = createContext()```

export const AppProvider = ({ children }) => {

    const [name, setName] = useState("Khaled")

    function flipName() {

        setName("Alabssi")

    }

    return (

        

            {children}

        

    )

}

export const useAppContext = () => {

    return useContext(AppContext)

}```

| Congrats: you just mastered Context API :)