Переписывание шаблона в приложение react

Это хорошая задача. Вы берете понравившийся вам шаблон, например, вот этот (живое демо), и создаете приложение react на основе этого шаблона.

PS: Если вы хотите увидеть результат в react, прокрутите вниз, чтобы найти репозиторий на github!

PS2: Этот учебник предполагает, что вы прослушали учебники по началу работы на сайте react и знаете немного typescript. Я не очень точен, и вы должны интерпретировать некоторые шаги, имея опыт работы с react.

Для разрешения просмотра страниц (url меняется при нажатии на меню) вы можете использовать react-router-dom. Самый простой шаг здесь — начать с этого шаблона, который включает маршрутизатор (я нашел его здесь). Я выбрал его на языке typescript.

npx create-react-app react-template --template react-router-dom-typescript
cd react-template
npm install
code . // this launches visual code studio

Вход в полноэкранный режим Выйдите из полноэкранного режима

Теперь вам нужно:

навести порядок, сделать страницы/файлы пустыми
Этот шаблон использует bootstrap. Поэтому скопируйте все ссылки на стиль и javascript в файл index.html в папке dist (это конечная страница, на которой react будет применять код). В <head> вы добавляете ссылки на css, а в этом шаблоне js загружается внизу тега body, поэтому просто скопируйте их туда же.
скопируйте все активы (такие как css, js, media) в папку dist
Сначала просто скопируйте весь html шаблона в возвращаемую функцию HomePage.js
заменить все вхождения class на className (это потому, что React не может работать с class, потому что это зарезервированное слово в javascript, а react использует JSX, так что это может все запутать).
проверять все ошибки, которые возвращает typescript. У тегов должен быть заключающий тег. Так <br> становится <br />, а <img ...> становится <img .../>.
заменить теги <a href="blabla"> на <Link to=""> и
добавить: import {Link} from "react-router-dom" сверху.
Тег Link ссылается на новый маршрут, например, <Link to="/contact"> приведет url к localhost:3000/contact. Этой страницы пока не существует, но вы сможете добавить ее позже.
извлеките некоторые разделы и сделайте для них новые компоненты react, например VideoHeader
В VideoHeader я добавил возможность показывать видео youtube в полноэкранном режиме в качестве фона.
Сделать новые страницы и настроить меню… ну, вы можете увидеть мой пример ниже, получайте удовольствие!

Проверьте github здесь:
https://github.com/wimdenherder/react-bootstrap-template

Переписывание шаблона в приложение react

Рекомендуем почитать: