Научитесь реагировать ленивым способом в 2023 году

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

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

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

Введение в реакцию

• Что такое React?

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

• Зачем изучать React в 2023 году?

1. Растущий спрос: спрос на разработчиков React в отрасли продолжает расти. Многие компании и организации используют React для своих проектов, что делает его ценным навыком в вашем арсенале.
2. Популярность и поддержка сообщества: React приобрел огромную популярность благодаря своей производительности, масштабируемости и сильной поддержке сообщества. Изучение React означает подключение к обширной экосистеме ресурсов, руководств и библиотек.
3. Преимущества использования React: React предлагает множество преимуществ, таких как виртуальный рендеринг DOM для оптимальной производительности, богатый набор компонентов пользовательского интерфейса и бесшовная интеграция с другими библиотеками или фреймворками. Эти преимущества делают React убедительным выбором для веб-разработки.

• Преимущества обучения Реагируйте ленивым способом.

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

1. Избегайте чувства перегруженности: React может поначалу пугать, но, постепенно обучаясь, вы сможете понять его концепции, не чувствуя себя перегруженными.
2. Понимание ключевых понятий. Постепенный подход к обучению позволяет сосредоточиться на понимании ключевых понятий, таких как компоненты, свойства, состояние и крючки, прежде чем углубляться в более сложные темы.
3. Практические примеры. Практические примеры и практические упражнения помогают укрепить ваше понимание основных концепций React и позволяют применять их в реальных сценариях.

Настройка среды разработки

• Установка Node.js и npm

Чтобы начать разработку с помощью React, вы должны установить Node.js и npm (диспетчер пакетов Node) на свой компьютер. Следуй этим шагам:

1. Посетите веб-сайт Node.js и загрузите последнюю версию LTS для своей операционной системы.
2. Запустите программу установки и следуйте инструкциям на экране.
3. После установки откройте терминал или командную строку и введите node -v и npm -v, чтобы убедиться, что Node.js и npm установлены правильно.

• Настройка нового проекта React с помощью Create React App

Create React App — это популярный инструмент, который помогает настроить новый проект React с предопределенной структурой папок и конфигурацией среды разработки. Вот как это использовать:

1. Откройте терминал или командную строку и выполните следующую команду: npx create-react-app my-react-app. Замените «my-react-app» на желаемое название вашего проекта.
2. После выполнения команды перейдите в каталог проекта: cd my-react-app.
3. Запустите сервер разработки, выполнив: npm start. Это запустит ваше приложение React в браузере.

• Ознакомление со структурой проекта

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

1. src: этот каталог содержит основные файлы исходного кода вашего приложения React.
2. public: общедоступный каталог содержит файл HTML, который служит точкой входа для вашего приложения.
3. src/index.js: этот файл является точкой входа для вашего приложения React. Он отображает корневой компонент и монтирует его в DOM.
4. src/App.js: этот файл содержит основной компонент вашего приложения. Он служит отправной точкой для создания пользовательского интерфейса.
5. src/components: каталог компонентов — это место, где вы можете хранить повторно используемые компоненты. Это помогает в организации вашего кода и способствует повторному использованию.
6. src/styles: в этом каталоге хранятся файлы CSS или стилей для ваших компонентов.

Компоненты здания

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

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

• Функциональные компоненты: это функции JavaScript, которые получают реквизиты в качестве входных данных и возвращают JSX (расширение синтаксиса для JavaScript, напоминающее HTML), чтобы определить структуру и содержимое компонента.
• Компоненты класса: это классы ES6, которые расширяют класс React.Component. У них больше функций и возможностей, включая управление состоянием и методы жизненного цикла.
• Создание функциональных компонентов

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

import React from 'react';

const MyComponent = (props) => {
  return <div>{props.message}</div>;
};

export default MyComponent;

В этом примере мы определяем функциональный компонент с именем MyComponent, который получает свойство message и отображает его внутри элемента ‹div›.

• Использование компонентов класса

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

import React from 'react';

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

export default MyComponent;

В этом примере мы определяем компонент класса с именем MyComponent с начальным состоянием count и кнопкой, которая увеличивает счетчик при нажатии.

• Изучение хуков React для управления состоянием и жизненным циклом

Хуки React — это функции, представленные в React 16.8, которые позволяют функциональным компонентам использовать методы состояния и жизненного цикла. Они обеспечивают более простой и лаконичный способ управления логикой компонентов. Вот пример использования хуков:

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default MyComponent;

В этом примере мы используем хук useState для объявления переменной состояния count и функцию setCount для ее обновления. Хук useEffect используется для выполнения побочных эффектов, таких как обновление заголовка документа при изменении счетчика.

Управление состоянием в React

• Введение в состояние React

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

• Работа с состоянием в функциональных компонентах

В функциональных компонентах состоянием можно управлять с помощью хука useState. Вот пример:

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default MyComponent;

В этом примере мы объявляем переменную состояния count с помощью хука useState. Функция setCount используется для обновления значения count. При нажатии кнопки вызывается функция increment, которая обновляет состояние, увеличивая значение count.

• Управление состоянием в компонентах класса

В компонентах класса состояние управляется с помощью объекта this.state и метода this.setState(). Вот пример:

import React from 'react';

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

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    );
  }
}

export default MyComponent;

В этом примере мы инициализируем состояние в конструкторе, используя this.state. Метод increment используется для обновления состояния путем вызова this.setState() с новым значением состояния. При нажатии кнопки вызывается метод increment.

• Внедрение методов жизненного цикла для управления состоянием

В компонентах класса методы жизненного цикла могут использоваться для дополнительного контроля над управлением состоянием. Например, метод componentDidMount вызывается при первом подключении компонента к DOM. Вот пример:

import React from 'react';

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

  componentDidMount() {
    console.log('Component is mounted!');
  }

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    );
  }
}

export default MyComponent;

В этом примере метод componentDidMount используется для регистрации сообщения при монтировании компонента. Вы можете использовать другие методы жизненного цикла, такие как componentDidUpdate или componentWillUnmount, для обработки изменений состояния на разных этапах жизненного цикла компонента.

Обработка событий и ввод данных пользователем

• Добавление обработчиков событий в компоненты

Обработчики событий позволяют компонентам реагировать на действия пользователя, такие как клики, нажатия клавиш или отправка форм.

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

import React from 'react';

class MyComponent extends React.Component {
  handleClick() {
    console.log('Button clicked!');
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

export default MyComponent;

В этом примере метод handleClick регистрирует сообщение при нажатии кнопки. Метод передается как ссылка обработчику событий onClick.

Захват и обработка пользовательского ввода могут быть достигнуты за счет использования контролируемых компонентов. Управляемые компоненты позволяют React управлять состоянием элементов формы, позволяя вам эффективно фиксировать и обрабатывать вводимые пользователем данные.

Вот пример создания управляемого элемента ввода с использованием состояния:

import React, { useState } from 'react';

const MyForm = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Handle form submission with inputValue
    console.log('Submitted value:', inputValue);
    setInputValue('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
        placeholder="Enter a value"
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

В этом примере переменная состояния inputValue используется для хранения значения элемента ввода. Функция handleChange срабатывает при изменении входного значения, соответствующим образом обновляя состояние. Обработчик события формы onSubmit вызывается при отправке формы, где вы можете обрабатывать данные формы, сбрасывать входное значение или выполнять другие действия.

• Использование контролируемых компонентов с проверкой формы

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

import React, { useState } from 'react';

const MyForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleNameChange = (event) => {
    setName(event.target.value);
  };

  const handleEmailChange = (event) => {
    setEmail(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    if (!name || !email) {
      setError('Please fill in all fields.');
      return;
    }

    // Handle form submission with name and email
    console.log('Submitted name:', name);
    console.log('Submitted email:', email);

    setName('');
    setEmail('');
    setError('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={handleNameChange}
        placeholder="Enter your name"
      />
      <input
        type="email"
        value={email}
        onChange={handleEmailChange}
        placeholder="Enter your email"
      />
      <button type="submit">Submit</button>
      {error && <p>{error}</p>}
    </form>
  );
};

export default MyForm;

В этом примере форма включает поля ввода имени и адреса электронной почты. Функция handleSubmit проверяет входные данные и отображает сообщение об ошибке, если какое-либо поле пусто. Если форма проходит проверку, она может соответствующим образом обрабатывать отправленные данные.

• Установка расширения инструментов разработчика React

Инструменты разработчика React — это расширение для браузера, предоставляющее полезные инструменты для отладки и проверки компонентов React. Вот как это установить:

1. Откройте веб-браузер и найдите расширение «React Developer Tools».

Выберите подходящее расширение для своего браузера (например, Chrome, Firefox) и нажмите кнопку загрузки/установки.

2. После установки вы можете найти значок инструментов разработчика React на панели инструментов вашего браузера.

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

Работа со списками и условный рендеринг

• Визуализация списков данных в React

При работе с динамическими данными в React важно иметь возможность динамически отображать списки элементов. Это позволяет нам избежать ручного написания разметки для каждого элемента и вместо этого использовать способность React эффективно перебирать массивы и отображать элементы списка.

Чтобы отобразить список в React, мы можем выполнить итерацию по массиву с помощью функции JavaScript map и динамически генерировать соответствующие элементы списка. Такой подход упрощает процесс и обеспечивает более гибкое и масштабируемое решение.

• Использование функции карты для перебора массивов

Функция map в JavaScript позволяет нам преобразовывать каждый элемент массива и возвращать новый массив. В React мы можем использовать функцию map для перебора массивов и создания элементов динамического списка.

Сопоставляя массив данных, мы можем динамически отображать элементы списка, возвращая элементы JSX для каждого элемента. Важно назначить уникальное свойство key каждому отображаемому элементу, чтобы помочь React эффективно обновлять и согласовывать список.

const names = ["Alice", "Bob", "Charlie"];

const NameList = () => {
  return (
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li>
      ))}
    </ul>
  );
};

В приведенном выше примере мы перебираем массив names с помощью функции map и возвращаем элемент ‹li› для каждого имени. Свойству key присваивается параметр index, чтобы обеспечить уникальный идентификатор для каждого элемента списка.

• Условный рендеринг на основе состояния или свойств

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

Мы можем условно визуализировать компоненты, используя логические выражения в JSX. Оценивая условие, мы можем выбрать, какой компонент или контент отображать динамически.

Пример: Условный рендеринг компонента на основе флага

const Greeting = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
};

В приведенном выше примере компонент Greeting получает свойство с именем isLoggedIn. В зависимости от значения isLoggedIn компонент условно отображает либо сообщение «Добро пожаловать!» сообщение или «Пожалуйста, войдите в систему». сообщение.

Стилизация компонентов React

Встроенные стили и объекты стиля

React позволяет применять встроенные стили непосредственно к компонентам с помощью объектов JavaScript. Встроенные стили обеспечивают гибкость и позволяют динамически вычислять стили на основе свойств или состояния компонента.

Встроенные стили указываются как объекты; каждое свойство CSS записывается в формате camelCase. Однако важно отметить плюсы и минусы использования встроенных стилей, прежде чем полностью полагаться на них.

Плюсы встроенных стилей

• Напрямую применяйте стили без внешних файлов CSS
• Включить динамическое вычисление стилей на основе свойств или состояния компонента.

Минусы встроенных стилей

• Повышенная многословность и трудность чтения по сравнению с традиционным CSS
• Отсутствие разделения между стилями и логикой компонентов, что может усложнить обслуживание.
• Модули CSS для стилей компонентов

Модули CSS предоставляют способ написания стилей для конкретных компонентов, не беспокоясь о глобальных коллизиях имен классов CSS.

Мы можем инкапсулировать стили в отдельные компоненты с помощью модулей CSS, что упрощает поддержку и повторное использование стилей в приложении.

Чтобы использовать модули CSS, мы создаем отдельный файл CSS для каждого компонента и импортируем его в соответствующий файл компонента React. Стили, определенные в файле CSS, становятся локальными для компонента, гарантируя, что они не будут мешать другим компонентам.

Пример: использование модулей CSS в компоненте React

import styles from './Button.module.css';

const Button = () => {
  return <button className={styles.button}>Click me!</button>;
};

В приведенном выше примере мы импортируем модуль CSS Button.module.css и назначаем его объекту styles. Затем мы применяем класс button из объекта styles к реквизиту className элемента ‹button. Это гарантирует, что стили, определенные в модуле CSS, применяются именно к компоненту Button.

• Использование фреймворков CSS с React

Фреймворки CSS, такие как Bootstrap и Material-UI, предоставляют предварительно разработанные компоненты и соглашения о стилях, которые могут ускорить разработку.

Интеграция фреймворков CSS с React позволяет нам использовать их богатый набор стилей и компонентов при создании наших приложений.

Чтобы использовать фреймворк CSS с React, мы обычно включаем в наш проект необходимые файлы CSS или JavaScript, предоставляемые фреймворком. Затем мы можем использовать компоненты и стили фреймворка в наших компонентах React.

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

Обзор популярных фреймворков CSS (например, Bootstrap, Tailwind CSS)

Bootstrap — это широко распространенная среда CSS, которая предоставляет полный набор предварительно разработанных стилей и компонентов.

Он предлагает адаптивную сетку, готовые компоненты пользовательского интерфейса и надежную коллекцию классов CSS. Bootstrap известен своей простотой и универсальностью, что делает его подходящим для различных проектов. Он также предоставляет обширную документацию и возможности настройки.

Tailwind CSS — еще одна популярная CSS-инфраструктура, использующая другой подход. Вместо предварительно разработанных компонентов Tailwind CSS предлагает подход, ориентированный на полезность.

Он предоставляет большой набор небольших служебных классов, которые можно комбинировать для создания собственных стилей. Этот подход дает вам больше контроля и гибкости над вашими проектами, позволяя легко настраивать их.

Интеграция фреймворков CSS с проектами React относительно проста. Bootstrap и Tailwind CSS предлагают специальные пакеты, которые можно установить с помощью менеджеров пакетов, таких как npm или yarn.

После того, как вы установили фреймворк, вы можете импортировать необходимые файлы или компоненты CSS в свои компоненты React.

Чтобы применить предварительно определенные стили и компоненты из фреймворков CSS, вы можете начать с изучения документации, предоставляемой фреймворком.

Вот несколько основных примеров, которые помогут вам.

Чтобы начать работу с Bootstrap в вашем проекте React, выполните следующие действия:

Установите пакет Bootstrap

Вы можете установить Bootstrap с помощью менеджера пакетов, такого как npm или yarn. Откройте терминал и выполните следующую команду:

npm install bootstrap

Импорт Bootstrap CSS

В компоненте React импортируйте CSS-файл Bootstrap, чтобы применить предопределенные стили. Вы можете сделать это, добавив следующую строку в начало файла компонента:

import 'bootstrap/dist/css/bootstrap.css';

Используйте компоненты и классы Bootstrap.

После того, как вы импортировали Bootstrap CSS, вы можете начать использовать его компоненты и классы в своем коде JSX. Вот несколько примеров:

Использование кнопки начальной загрузки

import React from 'react';

const MyComponent = () => {
  return (
    <button className="btn btn-primary">Click me</button>
  );
}

export default MyComponent;

Использование загрузочной карты

import React from 'react';

const MyComponent = () => {
  return (
    <div className="card">
      <img src="image.jpg" className="card-img-top" alt="Card Image" />
      <div className="card-body">
        <h5 className="card-title">Card Title</h5>
        <p className="card-text">Some quick example text to build on the card.</p>
        <a href="#" className="btn btn-primary">Read More</a>
      </div>
    </div>
  );
}

export default MyComponent;

Эти примеры демонстрируют использование предопределенных стилей и компонентов Bootstrap в ваших компонентах React.

Обратитесь к Документации по Bootstrap для получения дополнительных примеров и подробностей о доступных компонентах и ​​классах. Bootstrap предлагает множество вариантов кнопок, форм, типографики, макета и т. д.

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

Если вы считаете этот пост захватывающим, найдите другие подобные заметки в Learnhub Blog; мы пишем все технологии от Облачных вычислений до Frontend Dev, Кибербезопасности, ИИ и Блокчейн.