Проблема. Есть сайт с кучей разных html, в каждой jq скрипты, на главной странице просто ссылки на другие страницы, в общем полный адъ. Каким образом безболезненно осуществить переход на реакт. есть идейка постепенно создавать компоненты и на страницах, где он используется подключать его и редерить определенный компонент. Вот только каким образом это сделать не представляю. Еще думал, перенести для начала главную страницу, а с использование react-route отдавать старые страницы или компоненты по мере их написания
Отслеживать
задан 31 июл 2019 в 10:00
Илья Балабуев Илья Балабуев
147 1 1 серебряный знак 12 12 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
На мой взгляд — максимально безболезненно будет тогда, когда вы максимально быстро получите результат, а дальше будете улучшать код. Удобнее, когда всё работает, и вы вносите правки, чем когда вы сразу пытаетесь сделать всё хорошо, но даже не можете посмотреть текущий результат. Алгоритм:
Первая цель — сделать «одностраничник» (для чего и переносится всё на React) Сделайте страницы через react-route.
После делайте оптимизацию кода Выделите основные компоненты (header/footer) и используйте их во всех страницах По очереди разбивайте каждую страницу на компоненты.
Откажитесь от jq, делайте всё через react. Реализуйте всё, что делал jq, через react.
Отслеживать
ответ дан 31 июл 2019 в 10:39
Сергей Сивков Сергей Сивков
35 4 4 бронзовых знака
javascript
reactjs
статистика
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
These docs are old and won’t be updated. Go to react.dev for the new React docs.
See Add React to an Existing Project for the recommended ways to add React.
Используйте React в том объёме, в котором вам хочется.
Для внедрения React не надо ничего переписывать. Его можно использовать как для маленькой кнопки, так и для целого приложения. Возможно, вы захотите немного «оживить» вашу страницу. React-компоненты подходят для этого как нельзя лучше.
Большинство сайтов в Интернете является обычными HTML-страницами. Даже если ваш сайт не относится к одностраничным приложениям, вы можете добавить на него React, написав всего несколько строк кода без каких-либо инструментов сборки. В зависимости от целей, можно постепенно перенести на React весь сайт или переписать всего несколько виджетов.
Добавляем React за одну минуту
Необязательно: Используем React с JSX (без каких-либо бандлеров!)
Добавляем React за одну минуту
В этом разделе вы научитесь добавлять React на существующую HTML-страницу. Вы можете практиковаться на своём собственном сайте или создать для этого пустой HTML-файл.
Мы не будем пользоваться сложными инструментами сборки или что-то устанавливать. Всё, что вам нужно — это доступ к Интернету и минута свободного времени.
Шаг 1: Добавляем DOM-контейнер в HTML
Для начала, откройте HTML-файл страницы, которую хотите отредактировать. Добавьте пустой тег в месте, где вы хотите отобразить что-нибудь с помощью React. Например:
divid="like_button_container">div>
Затем назначьте созданному уникальный атрибут id . Это позволит впоследствии найти тег из JavaScript-кода и отобразить React-компоненты внутри него.
Совет
«Контейнер» можно поместить где угодно внутри тега . Вы можете создать любое количество независимых DOM-контейнеров на одной странице. Эти контейнеры принято оставлять пустыми, так как React в любом случае заменяет всё их содержимое.
Первые два тега загружают React. Третий тег загружает код вашего собственного компонента.
Шаг 3: Создаём React-компонент
Создайте файл с именем like_button.js рядом с вашим HTML-файлом.
Возьмите этот стартовый код и вставьте его в созданный ранее файл.
Совет
В данном коде создаётся React-компонент с именем LikeButton . Не беспокойтесь, если что-то кажется вам непонятным — мы подробно разберём принципы разработки на React позже, в нашем практическом руководстве и во введении в основные понятия. Пока же мы просто посмотрим, как это выглядит на экране.
Добавьте ещё 3 строки в конец файла like_button.js , после стартового кода:
Эти три строки кода ищут элемент , который мы добавили в HTML на первом шаге, а затем отображают React-компонент с кнопкой «Нравится» внутри него.
Вот и всё! Вы только что добавили свой первый React-компонент на страницу.
Перейдите к следующим разделам, если хотите узнать о других способах добавить React.
Совет: Повторное использование компонентов
Зачастую, вам может понадобиться отобразить React-компонент в нескольких местах одной и той же HTML-страницы. Вот как можно показать сразу три кнопки «Нравится» с разными данными:
Примечание
Этот способ лучше всего подходит для страниц, содержащих несколько изолированных участков кода, написанных на React. Внутри чистого React-кода проще использовать композицию компонентов.
Совет: Минификация JavaScript для продакшена
Публикуя ваш сайт на продакшен, имейте в виду, что несжатый JavaScript значительно замедляет страницу для ваших пользователей.
Если вы уже минифицируете свои скрипты, то не забудьте подготовить к продакшену сам React. Для этого поменяйте окончания ссылок на React на production.min.js :
Если же вы не настроили минификацию для ваших скриптов, то вот один из вариантов, как это сделать.
Необязательно: Используем React с JSX
В предыдущих примерах мы не выходили за рамки обычных браузерных возможностей. В частности, мы указываем, что React должен выводить на экран, просто вызывая JavaScript-функцию:
const e = React.createElement;// Отобразить с текстом «Нравится»returne('button',onClick:()=>this.setState(liked:true>)>,'Нравится');
Однако, React позволяет использовать специальный синтаксис, называющийся JSX:
// Отобразить с текстом «Нравится»return(buttononClick=()=>this.setState(liked:true>)>>Нравитсяbutton>);
Эти два примера делают одно и то же. Несмотря на то, что JSX является совершенно необязательным, многие разработчики считают его удобным для разработки UI — как с React, так и с другими библиотеками.
Вы можете попробовать JSX в этом онлайн-конвертере.
Быстрый старт с JSX
Чтобы быстро попробовать JSX, добавьте такой -тег на страницу:
Теперь синтаксис JSX доступен внутри каждого -тега, у которого есть атрибут type=»text/babel» . Скачайте пример HTML-кода с JSX, чтобы поэкспериментировать.
Такой подход удобен для обучения или создания быстрых демо, но следует помнить, что работа сайта при этом сильно замедляется. Поэтому для продакшена JSX лучше добавить по-другому. Если вам интересно попробовать, удалите добавленный ранее -тег и все атрибуты type=»text/babel» . Вместо них мы будем пользоваться препроцессором JSX, который автоматически трансформирует весь код внутри -тегов.
Добавляем JSX в проект
JSX можно добавить в существующий проект и без разных сложных инструментов вроде бандлера или сервера для разработки. По сути, добавление JSX напоминает добавление препроцессора CSS. Необходимо лишь убедиться, что на вашем компьютере установлен Node.js.
С помощью терминала перейдите в директорию вашего проекта и запустите следующие команды:
Шаг 1: Запустите команду npm init -y (если появляются ошибки, попробуйте этот способ)
Шаг 2: Запустите команду npm install babel-cli@6 babel-preset-react-app@3
Совет
Мы используем npm только для установки препроцессора JSX. React и код приложения всё ещё остаются в -тегах.
Поздравляем! Вы только что добавили в ваш проект поддержку JSX, готовую к продакшену.
Запускаем препроцессор JSX
Создайте директорию с названием src и наберите в терминале следующую команду:
npx не является опечаткой. Это инструмент запуска пакетов, появившийся в npm версии 5.2+.
Если у вас появляется сообщение об ошибке, похожее на «You have mistakenly installed the babel package», то это означает, что вам нужно пройти предыдущий шаг, а затем повторить запуск команды.
Дожидаться завершения работы команды не нужно — она работает в режиме наблюдения за изменениями в JSX-коде.
Попробуйте создать файл с названием src/like_button.js и вставить в него этот стартовый JSX-код. Препроцессор автоматически трансформирует новый код в чистый JavaScript, пригодный для выполнения в браузере, и сохранит его в новый файл like_button.js . При редактировании JSX-кода в существующих файлах трансформация также происходит автоматически.
Кроме препроцессинга JSX, вы в качестве бонуса получаете синтаксические новинки JavaScript, такие как классы, без головной боли с их браузерной поддержкой. Всё это доступно благодаря использованию инструмента под названием Babel, информацию о котором вы можете узнать из его документации.
Если вы неплохо разбираетесь в инструментах сборки и хотите создавать приложения на React с их помощью, обратитесь к следующему разделу, где описаны некоторые из наиболее популярных способов. Если нет — не беспокойтесь, уже знакомые нам script-теги ничуть не хуже!
Создаём новое React-приложение
These docs are old and won’t be updated. Go to react.dev for the new React docs.
See Start a New React Project for the recommended ways to create an app.
Используйте встроенный набор инструментов для лучшего взаимодействия пользователя и разработчика.
На этой странице описано несколько популярных наборов инструментов React, которые помогают в таких задачах как:
Масштабирование до большого количества файлов и компонентов.
Использование сторонних библиотек из npm.
Раннее обнаружение распространённых ошибок.
Отражение изменений CSS и JS на лету в процессе разработки.
Оптимизация кода для продакшена.
Рекомендованные на этой странице инструменты не требуют дополнительной настройки для начала работы.
Возможно, вам не нужен дополнительный набор инструментов
Если у вас нет проблем, описанных выше, или пока не чувствуете себя уверенно, используя инструменты JavaScript, рассмотрите возможность добавления React в виде простого тега на HTML-странице, при необходимости с JSX.
Также это самый простой способ добавить React в существующий веб-сайт. Вы всегда можете расширить набор инструментов, если посчитаете это нужным.
Рекомендуемый набор инструментов
Команда React в первую очередь рекомендует следующие решения:
Если вы изучаете React или создаёте новое одностраничное приложение, используйте Create React App.
Если вы создаёте серверный сайт с Node.js, попробуйте Next.js.
Если вы создаёте статический контент-ориентированный сайт, попробуйте Gatsby.
Если вы создаёте библиотеку компонентов или интегрируетесь с существующей кодовой базой, попробуйте более гибкие наборы инструментов.
Create React App
Create React App — удобная среда для изучения React и лучший способ начать создание нового одностраничного приложения на React.
Инструмент настраивает среду для использования новейших возможностей JavaScript, оптимизирует приложение для продакшена и обеспечивает комфорт во время разработки. Вам понадобятся Node.js не ниже версии 14.0.0 и npm не ниже версии 5.6 на вашем компьютере. Для создания проекта выполните команды:
npx create-react-app my-app cd my-app npm start
Create React App не обрабатывает бэкенд логику или базы данных, он только предоставляет команды для сборки фронтенда, поэтому вы можете использовать его с любым бэкэндом. «Под капотом» используются Babel и webpack, но вам не нужно ничего знать о них.
Когда ваше приложение готово к развёртыванию в продакшене, запуск команды npm run build создаст оптимизированную сборку вашего приложения в папке build . Вы можете узнать больше о Create React App из его README и его пользовательского руководства.
Next.js — это популярный легковесный фреймворк для статических и серверных приложений, использующих React. Он включает в себя готовые решения для стилизации и маршрутизации и предполагает, что вы используете Node.js в качестве серверной среды.
Gatsby — лучший способ для создания статических сайтов с помощью React. Он позволяет использовать React-компоненты, но выводит предварительно отрендеренный HTML и CSS, чтобы гарантировать минимальное время загрузки.
Более гибкие наборы инструментов
Следующие наборы инструментов предлагают больше гибкости и выбора. Мы рекомендуем их более опытным разработчикам:
Neutrino сочетает в себе возможности webpack и простоту пресетов. Инструмент включает в себя пресеты для React-приложений и React-компонентов.
Nx — набор инструментов для ведения фулстэк разработки в монорепозиториях, который обладает встроенной поддержкой React, Next.js, Express и так далее.
Parcel — быстрый упаковщик веб-приложений с нулевой конфигурацией, который работает с React.
Razzle — это фреймворк для серверного рендеринга, более гибкий чем Next.js, но не требующий обязательной настройки.
Создание набора инструментов с нуля
В набор инструментов для сборки JavaScript обычно входят:
Менеджер пакетов, такой как Yarn или npm. Он позволяет вам использовать обширную экосистему сторонних пакетов и легко устанавливать или обновлять их.
Сборщик, такой как webpack или Parcel. Он позволяет писать модульный код и объединять его в небольшие пакеты, чтобы оптимизировать время загрузки.
Компилятор, такой как Babel. Он позволяет писать современный код JavaScript, который будет работать даже в старых браузерах.
Если вы предпочтёте создать свой собственный набор JavaScript-инструментов с нуля, ознакомьтесь с этим руководством, в котором воссоздаются некоторые функции Create React App.
Не забудьте убедиться, что ваш набор инструментов правильно настроен для продакшена.
Как вставить страницу html в react созданный с помощью create-react-app?
Вот ошибка которую выбивает: ./src/Components/RegForm/index.html 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders Может есть другой способ импортировать html?
Вопрос задан более двух лет назад
840 просмотров
1 комментарий
Средний 1 комментарий
Ну самый просто способ, который в голову приходит, — это положить html в public папку и просто в src путь к файлу прописать.
Решения вопроса 0 Ответы на вопрос 1
Alex Bernadotte @alex_bernadotte
Спасибо Яндекс Переводчику за этот ответ, я новичок в русском языке (я из Финляндии). У меня была та же проблема, что и у вас; вот как я ее решил.
Чтобы устранить первую ошибку, я преобразовал html в строку, обернув ее в «, экспортировав ее как:
module.exports.HtmlString = ` `
и переименовав html-файл в js. Затем импортируйте файл в приложение React с помощью
import HtmlString from ‘./html String.js ‘
и вставляем его в iframe с атрибутом
title="iFrame Title"/>
В HTML5 есть не только src для файла или URL, но и srcDoc для iframe, который принимает html в строковой форме.
Затем возникла проблема с получением моего импортного script.js в исходную html-строку, что я и сделал, обернув весь script.js файл в модуле « точно так же, как html»
Мне пришлось экранировать множество различных символов, таких как кавычки, специальные кавычки « уже есть в файле javascript, и $, пока весь файл не превратился в непрерывную строку чтобы сделать это, я использовал обратную косую черту \ перед символами, которые в противном случае разорвали бы строку, «экранируя» их.
Надеюсь, этот ответ облегчит работу следующему человеку, который будет искать этот ответ. с любовью из Финляндии
