Привет! Я нахожусь в миссии, чтобы сделать 100 проектов React.js, заканчивающиеся 8 марта. Пожалуйста, следуйте My Dev.to Profile или моим Твиттер Для обновлений и не стесняйтесь обратиться, если у вас есть вопросы. Спасибо за поддержку!
Ссылка на сегодняшнее развернутое приложение: Ссылка Ссылка на репо: GitHub
Сегодня был еще один мини-проект, так как я продолжаю привыкнуть к новой работе и ставя много энергии и компьютерного времени. Тем не менее, мне очень нравится это упражнение, так как оно ясно демонстрирует, как правильно использовать контекстный API, а также демонстрирует использование пользовательского интерфейса материала и новый способ маркировки файлов в проекте React.
Учебное пособие здесь: ссылка на сайт
У этого проекта было две зависимости: @material-ui/core и @material-ui/icons Анкет Я подозреваю, что вместе это довольно большие пакеты, потому что я заметил, что сегодняшний проект занял значительно больше, чем обычно, чтобы компилировать на моем локальном сервере, но результаты великолепны.
Урок
Context API – это набор общей информации необязательно через ваше приложение React. A поставщик Компонент создает способ изменить контекст (и, следовательно, состояние всего приложения, в некотором смысле) на любые субкомпоненты, которые его используют. A потребитель Компонент просто предоставляет способ употреблять данные из контекста для всего приложения и отобразить эти данные.
Мы создаем их, установив новую переменную, равную React.createContext что мы позвоним SharedSnackbarContext Анкет Затем мы создаем поставщика и потребителя с SharedSnackbarContext. Поставщик и SharedSnackbarContext. Потребитель соответственно, затем экспортируйте оба для использования.
Оба эти компонента определены в файле контекста. Я сохранил этот файл в поставщики Папка, потому что именно так Боб Зиролл сделал это в своем превосходном Bootcamp React. Вы, конечно, можете поместить все прямо в /src если хочешь.
Материал UI
Я не использовал материальный пользовательский интерфейс раньше, так что это была поездка, чтобы увидеть его в этом маленьком проекте. То, как автор использовал его, было для импорта компонентов, таких как Iconbutton и Закусочная от @material-ui/core Анкет Этим компонентам дается стиль, такие как первичный Для синего и Вторичный для красного в цвете.
Google/Angular Style of Coding также проявился в именовании компонентов, что было интересно. Автор использовал схему маркировки JavaScript, посредством которой компоненты были помечены Title.component.js, а файл контекста был помечен title.context.js. VS Code затем автоматически помечал их как угловые файлы, что было интересно.
В любом случае, я рекомендую этот проект всем, кто ищет простой способ практиковать контекст и мягкое введение в материальный пользовательский интерфейс. Я не большой поклонник материальной темы пользовательского интерфейса, так как она, на мой взгляд, выглядит как продукт Google, но довольно круто, что JavaScript и CSS встроены в компоненты в @material-ui/core И это так просто в использовании. Как фанат начальной загрузки, я могу засвидетельствовать, что эти несколько предварительно созданных компонентов было легче реализовать, чем компоненты Bootstrap React, на мой взгляд.
5/5 звезд снова будут кодировать.
Оригинал: “https://dev.to/jwhubert91/project-28-100-react-snackbar-with-shared-context-in-material-ui-28hg”