React JS — пишем первое приложение

React JS является одним из наиболее популярных фреймворков для создания веб-приложений. Если вы новичок в React, то создание простой страницы может быть отличным способом начать изучение этого фреймворка. В этой статье я покажу вам, как последовательно создать простую страницу на React, которая будет содержать надпись «Приложение на React JS» и кнопку «Привет JavaScript.study!», при нажатии на которую надпись на кнопке будет изменена на «Hello World!».

Шаг 1: Настройка проекта

Первым шагом является установка и настройка окружения для разработки React-приложений. Если вы еще не установили Node.js и npm, сделайте это. Затем откройте терминал и выполните следующую команду:

npx create-react-app my-app

Эта команда создаст новое приложение React с названием «my-app». После того, как процесс завершится, перейдите в созданную директорию приложения:

cd my-app

Шаг 2: Создание компонентов

Компоненты являются основными блоками для создания веб-приложений на React. В этом шаге мы создадим два компонента: App и Button.

App.js:

import React, { useState } from 'react';
import Button from './Button';

function App() {
  const [buttonText, setButtonText] = useState('Привет JavaScript.study!');

  function handleClick() {
    setButtonText('Hello World!');
  }

  return (
    <div className="App">
      <h1>Приложение на React JS</h1>
      <Button handleClick={handleClick} buttonText={buttonText} />
    </div>
  );
}

export default App;

Button.js:

import React from 'react';

function Button(props) {
  return (
    <button onClick={props.handleClick}>
      {props.buttonText}
    </button>
  );
}

export default Button;

Шаг 3: Рендеринг компонентов

Теперь мы можем отобразить наши компоненты на странице. Откройте файл index.js и замените его содержимое на следующий код:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

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

Приложение готово к запуску. Откройте терминал и выполните команду:

npm start

После того, как приложение запустится, откройте браузер и перейдите по адресу http://localhost:3000/. Вы увидите простую страницу с надписью «Приложение на React JS» и кнопку «Привет JavaScript.study!», при нажатии на которую надпись на кнопке будет изменена на «Hello World!».

Шаг 5: Стилизация страницы

Чтобы придать нашей странице более привлекательный вид, мы можем добавить немного стилей. Для этого создадим файл index.css и добавим следующий код:

.App {
  text-align: center;
  margin-top: 100px;
}

button {
  background-color: #61dafb;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  background-color: #28a9e5;
}

Шаг 6: Завершение

Поздравляем! Вы успешно создали свою первую страницу на React. Теперь вы можете продолжить изучение React и создавать более сложные веб-приложения.

Заключение

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