Как запустить приложение React в браузере

Обновлено: 21.11.2024

Обратите внимание, что я не хочу создавать-реагировать-приложение, я просто хочу попробовать его в своей локальной системе.

Я сделал следующее

в моем /Users/me/reactwork я создал 2 файла clock.html и clock.js
затем в браузере Chrome я ввожу /Users/me/reactwork/clock.html . Я ожидаю увидеть свои часы, но их нет

Что я делаю не так?

Я очень новичок в js и реагирую, только начал читать, поэтому, пожалуйста, предоставьте мне пошаговые инструкции.

Вот мои файлы

часы.html

часы.js

Инструменты разработчика Chrome показывают эту ошибку

Я исследовал эту ошибку и обнаружил, что мне нужен сервер, поэтому я выполнил следующую команду из места, где находятся мои файлы html и js

это запускает сервер на порту 8000, затем я захожу в Chrome и набираю

, но это показывает ошибку в Chrome Dev Tools

Хоть я и хотел бы, чтобы это работало таким образом, у меня не получилось, поэтому я решил сделать это как раздел вкладки «Создать новое приложение», а затем изменил файл index.js, чтобы использовать код, который у меня был в моем файл clock.js, как описано выше. Это сработало.

5 ответов 5

Вы можете запустить react.js прямо в браузере. NPM или NODE.JS НЕ ТРЕБУЮТСЯ. Вот фрагмент:

@SpencerPowell Мой ответ иллюстрирует, как запустить ReacJS локально без использования значения create-react-app без установки node.js в вашей локальной среде. Когда вы нажимаете «Выполнить фрагмент кода», запускается код реакции hello world. FE StackOverflow не встроен в React. Принятый ответ не отвечает на вопрос.

Ваш ответ неплох. Это несколько полезно, но это просто не устраняет ошибку, которую он видел при попытке запустить ее так, как вы описали выше (а именно, ошибки схемы протокола, которые он видел).

Как минимум вам потребуется загрузить React (и ReactDOM) в файл clock.html . Некоторые инструкции доступны в документации по установке React.

Если вы хотите быстро приступить к работе, проще использовать приложение create-react-app. Вам просто нужно установить node + npm, а затем выполнить несколько команд, перечисленных в файле README create-react-app:

Это создаст простое приложение "Hello, world" и откроет его в браузере. Затем вы можете внести в него изменения и увидеть, как он обновляется в браузере в режиме реального времени.

Спасибо, дружище, я отказался от попыток запустить его самостоятельно, вместо этого пошел по этому пути и отредактировал созданный файл index.js, чтобы отобразить мои часы. Это сработало

это кажется излишним (вам придется создавать целое приложение каждый раз, когда вы разрабатываете новый компонент). вы можете использовать другие инструменты, которые интегрируются с вашим существующим кодом, чтобы упростить процесс разработки (см. мой ответ на этой странице).

Почему спустя 2 года люди минусуют мой ответ?! 🤦‍♂️ Автор вопроса сказал: «Я очень новичок в js и реагирую». Это простой и надежный способ для начинающих разработчиков начать работу с React. В этом вся суть проекта 🤦‍♂️

Во-первых, ваш html-файл имеет неправильный синтаксис. Тег head используется для невизуальных элементов. Вам нужно добавить этот тег h1 внутрь тега body. Если ваши знания HTML не так хороши, я предлагаю вам немного ознакомиться с HTML и Javascript, прежде чем погрузиться в React.

Вторая проблема заключается в том, что в вашем html отсутствуют необходимые сценарии реагирования. Вам нужно добавить реакцию и необходимые библиотеки javascript в свой файл перед использованием реакции. Вы можете найти больше информации об этом здесь

Третья проблема, которую я вижу, заключается в том, что в вашем html отсутствует тег с корневым идентификатором. Строка с document.getElementById('root') пытается найти элемент с корневым идентификатором в вашем html, чтобы отобразить реагирующий элемент внутри.

Я предлагаю вам проверить W3Schools, чтобы быстро и легко изучить основы HTML и Javascript, если вы не знакомы с ними. После этого вы можете начать изучать React с помощью официального инструмента create-react-app. Это поможет вам лучше понять структуру проекта и то, как все работает.

Если вы не знакомы с тем, как настроить приложение React с нуля, это может быть довольно сложно, тем более что по этой теме еще нет руководств. Однако после прочтения этой статьи вы сможете полностью понять, как запускать проекты React.js на локальном хосте.

Начало работы

Прежде чем вы начнете, необходимо выполнить некоторые предварительные условия или предварительные условия, необходимые для вашей системы. Убедитесь, что ваша система:

Имеет хороший установщик: в процессе вы будете загружать несколько пакетов программного обеспечения, поэтому для быстрого и беспроблемного процесса вам понадобится приличный установщик или менеджер пакетов.

Имеет NPM: NPM (диспетчер пакетов узла), вероятно, является лучшим менеджером пакетов для этой задачи. В этой части программирования мы будем иметь дело с JavaScript, и для запуска фреймворка JavaScript в данной среде нам понадобится NPM. Чтобы использовать его, вам нужно установить Node.js. После загрузки Node.js NPM устанавливается автоматически.

Установка NPM и Nord.js:

Перейдите по этой ссылке Node.js
Скачать текущую последнюю версию функций, а не LTS-версию
При установке Node.js установите вместе с ним и NPM

Зачем устанавливать Node.js?

Во время установки Node.js в параметрах пользовательских настроек вы увидите параметр для диспетчера пакетов NPM. Как следует из названия, диспетчер пакетов Node (NPM) — это, по сути, дополнительная функция, которую вы получаете вместе с Node.js вместе с его полезными функциями.

У вас не может быть отдельного диспетчера пакетов Node (NPM) без установки Node.js, поэтому для этой задачи вам понадобятся Node.s.

Установите текстовый редактор

У вас также должен быть текстовый редактор. Вы не привязаны к конкретному редактору, однако я рекомендую вам выбрать текстовый редактор Visual Studio, который также называется VS Code или Visual Studio Code. Его можно легко загрузить с веб-сайта Visual Studio здесь.

Использование приложения Create React: метод NPX

Этот метод называется методом NPX. Общая форма используемой команды NPX выглядит следующим образом: npx create-react-app

Чтобы создать новое приложение Create, мы используем приложение Create React, которое представляет собой инструмент с интерфейсом командной строки. Цель Create React App — дать вам возможность создавать и запускать приложения React без необходимости выполнять какие-либо настройки. С приложением Create React все, что вам нужно сделать, это запустить простую команду, и нужный проект React будет создан.

Выполните следующие действия:

Откройте встроенный терминал в Visual Studio и выполните следующую команду:

<Р>

Здесь мы выбрали «hello world» в качестве названия нашего проекта. Вы можете выбрать все, что вам нравится.

После успешного выполнения этой команды вы сможете увидеть папку приложения, созданную с выбранным вами именем.

Теперь, чтобы запустить это приложение, вам сначала нужно будет перейти в папку, содержащую проект. Это можно сделать с помощью следующей команды:

<Р>

После этого используйте другую команду:

<Р>

< /p>

Скоро появятся инструкции, как показано на изображении ниже:

Теперь вернитесь в свою Visual Studio:

Нажмите на значок стрелки рядом с папкой "hello world", чтобы увидеть дополнительные параметры, развернув ее.
Оттуда разверните исходную папку, нажав на стрелку рядом с «src».
Из отображаемых параметров откройте «App.js».
Отредактируйте текст, заменив его на Hello Word.
Сохраните свою работу в файле

После сохранения файла браузер автоматически обновит отображение вашего первого приложения React, как показано на изображении ниже.

<Р>

Использование метода NPM

Существует альтернативный метод, известный как метод NPM. Для этого вам нужно будет создать приложение React глобально. После этого вы сможете использовать пакет для создания проектов или приложений.

Установите пакет глобально, используя следующую команду:

После установки используйте другую команду следующим образом:

Почему мы используем подход NPX, а не метод NPM?

Подход NPX упрощает выполнение вашей задачи, поскольку вам не нужно устанавливать пакет глобально.При использовании метода NPM вам необходимо установить его глобально и постоянно обновлять пакет приложения Create.

В заключение

Надеюсь, теперь вы лучше понимаете этот процесс. Запуск проекта JS на локальном хосте больше не должен казаться сложным. На самом деле, все, что вам нужно, это установить необходимые компоненты в вашей системе, изучить основные концепции и несколько команд и правильно реализовать эти команды, как описано в этой статье. Тогда вы сможете без проблем запускать проекты React,js на локальном хосте!

React – это популярная библиотека JavaScript, разработанная Facebook для создания пользовательских интерфейсов. Редактор кода Visual Studio поддерживает React.js IntelliSense и навигацию по коду по умолчанию.

Добро пожаловать в React

В этом руководстве мы будем использовать генератор приложений create-react-app. Чтобы использовать генератор, а также запустить сервер приложений React, вам потребуется установленная среда выполнения Node.js JavaScript и npm (менеджер пакетов Node.js). npm входит в состав Node.js, который можно загрузить и установить из загрузок Node.js.

Совет. Чтобы проверить правильность установки Node.js и npm на вашем компьютере, введите node --version и npm --version в терминале или командной строке.

Теперь вы можете создать новое приложение React, набрав:

где my-app — это имя папки для вашего приложения. Создание приложения React и установка его зависимостей может занять несколько минут.

Примечание. Если вы ранее установили create-react-app глобально с помощью npm install -g create-react-app , мы рекомендуем вам удалить пакет с помощью npm uninstall -g create-react-app, чтобы убедиться, что npx всегда использует последнюю версию.

Давайте быстро запустим наше приложение React, перейдя в новую папку и набрав npm start, чтобы запустить веб-сервер и открыть приложение в браузере:

Чтобы открыть приложение React в VS Code, откройте другой терминал или окно командной строки, перейдите в папку my-app и введите code . :

Предварительный просмотр уценки

В проводнике файлов вы увидите файл приложения README.md Markdown. Здесь содержится много отличной информации о приложении и React в целом. Хороший способ просмотреть README — использовать предварительный просмотр VS Code Markdown. Вы можете открыть предварительный просмотр либо в текущей группе редактора (Markdown: открыть предварительный просмотр ⇧⌘V (Windows, Linux Ctrl+Shift+V )), либо в новой группе редактора сбоку (Markdown: открыть предварительный просмотр сбоку ⌘KV ( Windows, Linux Ctrl+KV )). Вы получите удобное форматирование, навигацию по гиперссылкам на заголовки и подсветку синтаксиса в блоках кода.

Подсветка синтаксиса и сопоставление квадратных скобок

Теперь разверните папку src и выберите файл index.js. Вы заметите, что VS Code имеет подсветку синтаксиса для различных элементов исходного кода, и, если вы поместите курсор на круглую скобку, также будет выбрана соответствующая скобка.

Интеллисенс

Когда вы начнете вводить index.js , вы увидите подсказки или дополнения.

Выбрав предложение и набрав . , вы видите типы и методы объекта с помощью IntelliSense.

VS Code использует языковую службу TypeScript для интеллектуального анализа кода JavaScript и имеет функцию, называемую автоматическим сбором типов (ATA). ATA извлекает файлы объявления типа npm ( *.d.ts ) для модулей npm, на которые есть ссылки в package.json .

Если вы выберете метод, вы также получите справку по параметрам:

Перейти к определению, посмотреть определение

С помощью языковой службы TypeScript VS Code также может предоставить информацию об определении типа в редакторе с помощью команды «Перейти к определению» ( F12 ) или «Просмотреть определение» ( ⌥F12 (Windows Alt+F12 , Linux Ctrl+Shift+F10 ) ). Наведите курсор на приложение, щелкните правой кнопкой мыши и выберите Peek Definition. Откроется окно Peek с определением приложения из App.js .

Нажмите Escape, чтобы закрыть окно Peek.

Привет, мир!

Давайте обновим пример приложения до "Hello World!". Создайте новый заголовок H1 с надписью «Hello, world!» и замените тег в ReactDOM.render элементом .

После сохранения файла index.js работающий экземпляр сервера обновит веб-страницу, и вы увидите сообщение "Hello World!" при обновлении браузера.

Совет. VS Code поддерживает функцию автоматического сохранения, которая по умолчанию сохраняет ваши файлы с задержкой. Установите флажок «Автосохранение» в меню «Файл», чтобы включить автосохранение, или напрямую настройте пользовательский параметр files.autoSave.

Отладка React

Для отладки кода React на стороне клиента мы будем использовать встроенный отладчик JavaScript.

Примечание. В этом руководстве предполагается, что у вас установлен браузер Edge. Если вы хотите отлаживать с помощью Chrome, замените тип запуска на pwa-chrome. Также имеется отладчик для браузера Firefox.

Установить точку останова

Чтобы установить точку останова в index.js, нажмите на поле слева от номеров строк. Это установит точку останова, которая будет видна в виде красного круга.

Настройте отладчик

Нам нужно изначально настроить отладчик. Для этого перейдите в представление «Выполнить» ( ⇧⌘D (Windows, Linux Ctrl+Shift+D ) ) и нажмите кнопку с изображением шестеренки или создайте ссылку launch.json, чтобы создать файл конфигурации отладчика launch.json. Выберите Edge: запуск из раскрывающегося списка Select Environment. Это создаст файл launch.json в новой папке .vscode в вашем проекте, который включает конфигурацию для запуска веб-сайта.

Для нашего примера нам нужно внести одно изменение: изменить порт URL-адреса с 8080 на 3000 . Ваш файл launch.json должен выглядеть так:

Убедитесь, что ваш сервер разработки запущен ( npm start ). Затем нажмите F5 или зеленую стрелку, чтобы запустить отладчик и открыть новый экземпляр браузера. Исходный код, в котором установлена точка останова, запускается при запуске до подключения отладчика, поэтому мы не столкнемся с точкой останова, пока не обновим веб-страницу. Обновите страницу, и вы должны достичь точки останова.

Вы можете пройтись по исходному коду (F10), проверить переменные, такие как element , и просмотреть стек вызовов клиентского приложения React.

Для получения дополнительной информации об отладчике и его доступных параметрах ознакомьтесь с нашей документацией по отладке браузера.

Редактирование и отладка в реальном времени

Если вы используете веб-пакет вместе с приложением React, вы можете повысить эффективность рабочего процесса, воспользовавшись механизмом HMR веб-пакета, который позволяет редактировать и отлаживать в реальном времени непосредственно из VS Code. Вы можете узнать больше в этом интерактивном редактировании и отлаживать свои приложения React непосредственно из сообщения в блоге VS Code и документации по замене модулей webpack.

Линтинг

Линтеры анализируют ваш исходный код и могут предупредить вас о потенциальных проблемах перед запуском приложения. Языковые службы JavaScript, включенные в VS Code, по умолчанию поддерживают проверку синтаксических ошибок, которую вы можете увидеть в действии на панели «Проблемы» («Просмотр» > «Проблемы» ⇧⌘M (Windows, Linux Ctrl+Shift+M )).

Попробуйте сделать небольшую ошибку в исходном коде React, и вы увидите красную волнистую линию и ошибку на панели «Проблемы».

Линтеры могут выполнять более сложный анализ, обеспечивая соблюдение правил кодирования и обнаруживая анти-шаблоны. Популярным линтером JavaScript является ESLint. ESLint в сочетании с расширением ESLint VS Code обеспечивает отличные возможности анализа кода в продукте.

Сначала установите инструмент командной строки ESLint:

Затем установите расширение ESLint, перейдя в представление «Расширения» и введя «eslint».

После установки расширения ESLint и перезагрузки VS Code вам потребуется создать файл конфигурации ESLint, .eslintrc.js . Вы можете создать его с помощью команды ESLint расширения: Создать команду конфигурации ESLint из палитры команд ( ⇧⌘P (Windows, Linux Ctrl+Shift+P )).

Команда предложит вам ответить на ряд вопросов на панели терминала. Возьмите значения по умолчанию, и он создаст файл .eslintrc.js в корне вашего проекта, который выглядит примерно так:

ESLint теперь анализирует открытые файлы и показывает в index.js предупреждение о том, что приложение определено, но никогда не используется.

Вы можете изменить правила ESLint в файле .eslintrc.js.

Давайте добавим правило ошибки для лишних точек с запятой:

Теперь, если вы по ошибке поставили несколько точек с запятой в строке, вы увидите сообщение об ошибке (красная волнистая линия) в редакторе и запись об ошибке на панели "Проблемы".

Шаг 1. Как установить приложение Create React

Чтобы использовать приложение Create React, нам сначала нужно открыть наш терминал или командную строку на нашем компьютере.

Чтобы создать новый проект React, мы можем использовать инструмент npx при условии, что у вас есть версия npm не ниже 5.2.

npx дает нам возможность использовать пакет create-react-app без предварительной установки его на наш компьютер, что очень удобно.

Использование npx также гарантирует, что мы используем последнюю версию приложения Create React для создания нашего проекта:

После того, как мы запустим эту команду, будет создана папка с именем «my-react-app», где мы указали на нашем компьютере, и все необходимые пакеты будут автоматически установлены.

Create React App также дает нам несколько шаблонов, которые можно использовать для определенных типов проектов React.

Например, если бы мы хотели создать проект React, использующий инструмент TypeScript, мы могли бы использовать для этого шаблон вместо того, чтобы устанавливать TypeScript вручную.

Чтобы создать приложение React, использующее TypeScript, мы можем использовать шаблон TypeScript Create React App:

Шаг 2. Проверка структуры проекта

После создания файлов проекта и установки зависимостей структура нашего проекта должна выглядеть следующим образом:

Для чего нужны эти файлы и папки?

README.md — это файл с уценкой, содержащий множество полезных советов и ссылок, которые могут помочь вам при обучении использованию приложения Create React.
node_modules — это папка, содержащая весь связанный с зависимостями код, установленный приложением Create React. Вам никогда не понадобится заходить в эту папку.
package.json, который управляет зависимостями нашего приложения и тем, что включено в нашу папку node_modules для нашего проекта, а также скрипты, необходимые для запуска нашего приложения.
.gitignore — это файл, который используется для исключения файлов и папок из списка отслеживаемых Git. Мы не хотим включать большие папки, такие как папка node_modules
public — это папка, которую мы можем использовать для хранения наших статических ресурсов, таких как изображения, svgs и шрифты для нашего приложения React.
src — это папка, содержащая наш исходный код.Именно здесь будет жить весь наш код, связанный с React, и это то, над чем мы в первую очередь будем работать при создании нашего приложения.

Примечание. Новый репозиторий Git создается всякий раз, когда вы создаете новый проект с помощью Create React App. Вы можете сразу начать сохранять изменения в своем приложении, используя git add . и git commit -m "ваше сообщение о коммите" .

Шаг 3. Как запустить проект React

После того, как вы перетащите свой проект в редактор кода, вы можете открыть свой терминал (в VSCode выберите «Вид» > «Терминал»).

Чтобы начать свой проект React, вы можете просто запустить:

Когда мы запускаем наш проект, в браузере по умолчанию на нашем компьютере автоматически открывается новая вкладка браузера для просмотра нашего приложения.

Сервер разработки запустится на localhost:3000, и мы сразу же увидим начальную домашнюю страницу нашего приложения.

Откуда берется контент нашего приложения?

Это происходит из файла App.js в папке src. Если мы перейдем к этому файлу, мы сможем начать вносить изменения в код нашего приложения.

В частности, давайте удалим теги p и a и добавим элемент h1 с названием нашего приложения "React Posts Sharer":

Когда вы сохраняете с помощью Command/Ctrl + S, вы увидите, что наша страница немедленно обновляется и выглядит следующим образом:

Что хорошо в сервере разработки, так это то, что он автоматически обновляется, чтобы отразить наши изменения. Нет необходимости вручную обновлять браузер.

Примечание. Единственный раз, когда вам может понадобиться обновить браузер при работе с приложением Create React, это когда у вас возникает ошибка.

Шаг 4. Как запускать тесты с помощью библиотеки тестирования React

Create React App упрощает тестирование вашего приложения React.

Он включает в себя все пакеты, необходимые для запуска тестов с использованием библиотеки тестирования React ( @testing-library/react ).

Базовый тест включен в файл App.test.js в src. Он проверяет, что наш компонент приложения успешно отображает ссылку с текстом «учиться реагировать».

Мы можем запустить наши тесты с помощью команды:

Однако, если мы запустим это, наш тест завершится ошибкой.

Это потому, что у нас больше нет элемента ссылки, а есть элемент заголовка. Чтобы пройти наш тест, мы хотим получить элемент заголовка с текстом «React Posts Sharer».

После повторного запуска теста мы видим, что он прошел успешно:

Примечание. При запуске тестовой команды вам не нужно запускать и останавливать ее вручную. Если у вас не прошел тест, вы можете перейти к коду приложения, исправить ошибку, и как только вы нажмете «Сохранить», все тесты будут автоматически перезапущены.

Шаг 5. Как изменить метаданные приложения

Как работает наш проект? Мы можем увидеть, как это сделать, перейдя к файлу index.js.

Пакет ReactDOM визуализирует наше приложение (в частности, компонент приложения и каждый компонент в нем), присоединяя его к элементу HTML со значением идентификатора 'root'.

Этот элемент можно найти в файле public/index.html .

Все приложение React прикреплено к этой HTML-странице с помощью элемента div с идентификатором корня, который вы видите выше.

Нам не нужно ничего менять в тегах body. Однако полезно изменить метаданные в тегах заголовка, чтобы сообщить пользователям и поисковым системам о нашем конкретном приложении.

Мы видим, что он включает в себя метатеги для заголовка, описания и изображения фавикона (маленький значок на вкладке браузера).

Вы также увидите несколько других тегов, таких как тема-цвет, яблоко-тач-значок и манифест. Они полезны, если пользователи хотят добавить ваше приложение на главный экран своего устройства или компьютера.

В нашем случае мы можем изменить заголовок на название нашего приложения и описание в соответствии с создаваемым нами приложением:

Шаг 6. Как работать с изображениями и другими активами

Если мы посмотрим на наш компонент приложения, мы увидим, что мы используем элемент img.

Интересно, что мы импортируем файл из нашей папки src, как если бы это была переменная, экспортируемая из этого файла.

Мы можем импортировать файлы изображений и другие статические ресурсы непосредственно в наши компоненты React. Эта функция реализована в конфигурации веб-пакета приложения Create React.

Вместо того, чтобы включать статические ресурсы непосредственно в нашу папку src, у нас также есть возможность включить их в нашу общую папку.

Если мы переместим наш файл logo.svg из src в общедоступный, вместо того, чтобы импортировать наш файл с помощью синтаксиса импорта, мы можем написать следующее:

Любой файл, помещенный в общую папку, можно использовать в файлах .js или .css с синтаксисом: /filename.extension .

Что удобно в Create React App, так это то, что нам вообще не нужно использовать элемент img для отображения этого svg.

Мы можем импортировать этот svg как компонент, используя следующий синтаксис:

Что здесь происходит? Мы можем импортировать файл svg как ReactComponent, а затем переименовать его в любое имя, которое нам нравится, используя ключевое слово as.

Другими словами, мы можем использовать импортированный файл svg так же, как обычный компонент.

Файлы Svg традиционно сложно использовать в React. Этот синтаксис компонента делает его очень простым и позволяет нам делать такие вещи, как использование встроенных стилей (как вы видите выше, где мы устанавливаем высоту логотипа на 200 пикселей).

Шаг 7. Как установить зависимости

Для нашего приложения для обмена сообщениями, которое мы делаем, давайте возьмем некоторые данные сообщений для отображения в нашем приложении из JSON Placeholder API.

Мы можем использовать зависимость под названием axios, чтобы сделать запрос на получение наших сообщений.

Чтобы установить axios, запустите:

Примечание. Пакеты проще устанавливать с помощью сокращенной команды npm i axios вместо npm install

Когда мы установим axios, он будет добавлен в нашу папку node_modules.

Мы можем просмотреть все установленные нами зависимости непосредственно в нашем файле package.json и увидеть, что axios были добавлены в раздел «зависимости»:

Мы не будем включать его в этот проект, но если вы заинтересованы в использовании TypeScript в существующем проекте Create React App, этот процесс очень прост.

Вам просто нужно установить зависимость typescript и соответствующие определения типов, чтобы использовать их для разработки и тестирования React:

После этого вы можете просто перезапустить сервер разработки и переименовать любой файл React, оканчивающийся на .js, в .tsx, и вы получите работающий проект React и TypeScript.

Шаг 8. Как импортировать компоненты

Вместо того, чтобы писать весь наш код в компоненте приложения, давайте создадим отдельный компонент для извлечения наших данных и их отображения.

Мы назовем этот компонент Posts, поэтому давайте создадим папку в src для хранения всех наших компонентов и поместим в нее файл: Posts.js.

Полный путь к файлу нашего компонента: src/components/Posts.js .

Чтобы получить наши сообщения, мы запросим их из JSON Placeholder, поместим их в переменную состояния, называемую сообщениями, а затем сопоставим их, чтобы отобразить их заголовок и текст:

Мы извлекаем и возвращаем данные наших сообщений из компонента "Сообщения", но чтобы увидеть их в нашем приложении, нам нужно импортировать их в компонент "Приложение".

Давайте вернемся к App.js и импортируем его, перейдя в папку компонентов и получив компонент Posts из Posts.js.

После этого мы можем разместить наш компонент "Сообщения" под заголовком:

И мы можем видеть все полученные сообщения на нашей домашней странице под нашим заголовком:

Шаг 9. Как оформить наше приложение с помощью CSS

Наше приложение могло бы выиграть от некоторых улучшенных стилей.

Приложение Create React изначально поддерживает CSS. Если вы перейдете к App.js, вверху вы увидите, что мы импортируем файл App.css из src.

Примечание. Вы можете импортировать файлы .css в любой понравившийся вам компонент, однако эти стили будут применяться глобально к нашему приложению. Они не привязаны к компоненту, в который импортирован файл .css.

В App.css мы можем добавить несколько стилей, чтобы улучшить внешний вид нашего приложения:

Существует еще одна глобальная таблица стилей index.css с более общими правилами стиля.

В нем мы можем добавить некоторые дополнительные свойства для элемента body, чтобы сделать наш фон темным, а текст белым:

После добавления этих стилей наше приложение стало намного лучше:

Имейте в виду, что также очень легко добавить более сложные конфигурации CSS, например, если вы хотите добавить модули CSS или SASS в свое приложение React.

Дополнительные полезные ресурсы по стилю CSS включены в ваш файл README.md.

Шаг 10. Как создать приложение и опубликовать его

Когда мы довольны нашим приложением и готовы его опубликовать, мы можем создать его с помощью следующей команды:

Эта команда создаст оптимизированную производственную сборку для нашего проекта и выведет, какие файлы она сгенерировала и насколько велик каждый файл:

Вывод поступает из инструмента сборки Webpack.

Это помогает нам получить представление о размере файлов нашего приложения, поскольку размер наших файлов .js, в частности, может оказать большое влияние на производительность нашего приложения.

Каждый фрагмент содержит уникальную строку или хэш, который будет меняться при каждой сборке, чтобы браузер не сохранял (кэшировал) любое новое развертывание.

Если бы у нас не было этого хэша для очистки кеша для каждого из наших файлов, мы, вероятно, не смогли бы увидеть никаких изменений, внесенных в наше приложение.

Наконец, мы можем запустить наш созданный проект React локально с помощью npm package serve .

Это полезно для обнаружения любых ошибок, которые могут возникнуть в окончательной версии нашего проекта, прежде чем опубликовать его в Интернете.

Как и create-react-app, мы можем использовать npx для запуска serve без глобальной установки на нашем компьютере.

При использовании serve наше приложение запустится на другом порту разработки вместо 3000. В данном случае localhost:5000.

И теперь у нас есть готовое приложение React, готовое к публикации в Интернете в любой службе развертывания, такой как Netlify, Github Pages или Heroku!

Понравился этот пост? Присоединяйтесь к учебному лагерю React

Учебный курс React объединяет все, что вам нужно знать об изучении React, в один комплексный пакет, включая видео, шпаргалки и специальные бонусы.

Присоединяйтесь к тысячам разработчиков, которые узнают, как стать профессионалом React в рекордно короткие сроки:

Читайте также: