Изучите React | Демонстрация 'Hello, World!' | Руководства по LabEx

Введение

🧑‍💻 Новенький в Linux или LabEx? Мы рекомендуем начать с курса Быстрый старт с Linux.

Привет! Добро пожаловать в 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

Скриншот терминала при установке Node.js

Инициализация 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 "Hello World"

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

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

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

Обновление файла package.json в React

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

cd hello-world-demo
npm start

Команда запуска сервера React

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

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

Веб-страница React "Hello World"

Резюме

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

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

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

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