Привет! Я в миссии, чтобы сделать 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) => ( ) } export default InnerThreeInner three - Do I have some context? 🤔)}{name}
Как я уже сказал, не любимый проект Но я чувствую, что это глубоко иллюстрирует силу реагированного контекста. Вы можете экстраполировать это отношение к любой глубине. 100 уровней глубоко, и вы все равно можете пройти эти данные у провайдера без реквизитов.
Аккуратный! Больше контекста завтра. Если вам нравятся такие проекты, не забудьте следовать за мной на Twitters 🙂
Оригинал: “https://dev.to/jwhubert91/project-60-of-100-lil-context-api-demo-8f7”