Рубрики
Без рубрики

Проект 60 – Lil ‘Context API Demo

Привет! Я в миссии, чтобы сделать 100 проектов React.js, заканчивая 31 марта. Пожалуйста, следуйте за моим Dev.to Profil … Теги от реагирования, JavaScript, 100daysofCode.

Привет! Я в миссии, чтобы сделать 100 проектов React.js, заканчивая 31 марта. Пожалуйста, следуйте за моим профилем Dev.to или мой твиттер Для обновлений и не стесняйтесь обращаться, если у вас есть вопросы. Спасибо за вашу поддержку!

Ссылка на развернутый проект: Ссылка Ссылка на репо: гадость

Я возвращаюсь к моей Scrimba (спасибо scrimba 🙏) React Reactorial и начиная с самого начала раздела контекста API я бросил довольно давно назад. Смешно, что я построил так много проектов реагирования без контекста или redux. Я думаю, что он просто показывает, что я не построил множество веб-приложений на уровне производства с десятками или соцами компонентов, но даже в полном стекам приложения, которые я построил, избегал сложных стационарных инструментов управления, как это, проходящие реквизиты 🤔

Таким образом, это один из самых простых проектов, которые вы можете сделать с контекстом, но это стоящее упражнение для кого-то нового к нему, потому что это так демонстрирует инструмент, и как он работает.

Мы начинаем с Create-raction-app Проект и удалить все содержимое Приложение компонент. Далее я создаю компонент React и вызови его Быстрый . Это где мы попросим для некоторых пользовательских входов. Я на самом деле хранил свое состояние в Приложение компонент, несмотря на Подскажите Будучи там, где мы принимаем данные, которые просто идут, чтобы показать, как привык к тому, что привык к тому, что я есть. По-видимому, любой компонент может служить поставщиком данных.

import React,{useState} from 'react'
import Prompt from './components/Prompt'
import InnerOne from './components/InnerOne'
import NameContext from './nameContext'

function App() {
  const [name,setName] = useState('')

  const handleNameChange = (e) => {
    setName(e.target.value)
  }

  return (
    
); } export default App;

Согласно React Master Кент C. Додс Все, что нам нужно сделать, это «использовать провайдер и разоблачить компонент, который обеспечивает значение».

Чтобы на самом деле начать использовать контекстный API, это лучшая практика, чтобы иметь отдельный файл, в котором вы инициализируете контекст, чтобы его можно было импортировать и использовать где угодно. Мы можем сделать это всего лишь в двух строках кода, импортируя {CreateContext} из модуля NODE NODE и инициализации нового контекста. Тогда вам придется экспортировать это.

import {createContext} from 'react'
const NameContext = createContext()
export default NameContext;

Как вы можете видеть выше в Приложение Компонент мы затем импортируем этот контекст для создания провайдера.

import NameContext from './nameContext'
...

  

Затем мы можем пройти любую информацию, которую мы хотим для других компонентов, создавая реквизиты поставщика. Затем я создаю компонент под названием Innerone. Это в основном просто Div с небольшим стилем, но тот факт, что мы создаем отдельный компонент, продемонстрируют то, что происходит с контекстом. Я также создаю Innertwo Компонент с той же структурой.

import React from 'react'
import InnerTwo from './InnerTwo'

const InnerOne = () => {
  return (
    
Inner One - I have no context
) } export default InnerOne

Innerthreeee это где действие. Вот где мы фактически создаем потребителя, чтобы использовать данные, предоставленные поставщиком. Он имеет доступ к данным в провайдере, несмотря на то, что он вложен два уровня глубоко и не имеет никаких реквизитов!

import React from 'react'
import NameContext from '../nameContext'

const InnerThree = () => {
  return (
    
      {(name) => (
        
Inner three - Do I have some context? 🤔
{name}
)}
) } export default InnerThree

Как я уже сказал, не любимый проект Но я чувствую, что это глубоко иллюстрирует силу реагированного контекста. Вы можете экстраполировать это отношение к любой глубине. 100 уровней глубоко, и вы все равно можете пройти эти данные у провайдера без реквизитов.

Аккуратный! Больше контекста завтра. Если вам нравятся такие проекты, не забудьте следовать за мной на Twitters 🙂

Оригинал: “https://dev.to/jwhubert91/project-60-of-100-lil-context-api-demo-8f7”