Начните изучать React JS: Создайте свое первое приложение

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

В этом руководстве я покажу вам, как создать свое первое веб-приложение с использованием React JS. Мы будем создавать простое приложение для отображения списка задач, добавления новых задач и отметки задач как выполненные.

Шаг 1: Установка Node.js и создание нового проекта React

Прежде чем начать работу с React JS, убедитесь, что у вас установлен Node.js на вашем компьютере. Затем откройте терминал и выполните следующие команды:

1. Установите Create React App CLI (инструмент для быстрого создания проектов React):

   npm install -g create-react-app

2. Создайте новый проект React с именем "todo-list":

   create-react-app todo-list

3. Перейдите в директорию вашего нового проекта:

   cd todo-list

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

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

1. TaskList.js – компонент для отображения списка задач
2. TaskForm.js – компонент для добавления новых задач
3. TaskItem.js – компонент для отображения отдельной задачи

Создайте эти компоненты в директории "src/components" вашего проекта. Напишем простой код для каждого компонента, чтобы позже подключить их к основному приложению.

Шаг 3: Отображение компонентов в приложении

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

import React from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';

function App() {
  return (
    <div>
      <h1>Todo List</h1>
      <TaskList />
      <TaskForm />
    </div>
  );
}

export default App;

Теперь приложение будет отображать заголовок "Todo List", компонент TaskList для отображения списка задач и компонент TaskForm для добавления новых задач.

Шаг 4: Работа с состоянием и событиями

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

1. В компоненте TaskForm.js добавьте следующий код для обработки ввода новой задачи и отправки формы:

import React, { useState } from 'react';

function TaskForm() {
  const [task, setTask] = useState('');

  const handleInputChange = (e) => {
    setTask(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Добавление новой задачи
    setTask('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={task}
        onChange={handleInputChange}
        placeholder="Add a new task"
      />
      <button type="submit">Add Task</button>
    </form>
  );
}

export default TaskForm;

1. В компоненте TaskList.js добавьте следующий код для отображения списка задач и возможности удаления задачи:

import React, { useState } from 'react';

const tasks = [
  { id: 1, text: 'Task 1', isComplete: false },
  { id: 2, text: 'Task 2', isComplete: true },
];

function TaskList() {
  const [taskList, setTaskList] = useState(tasks);

  const handleDeleteTask = (taskId) => {
    // Удаление задачи по идентификатору
  };

  return (
    <ul>
      {taskList.map((task) => (
        <li key={task.id}>
          <span>{task.text}</span>
          <button onClick={() => handleDeleteTask(task.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

export default TaskList;

Шаг 5: Завершение и запуск приложения

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

npm start

После запуска команды, ваше React приложение будет запущено и откроется в браузере. Вы увидите заголовок "Todo List", список задач и форму для добавления новых задач. Попробуйте добавить новую задачу, отметить задачу как выполненную и удалить задачу.

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