как подключить react
Также, разработчики React на своем официальном сайте предлагают несколько вариантов установки, включающими уже и другие фреймворки в качестве дополнения (Next.js, Remix, Gatsby).
04 апреля 2023
Также, быстро создать и запустить приложение на React.js можно с помощью create-react-app :
`npx create-react-app my-app` Утилита create-react-app имеет «под капотом» уже настроенный webpack и Babel . Переходим в папку приложения и запускаем проект:
cd my-app npm start Ссылка на документацию create-react-app.dev
Краткое руководство на русскоязычном сайте ru.reactjs
Как reactjs подключается к html файлу?
Не совсем понимаю, как react приложение находит html файл, к которому ему нужно привязаться.
То есть у есть create-react-app, есть index.js файл, где приложение рендерится в и index.html файл, в котором как раз находится этот root
Как index.js определяет этот файл? Никаких связывающих ссылок не нашел
- Вопрос задан более трёх лет назад
- 1050 просмотров
Комментировать
Решения вопроса 1
Антон Спирин @rockon404 Куратор тега React
Frontend Developer
Почитайте про сборщик модулей webpack и конкретно про webpackDevServer и HtmlWebpackPlugin. Вы можете выполнить npm run eject на тестовом проекте и посмотреть в файлах config/webpack.config.js , config/webpackDevServer.config.js и scripts/start.js как это все настроено и работает.
Если вы выполните npm run build и откройте директорию build/static , то увидите там все сгенерированные файлы.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ответы на вопрос 1
Дима Паутов @bootd Куратор тега HTML
Гугли и ты откроешь врата знаний!
Как и все обычные скрипты, подключаем сам react в теге script, подключаем index.js, внутри которого прописана инициализация на элемент root
Ответ написан более трёх лет назад
Hlib @Mysianio Автор вопроса
В том то и дело, что скрипта на подключения нет, только одинокий div с айдишником root на весь index.html
Я так понимаю дело в нпм модулях
Дима Паутов @bootd Куратор тега HTML
Hlib, чёт я ничерта не понимаю, вы как вообще подключаете то? Что вы используете?
Hlib, а вы посмотрите не в исходники а в html который в браузере.
На крайний случай в девтулзах в network откройте файл index.js или что там у вас грузится и посмотрите колонку initiator
Как подключить и установить React JS. Простой способ.
Хотите начать пользоваться библиотекой React JS? Для этого ее сначала нужно подключить и установить на те страницы, где вы планируете ее применять.
Прежде чем начать, если вы хотите подробнее погрузиться в работу с библиотекой React, рекомендую посмотреть мой курс «Философия React для начинающих»
Эта статья о простом способе, как это можно сделать. Это подойдет вам если у вас небольшой и несложный проект, который состоит из нескольких веб-страниц.
Итак, вот как вы можете подключить и попробовать в работе React JS.
1 способ. Использование «песочницы».
Чтобы просто посмотреть возможности React JS можно воспользоваться так называемой «песочницей» — онлайн страницей, где уже эта библиотека подключена и вам остается только вводить команды в соответствующую вкладку и наблюдать результат в другой.
Не нужно ничего подключать или устанавливать.
Вот страница, где это можно сделать:
После внесения изменений в код, просто нажимайте кнопку «Change View», чтобы посмотреть результат.
Этот способ использования библиотеки React JS идеально подходит, если вы просто хотите поэкспериментировать с ее возможностями. Также это удобный инструмент для обучения.
2 способ. Подключение Javascript файлов вручную.
Если вы хотите использовать React JS на своих веб-страницах, к ним нужно подключить несколько javascript файлов.
Вы можете скачать эти файлы и подключить их указав локальный путь до них.
Также можно подключать библиотеку указав путь до Javascript-файлов на удаленном сервере (на так называемых CDN серверах).
О том как можно подключить javascript файлы к веб-страницам, можно почитать здесь:
Библиотека React JS представляет собой два javascript файла.
1) Сама библиотека и ее основные функции (ядро).
2) Функции для работы с DOM-деревом. Нужна для использования на веб-страницах и работы react в браузере.
Для полноценной работы со всеми возможностями React, также рекомендуется подключить javascript транспайлер Babel. Он будет обеспечивать, чтобы ваш код поддерживал новый синтаксис Javascript и поддерживался в старых браузерах.
Пример веб-страницы, где подключена библиотека React JS можно здесь:
Это пример от разработчиков библиотеки.
Скрипты можно подключить между открывающим и закрывающим тэгом
. вашей веб-страницы.Например, подключение скриптов для разработки (development).
Можно вместо этого подключить сжатые версии этих файлов для размещения на рабочем сервере (production):
Актуальные версии ссылок CDN всегда можно посмотреть здесь:
Вот таким способом, вы можете быстро подключить React JS и уже начать его использовать.
И еще раз. Курс более подробный курс по работе с React «Философия React для начинающих» здесь .
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Учимся верстать на React за 5 минут
Эта статья для тех, кто уже знает CSS/HTML, немного JavaScript, хочет попробовать свои силы в React, но не знает, с чего начать. А начать можно как раз с верстки.
Допустим, есть у нас немного готовой HTML разметки для страницы логина, которая выглядит вот так:
Попробуем сделать эту страницу на React за несколько минут. Поехали!
Шаг 1: Открываем редактор
Создавать свой React проект не обязательно, проще всего взять готовый старт на CodeSandbox, который найдется в Google по запросу React CodeSandbox.
Выглядит он так:
И тут видно, что верстка уже есть .
div className="App"> h1>Hello CodeSandboxh1> h2>Start editing to see some magic happen!h2> /div>
Так что просто заменим верстку на ту, которая нам нужна (со страницы bootstrap sign-in). Это будет Шаг 2.
Шаг 2: Добавляем разметку
Открываем панель разработчика (а можно просто исходный код страницы) и забираем код, который относится к форме (на скриншоте справа) .
Copy-Paste из браузера в CodeSandbox, и видим такой результат:
Много красного! Но не отчаиваемся. Справа подсказка — все теги в React должны быть закрыты. Даже такие, которые в HTML не закрываются (например, input), то есть код HTML
type="checkbox" value="remember-me"> должен выглядеть так ( c закрывающим /> в конце )
type="checkbox" value="remember-me" /> Шаг 3: Правим теги
Правим все и теги на и , получаем результат:
Ура! Разметка появилась! Но без стилей. Значит, надо подключить бутстрап.
Шаг 4: Подключаем стили
Проще всего взять и скопировать файл стилей бутстрапа прямо в файл styles.css, который лежит рядом с App.js в нашем приложении:
Теперь видно, что стили подключились, но почему-то выглядит все не так красиво, как на демо. Внимательно изучаем демо страницу и замечаем дополнительный файл стилей специально для страницы signin:
Заберем этот код к себе, смотрим результат:
Последний штрих — выставим ширину 100% для #root контейнера (который нам достался от шаблона React) и отцентрируем:
Вот и все! Страницу, которая получилась в CodeSandbox можно посмотреть тут, а сам код — здесь.
P.S. Про картинку забыл написать:
Изучи React по индивидуальной программе с нашими менторами! Нанять наставника
Вместо заключения
Так можно за 5 минут стать React-верстальщиком 😉
Конечно, еще надо, как минимум, разделить файл стилей на несколько (вместо одного гигантского) и поправить ошибки в консоли. Это должно быть несложно, и можно попробовать сделать самостоятельно, а результат посмотреть тут.
Ссылки
- Исходное демо
- Что получилось
- Код
- Без ошибок в консоли и с разделением стилей на два файла
© Copyright 2014 — 2023 mkdev | Privacy Policy