React.js, разработанный и поддерживаемый Facebook, стал одной из самых популярных библиотек JavaScript для создания пользовательских интерфейсов, особенно одностраничных приложений (SPA). React, известный своей гибкостью, эффективностью и простотой использования, имеет большое сообщество и множество ресурсов для разработчиков всех уровней. Независимо от того, являетесь ли вы новичком или опытным разработчиком, желающим добавить React в свой набор навыков, это руководство проведет вас через основы React.js.

1. Что такое React.js?

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

2. Настройка среды React

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

Шаг 1. Установите Node.js и npm

• Node.js: React требует Node.js для своих инструментов сборки.
• npm: диспетчер пакетов узлов (npm) используется для установки библиотек и пакетов.

Вы можете скачать и установить Node.js с официального сайта. npm поставляется в комплекте с Node.js.

Шаг 2. Установите приложение Create React

Facebook создал инструмент Create React App, который поможет вам быстро и эффективно настроить новый проект React. Запустите следующую команду в своем терминале:

npx create-react-app my-app

Эта команда создает новый каталог с именем my-app со всеми необходимыми файлами и зависимостями для запуска проекта React.

Шаг 3. Запустите сервер разработки

Перейдите в каталог вашего проекта и запустите сервер разработки:

cd my-app
npm start

Теперь ваше новое приложение React должно работать на http://localhost:3000.

3. Понимание компонентов React

React — это все о компонентах. Компонент в React — это автономный модуль, который отображает некоторый вывод, обычно HTML. Компоненты могут быть определены как функциональные компоненты или компоненты класса.

Функциональные компоненты

Функциональный компонент — это простая функция JavaScript, которая возвращает HTML (с использованием JSX).

Пример:

function Welcome(props) {
  return 
Hello, {props.name}
;
}

Компоненты класса

Компонент класса — это более мощный способ определения компонентов и позволяет управлять локальным состоянием и методами жизненного цикла.

Пример:

class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

4. JSX – JavaScript XML

JSX — это расширение синтаксиса JavaScript, похожее на HTML. Он позволяет вам писать HTML непосредственно в JavaScript, который React затем преобразует в настоящие элементы DOM.

Пример:

const element = 
Hello, world!
;

JSX упрощает написание и визуализацию структуры вашего пользовательского интерфейса. Однако на самом деле JSX преобразуется в вызовы React.createElement().

5. Состояние и реквизит

Реквизит

Props (сокращение от «свойства») используются для передачи данных от одного компонента к другому. Они неизменяемы, то есть не могут быть изменены принимающим компонентом.

Пример:

function Greeting(props) {
  return 
Hello, {props.name}!
;
}

Состояние

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

Пример:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count   1 });
  }

  render() {
    return (
      

        
Count: {this.state.count}
        Increment
      
    );
  }
}

6. Обработка событий

Обработка событий в React аналогична обработке событий в элементах DOM. Однако есть некоторые синтаксические различия:

• События React называются в верблюжьем регистре, а не в нижнем регистре.
• При использовании JSX в качестве обработчика событий вы передаете функцию, а не строку.

Пример:

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return (
    
      Click me
    
  );
}

7. Методы жизненного цикла

Компоненты классов в React имеют специальные методы жизненного цикла, которые позволяют запускать код в определенные моменты жизни компонента. К ним относятся:

• comComponentDidMount: вызывается после монтирования компонента.
• comComponentDidUpdate: вызывается после обновления компонента.
• comComponentWillUnmount: вызывается перед размонтированием компонента.

Пример:

class Timer extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  render() {
    return (
      

        
{this.state.date.toLocaleTimeString()}
      
    );
  }
}

8. Условный рендеринг

В React вы можете создавать разные представления в зависимости от состояния вашего компонента.

Пример:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return 
Welcome back!
;
  }
  return 
Please sign up.
;
}

9. Списки и ключи

Когда вам нужно отобразить список данных, React может визуализировать каждый элемент как компонент. Важно дать каждому элементу уникальный «ключ», чтобы React мог определить, какие элементы были изменены.

Пример:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    

{listItems}

10. Реагирующие хуки

React Hooks позволяют использовать состояние и другие функции React в функциональных компонентах. Некоторые из наиболее часто используемых хуков включают в себя:

• useState: позволяет добавлять состояние к функциональному компоненту.
• useEffect: позволяет выполнять побочные эффекты в функциональных компонентах.
• useContext: обеспечивает способ передачи данных через дерево компонентов без необходимости передавать реквизиты вручную на каждом уровне.

Пример состояния использования:

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>
        Click me
      
    
  );
}

11. Создание и развертывание приложений React

Как только ваше приложение будет готово, вы сможете запустить его в производство. Используйте следующую команду:

npm run build

Это создаст оптимизированную производственную сборку вашего приложения React в папке сборки. Затем вы можете развернуть его на любом веб-сервере.

Заключение

React.js — мощный инструмент для создания современных веб-приложений. Понимая компоненты, управление состоянием, обработку событий и перехватчики, вы можете создавать динамические и интерактивные пользовательские интерфейсы. В этом руководстве рассматриваются основы, но экосистема React предлагает гораздо больше, включая расширенное управление состоянием с помощью Redux, маршрутизацию с помощью React Router и рендеринг на стороне сервера с помощью Next.js.

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