# Хук контекста useContext в React

В этом уроке мы продолжим работу с контекстом. Теперь построим дерево компонентов. Для начала в отдельном файле создадим React компонент `BigBox`:

`function BigBox() { return ( <p>bigbox</p> ); }`

Импортируем его и разместим в нашем главном компоненте `App`:

`import BigBox from './BigBox'; function App() { return ( <BigBox /> ); }`

Для большей наглядности немного стилизуем дивы. Для этого создадим файл `styles.css`:

`div { border: 1px solid blue; margin: 10px; text-align: center; max-width: 300px; }`

Не забудем импортировать его в `App.js`:

`import './styles.css';`

Теперь в отдельном файле создадим компонент `MiddleBox`:

`function MiddleBox() { return ( <p>middlebox</p> ); }`

И положим его в большую коробку `BigBox`:

`import MiddleBox from './MiddleBox'; function BigBox() { return ( <div> <MiddleBox /> </div> ); }`

Проделаем все тоже самое с маленькой коробочкой `SmallBox`:

`function SmallBox() { return ( <p>I am ... </p> ); }`

Разместим две таких коробочки в `MiddleBox`:

`import SmallBox from './SmallBox'; function MiddleBox() { return ( <div> <SmallBox /> <SmallBox /> </div> ); }`

Дерево мы с вами построили. А теперь мы хотим от нашего `App` передать, предположим, в `SmallBox` строковое значение `'small box :)'`, не используя пропсы, а пользуясь контекстом (вдруг наше коробочное приложение разрастется до огромных размеров).

Файл с контекстом `MyContext.js` мы уже создали и подключили на прошлом уроке.

Следующий шаг, который мы сделаем - обернем `BigBox` в провайдер контекста, который является свойством нашего объекта контекста `MyContext`. Теперь все компоненты, заключенные в данную конструкцию (а это и все коробочки, вложенные в `BigBox`) смогут получить доступ и подписаться на изменения контекста. В качестве значения контекста мы передаем желаемое `'small box :)'`:

`function App() { return ( <MyContext.Provider value="small box :)"> <BigBox /> </MyContext.Provider> ); }`

А теперь осталось прочитать значение контекста. Мы хотели использовать его в `SmallBox`, значит импортируем туда файл контекста `MyContext.js` и хук `useContext`:

`import { useContext } from 'react'; import { MyContext } from './MyContext.js';`

Прочитаем с помощью `useContext` значение контекста в переменную `name`:

`function SmallBox() { const name = useContext(MyContext); return ( <div> <p>I am ... </p> </div> ); }`

Мы подписали `SmallBox` на данный контекст и, если он изменится, этот компонент также будет обновлен.

И, наконец, подставляем значение переменной `name` вместо многоточия:

`function SmallBox() { const name = useContext(MyContext); return ( <div> <p>I am {name} </p> </div> ); }`

В пустом компоненте `App` создайте компонент `Parent`, а в нем компонент `Daughter`, а в `Daughter` компонент `Grandson`. Используя контекст, передайте из `App` значение возраста `42`, а с помощью `useContext` выведите его в компоненте `Daughter`.

А теперь в компоненте `Grandson` выведите значение возраста, но поделенное на `2`.

← →
↑