Сегодня мы начали создавать компоненты для игры Nim и начали с простого, сначала выяснив, как мы будем тестировать компонент в нашем приложении с помощью Jest, а после просмотра документации Redux и многих других руководств мы поняли, что Enzyme также станет важным. Итак, после того, как npm установил фермент-jest, мы заработали и были готовы написать наш первый тест, который должен был просто убедиться, что приложение отрисовывается, и после прочтения документации Airbnb по Enzyme стало ясно, как это сделать. После того, как наш тест был написан и провалился, мы начали создавать наш компонент для прохождения теста.
Создав наш собственный компонент кнопки, который не имеет состояния и наследует свойства от своего родительского компонента, мы получим два реквизита, один из которых является текстовым свойством, указывающим, что делает кнопка, а другой — свойством onClick, обеспечивающим поведение. Мы быстро создали его, а затем тест прошел.
После этого мы приступили к созданию родительского компонента, который был главным меню для нашей игры, и снова следовали тому же шаблону, за исключением того, что этот компонент на данный момент будет иметь состояние, поэтому теперь, чтобы протестировать его, мы запустили npm run dev, и это сработало.
После этого у нас был рендеринг основных элементов на странице, хоть и без стилизации, это был хороший прогресс.
Следующим, что мы хотели реализовать, был реактивный маршрутизатор, который позволил бы нам отображать компонент в зависимости от пути приложения в данный момент, делая SPA (одностраничное приложение) еще более эффективным, поэтому я запустил
npm install — сохранить react-router и продолжить реализацию, как я узнал месяц назад, но позже узнал, что это была новая версия 4.0, которая использовала новый (хотя и похожий) синтаксис и для запуска требовался дополнительный модуль, этот пакет был react-router- дом . Кроме того, нам потребовалось использовать BrowserRouter вместо старого компонента Router, позже мы с Уиллом просмотрели документы на https://reacttraining.com/react-router/ и попытались запустить базовый маршрутизатор, но не смогли, так что на этом мы закончили день и поставили это в качестве нашей цели на сегодня. Позже я смог заставить React-маршрутизатор работать после нескольких просмотров примера видео и настройки файла index.js, и в результате получился следующий код. На следующий день мы продолжили сборку и тестирование компонента, а также настройку жизненного цикла редукции.
