Введение в React: понимание основ и настройка нашего первого проекта

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

Вы готовы?

Давайте начнем!

Введение

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

Что такое Реакт?

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

React также упрощает создание одностраничных приложений (SPA), потому что в создании этих приложений не задействованы какие-либо сложные внутренние серверы!

Почему реагировать?

  • Быстрый
    React работает быстро, потому что использует виртуальную модель DOM для повышения производительности веб-приложений. Это означает, что React нужно только вносить необходимые обновления в DOM, а не перестраивать все дерево DOM, что может значительно повысить производительность приложения.
  • Компоненты многократного использования
    React позволяет создавать компоненты многократного использования, которые можно использовать во всем приложении, что упрощает разработку и поддержку кодовой базы.
  • Однонаправленный поток данных
    React следует однонаправленному потоку данных, что означает, что родительский компонент передает данные своим дочерним элементам через свойства, а не дочерние элементы, манипулирующие данными напрямую. Это может упростить понимание того, как работает ваше приложение, а также выявление и исправление ошибок.
  • За ним стоит большое сообщество
    У React есть большое сообщество, которое помогает вам быстро начать работу и оказывает поддержку. strong>, если вам это нужно, а также множество ресурсов и учебных материалов.
  • Широко используется
    React используется многими популярными веб-сайтами и компаниями, такими как Facebook, Instagram и Airbnb. strong>, что означает, что он был проверен в производственных условиях и имеет успешный послужной список.

Как работает Реакт?

На практике React — это инструмент, помогающий создавать пользовательские интерфейсы для веб-приложений. Он работает, позволяя вам создавать небольшие повторно используемые фрагменты кода, называемые «компонентами», которые представляют части вашего пользовательского интерфейса. Затем вы можете использовать эти компоненты для создания более сложных элементов пользовательского интерфейса и отображать их на экране с помощью API рендеринга React.

Что такое компонент?

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

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

Их можно рассматривать как строительные блоки приложения React.

На изображении ниже показан пример приложения React с различными компонентами.

Как видите, вся наша страница представляет собой комбинацию нескольких компонентов!

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

Этот корневой компонент представляет все приложение и содержит другие дочерние компоненты.

Итак, каждое реагирующее приложение — это дерево компонентов!

возьмем в качестве примера домашнюю страницу Hashnode

Эту страницу можно разделить на такие компоненты, как:

  • Заголовок
  • Боковая навигация
  • Статистика блога
  • Черновики
  • А статьи кормят…

И каждый компонент можно разделить на более мелкие компоненты, мы можем получить дерево компонентов, подобное этому:

Теперь мы знаем, что такое компоненты и каковы преимущества их использования, давайте посмотрим, как мы можем их реализовать!

Существует два типа компонентов:

  • Компоненты на основе классов
    Компоненты классов немного сложнее понять, чем функциональные компоненты. Они определяются с использованием классов ES6 и должны включать оператор extends React.Component для создания наследования React.Component и предоставления вашему компоненту доступа к функциям React.Component.
class MyComponent extends React.Component {
  render() {
    return (
      <div>MyComponent</div>
    )
  }
}
  • Функциональные компоненты
    Функциональные компоненты — это не что иное, как базовые функции JavaScript. Их легче понять, и для их написания требуется меньше кода, чем для компонентов на основе классов.
    Ниже. вы можете увидеть тот же пример, что и выше, но созданный с использованием функционального компонента.
function MyComponent(props) {
    return (
        <div>MyComponent</div>
    );
}

Прежде чем углубиться в реализацию, давайте немного поговорим о JSX!

Что такое JSX?

JSX расшифровывается как JavaScript XML. Это синтаксис, используемый в React для описания того, как должен выглядеть пользовательский интерфейс. он позволяет нам писать HTML-элементы на JavaScript и размещать их в DOM. Он был разработан Facebook как способ упростить создание пользовательских интерфейсов с помощью библиотеки React!

С помощью JSX вы можете написать код, который выглядит так:

const element = <h1>Hello, world!</h1>;

Этот фрагмент кода выглядит странно?

JSX позволяет нам смешивать и сочетать разные фрагменты кода и превращать их во что-то полезное и функциональное. Подобно тому, как блендер может смешивать различные ингредиенты и создавать вкусный коктейль, JSX может смешивать HTML и JavaScript и создавать красивый пользовательский интерфейс.

Вот пример простого компонента JSX, который отображает заголовок и абзац:

function MyComponent() {
  return (
    <div>
      <h1>Hello, Dear coder!</h1>
      <p>This is a JSX component.</p>
    </div>
  );
};

В этом примере MyComponent — это функция, которая возвращает элемент JSX. Элемент JSX выглядит как элемент HTML div, но это объект JavaScript, представляющий виртуальный элемент DOM.

Вы также можете использовать JSX для включения выражений и переменных JavaScript в код, подобный HTML. Например, вы можете использовать фигурные скобки для встраивания выражения JavaScript в ваш JSX:

const name = 'Dear coder';

function MyComponent() {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>This is a JSX component.</p>
    </div>
  );
};

Теперь мы знаем JSX, давайте двигаться вперед!

Как реализовать реагирующий компонент?

В оставшейся части этой статьи мы сосредоточимся на функциональных компонентах!

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

import React from 'react';

function MyComponent(props) {
   return (
    <div>
      <h1>Hello, Dear coders!</h1>
      <p>This is a Functional component!</p>
    </div>
  );
}
export default MyComponent;
  • В приведенном выше примере MyComponent — это функция, которая принимает некоторые реквизиты и возвращает div, содержащий элемент заголовка и абзац.
  • В приложении React вам необходимо импортировать библиотеку React в начало ваших файлов JavaScript, чтобы использовать функции React, такие как JSX, компоненты и API ReactDOM.
  • Инструкция export default используется для экспорта нашего компонента. Это означает, что мы можем использовать его в другой части нашего приложения.
  • Реквизиты позволяют нам передавать значения из родительского компонента в дочерний компонент.

Предположим, у нас есть компонент с именем MyComponent, и мы хотим использовать его в другом компоненте.

Во-первых, нам нужно импортировать его:

import MyComponent from './MyComponent';

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

function AnotherComponent() {
  return (
    //Some code
      <MyComponent />
    //some other code
  );
}

Теперь воспользуемся реквизитом!

давайте немного изменим наш компонент MyComponent, чтобы увидеть, как работает props.

import React from 'react';

function MyComponent(props) {
   return (
    <div>
      <h1>Hello, Dear coders!</h1>
      <p>{props.message}</p>
    </div>
  );
}
export default MyComponent;

Теперь наш компонент примет свойство с именем message и отобразит его внутри нашего элемента абзаца.

Чтобы передать значение реквизиту message, мы можем использовать наш компонент следующим образом:

function AnotherComponent() {
  return (
    //Some code
      <MyComponent message="This is the message you passed from AnotherComponent" />
    //some other code
  );
}

Что такое виртуальный DOM React?

Виртуальный DOM — очень важная концепция в React и мощная функция, помогающая оптимизировать производительность вашего приложения!

Возможно, вы слышали о термине DOM. Виртуальный DOM — это облегченная версия DOM, используемая React для оптимизации обновлений фактической DOM. Это не настоящий элемент DOM, это просто объект javascript, который представляет фактическую DOM в памяти. Вместо прямого обновления DOM React обновляет VDOM, а затем позволяет браузеру обновлять DOM. Это может привести к более быстрому обновлению и повышению производительности, особенно для больших и сложных приложений.

Вот упрощенный пример того, как работает виртуальный DOM:

  1. Когда состояние или свойства компонента реакции изменяются, мы получаем новый элемент реакции.
  2. React сравнивает и вычисляет разницу между текущим VDOM и обновленным VDOM.
  3. React обновляет VDOM с новым состоянием или реквизитами.
  4. Затем React обновите часть фактического DOM на основе обновленного VDOM.

Этот процесс позволяет React эффективно обновлять DOM без необходимости прямого манипулирования DOM.

Настройка нашего первого реактивного проекта

Чтобы настроить наш первый проект React, нам потребуется установить некоторые инструменты.

Вот пошаговое руководство по началу работы:

  1. Установите Node.js: React построен с использованием JavaScript, и вам потребуется установить Node.js на вашем компьютере для запуска React.
    мы можем загрузить и установить Node.js с официальный сайт здесь.
  2. Установите инструменты разработчика React. Инструменты разработчика React — это расширение браузера, которое помогает отлаживать и проверять компоненты React.
    мы можем установить инструменты разработчика React для Chrome или Firefox из официальный сайт здесь.
  3. Установите инструмент «Создать приложение React». Инструмент «Создать приложение React» — это утилита командной строки, которая помогает нам быстро и легко настроить новый проект React.
    Чтобы установить инструмент Create React App, откройте терминал и выполните следующую команду:
    npm install -g create-react-app
  4. Создайте новый проект React. Чтобы создать новый проект React, перейдите в каталог, в котором вы хотите создать проект, и выполните следующую команду:
    create-react-app my-project-name
  5. Перейдите в каталог проекта и запустите сервер разработки!
    cd my-project-name
    npm start

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

Заключение

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

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

Удачного кодирования! ♥