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

React — это одна из самых популярных библиотек JavaScript для создания пользовательских интерфейсов. В этой статье мы рассмотрим, как создать простое приложение на React с нуля. 🚀

Шаг 1. Установка необходимых инструментов

Для начала работы с React вам потребуется:

1. Node.js — среда выполнения JavaScript. Скачайте и установите последнюю стабильную версию Node.js.
2. npm (Node Package Manager) — менеджер пакетов для Node.js. Обычно он устанавливается вместе с Node.js.

Убедитесь, что Node.js и npm установлены на вашем компьютере, выполнив следующие команды:

node --version
npm --version

Шаг 2. Создание нового проекта

Для создания нового проекта на React, мы будем использовать инструмент create-react-app. Выполните следующую команду в командной строке:

npx create-react-app my-react-app

Это создаст новую папку my-react-app с готовым проектом на React.

Шаг 3. Запуск приложения

Перейдите в папку с проектом:

cd my-react-app

И запустите приложение командой:

npm start

После этого ваше приложение должно открыться в браузере по адресу http://localhost:3000/. Вы увидите стартовую страницу с логотипом React. 🎉

Шаг 4. Изменение приложения

Откройте проект в вашем любимом редакторе кода. В файле src/App.js вы найдете основной компонент приложения. Изменим его, чтобы отобразить приветственное сообщение:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Привет, мир! 👋</h1>
      <p>Это мое первое приложение на React.</p>
    </div>
  );
}

export default App;

Сохраните файл и обновите страницу в браузере. Вы увидите измененное приложение с новым текстом.

Шаг 5. Добавление стилей

React позволяет использовать CSS-модули для стилизации компонентов. Создайте файл src/App.module.css и добавьте следующие стили:

.heading {
  color: darkblue;
  text-align: center;
}

.text {
  color: darkred;
  text-align: center;
}

Теперь импортируйте стили в файл src/App.js и примените их к соответствующим элементам:

import React from 'react';
import styles from './App.module.css';

function App() {
  return (
    <div>
      <h1 className={styles.heading}>Привет, мир! 👋</h1>
      <p className={styles.text}>Это мое первое приложение на React.</p>
    </div>
  );
}

export default App;

Сохраните файлы и обновите страницу в браузере. Ваше приложение теперь стилизовано с помощью CSS-модулей. 🎨

Заключение

Теперь вы знаете, как создать простое приложение на React с нуля. Этот набор навыков является основой для дальнейшего изучения и разработки сложных приложений на React. Удачи вам в освоении веб-разработки! 🌟

Не забудьте посетить нашу знакомую школу, которая хорошо учит «Веб-разработка».