Ваше первое практическое занятие по React

Введение

Привет! Добро пожаловать в LabEx! В этом первом практическом занятии вы научитесь создавать классическую программу "Hello, World!" на React.

Нажмите кнопку Продолжить ниже, чтобы начать практику.

Привет, React

Предварительные требования

Перед началом работы убедитесь, что Node.js и npm установлены на виртуальной машине LabEx.

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

cd ~/project
curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get update
sudo apt-get install -y nodejs

Инициализация React

Попробуем запустить демонстрационный проект "Hello World" на React.

Откройте терминал или командную строку и выполните следующую команду для создания нового проекта на React:

cd ~/project
npx create-react-app hello-world-demo

Пожалуйста, подождите, пока установка завершится.

Обновление приложения React

Теперь обновим стандартное приложение React так, чтобы оно выводило сообщение "Hello, World!".

Откройте файл src/App.js в любом редакторе кода и замените его содержимое следующим кодом:

import React from "react";

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

По умолчанию сервер разработки React использует порт 3000. Чтобы изменить его на порт 8080, откройте файл package.json в редакторе кода.

Найдите раздел scripts и обновите скрипт start, добавив переменную окружения PORT:

"scripts": {
  "start": "BROWSER=none PORT=8080 react-scripts start",
 ...
}

Наконец, запустите следующую команду, чтобы запустить сервер разработки React:

cd hello-world-demo
npm start

Готово! Вы успешно запустили демонстрационный проект "Hello World" на React на локальном сервере, используя порт 8080.

Теперь вы можете переключиться на вкладку Web 8080 и нажать кнопку обновления, чтобы увидеть веб-страницу.

Итог

Поздравляем! Вы завершили свое первое практическое занятие в LabEx.

Если вы хотите узнать больше о LabEx и о том, как им пользоваться, вы можете посетить наш Центр поддержки. Или вы можете посмотреть видео, чтобы узнать больше о LabEx.

Программирование - это долгий путь, но Следующее практическое занятие находится всего в одном клике от вас. Давайте продолжим!