# 100DaysOfCode: создание приложения на React (продолжение)…
Проект (1 час): продолжайте работу над приложением, созданным в первый день. Создайте три компонента и настройте инструкции по реакции-маршрутизации для перехода между компонентами. Данные модели с состоянием и реквизитами.
Весь код этого проекта можно найти на моем github
Шаг 1. Установите реактивный маршрутизатор, пакеты истории.
npm install --save react-router history
Пакет React-router зависит от истории, поэтому его тоже нужно установить.
Шаг 2. Обновите основной и создайте домашний компонент.
Создайте компонент home.js, как показано ниже, и обновите main.js, удалив response-dom в компонентах, вместо этого он будет экспортирован как настоящий компонент.
Код доступен по ссылке репозитория github, упомянутой выше.
Шаг 3. Создайте компонент приложения «app.js» в каталоге приложений.
Здесь вместо передачи компонента мы используем наш маршрутизатор, который обрабатывает все маршруты в приложении.
Первое свойство «routes» здесь - это инструкция для маршрутизатора, чтобы решить, какой компонент визуализировать, в зависимости от того, по какому пути мы находимся. Второе свойство сообщает, по какому идентификатору элемента его отображать.
Обновите конфигурацию webpack, чтобы использовать App.js в качестве корневого компонента.
Шаг 4. Создайте инструкцию к маршрутизатору.
Создайте каталог «config» внутри «app» и добавьте в него следующие routes.js.
Настройте путь в маршрутизаторе, чтобы всякий раз, когда кто-либо переходит к корневому пути «/» в нашем приложении, компонент, который они собираются обслуживать, был «Main». Компонент Main здесь просто отображает Hello World на этом этапе. Посмотрите на репозиторий github обновленный репозиторий с тремя отрисованными компонентами. Инструкции по экспорту для маршрутизатора находятся в файле routes.js, который затем переходит в App.js, где он принимается тегом ‹Routes›. Так что всякий раз, когда кто-то находится в «/» домашнем или индексном пути, продолжайте и визуализируйте Main.js. Точно так же мы можем настроить маршруты для других параметров, например, когда url имеет «/ profile / anyname» для выдачи компонента Profile.
Шаг 5. Создайте компонент профиля с состоянием и реквизитами.
Как вы можете видеть выше, у нас есть начальное состояние, заполненное значениями по умолчанию. Render указывает теги JSX, которые будут отображаться при просмотре. Обратите внимание на то, что «this.props.params.username» - это поле, полученное из url-адреса, а «this.state.bio» - это что-то из инициализированного внутреннего состояния.
Когда все будет подключено в соответствии с кодом в репозитории github для дня 2, перезапустите webpack. Обратите внимание, что вы можете пропустить повторный запуск веб-пакета, если он уже запущен, так как он автоматически перепроверяется и повторно транслируется.
webpack -w
Наконец, отрисованный вывод, когда вы добавляете «/ profile / TestUser» в конец вашего URL-адреса, должен выглядеть, как на изображении ниже.
/ReactApp/public/index.html#/?_k=vodu5g/profile/TestUser
День 2 из # 100DaysOfCode DONE
Если вам это понравилось, нажмите 👏 , чтобы другим понравилось. Подписывайтесь на меня в Twitter @ HariniLabs, чтобы получать последние новости или просто поздороваться :)
PS: я курирую еженедельный информационный бюллетень # WomenInTech, чтобы получить немного вдохновения из мира технологий, и да, мужчины тоже могут подписаться! Получите здесь :)
