img
img
20 июля 2022
20 июля 2022
10 мин
237

React.js: что это, для чего нужен и как освоить начинающим

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

img

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

Для чего нужен React.js

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

Пример применения React в HTML c JSX и JavaScript:

 import React from "react"; const Greeting = () => {

  return (

    <div className="hello_world">

      <h1> Hello, world! </h1>

    </div>

  );

};

export default Greeting;

Функция Greeting — это компонент React, который отображает фразу «Привет, мир».

Результат отображения в веб-браузере — рендеринг следующего HTML: 

 <div class="hello_world">

<h1>Привет, мир!</h1> </div>

Особенности React

React придерживается парадигмы декларативного программирования. Разработчики создают описание вида (набора DOM-элементов) для каждого состояния приложения. А React обновляет и отображает компоненты, когда меняют данные. Этим отличается от императивного программирования: там разработчики описывают конкретные шаги для перевода приложения в определенное состояние.

То есть при декларативном программировании (и React) описывают, что хотят получить. А при императивном подходе — как хотят что-то получить. Для создания пользовательских интерфейсов декларативный метод программирования подходит гораздо лучше. Поэтому он прижился в сообществе frontend-разработчиков. Сейчас его применяют практически во всех библиотеках и фреймворках. Например, Vue.js, Svelte, SwiftUI, Flutter.

Основные аспекты при создании приложения с помощью библиотеки React — это состояния и компоненты.

✔️ Состояния

В школе нас учили, что различные объекты могут находиться в разных состояниях. Например, физические вещества — в четырех: твердом, жидком, газообразном и в плазме. В зависимости от состояния одно и то же вещество выглядит и ведет себя по-разному. При внешнем воздействии вещество переходит из одного состояния в другое: например, лед (твердый) становится водой (жидким), когда температура выше 0 °C.

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

✔️ Компоненты

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

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

Изначально компоненты в React описывали только с помощью JavaScript-функций:

 function Welcome(props) {

  return <h1>Hello, {props.name}</h1>;

}

Но когда появилась шестая версия спецификации ECMAScript-классов, React-компоненты стали описывать и с их помощью:

 class Welcome extends React.Component {

  render() {

    return <h1>Hello, {this.props.name}</h1>;

  }

}

Такой подход ближе разработчикам, которые знакомы с объектно-ориентированным программированием.

Простейшие компоненты генерируют отображение только на основании переданных им параметров (this.props). Это так называемые компоненты без состояния (stateless components):

 class HelloMessage extends React.Component {

  render() {

    return <div>Hello {this.props.name}</div>;

  }

}

root.render(<HelloMessage name="Taylor" />);

Более сложные — компоненты с состоянием (stateful components) — генерируют каждое отображение на основе не только параметров, но и текущего состояния (this.state):

 class Timer extends React.Component {

  constructor(props) {

    super(props);

    this.state = { seconds: 0 };

  }

  tick() {

    this.setState(state => ({

      seconds: state.seconds + 1

    }));

  }

  componentDidMount() {

    this.interval = setInterval(() => this.tick(), 1000);

  }

  componentWillUnmount() {

    clearInterval(this.interval);

  }

  render() {

    return (

      <div>

        Seconds: {this.state.seconds}

      </div>

    );

  }

}

root.render(<Timer />);

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

 function Welcome(props) {

  return <h1>Hello, {props.name}</h1>;

}

function App() {

  return (

    <div>

     <Welcome name="Sara" />      

<Welcome name="Cahal" />      

<Welcome name="Edite" />

    </div>

  );

}

Чем отличается приложение на чистом HTML и JavaScript от React

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

Рассмотрим примеры реализации простейшего приложения «Счетчик», чтобы показать основные различия.

💡 Пример на чистом HTML и JavaScript

 <!DOCTYPE html>

<html>

 <head>

   <title>Counter App</title>

   <meta charset="UTF-8" />

 </head>

 <body>

   <div>

     <h1 id="counter"></h1>

     <button id="inc-btn">+1</button>

     <button id="dec-btn">-1</button>

   </div>

   <script>

     const counterElement = document.getElementById("counter");

     const incBtn = document.getElementById("inc-btn");

     const decBtn = document.getElementById("dec-btn");

     let counterValue = 0;

     function inc() {

       counterValue += 1;

       counterElement.innerText = counterValue;

     }

function dec() {

       counterValue -= 1;

       counterElement.innerText = counterValue;

     }

     counterValueElement.innerText = counterValue;

     incBtn.addEventListener("click", inc);

     decBtn.addEventListener("click", dec);

   </script>

 </body>

</html>

💡 Пример на React

<!DOCTYPE html>

<html>

 <head>

   <title>Counter App</title>

   <meta charset="UTF-8" />

 </head>

 <body>

   <div id="root"></div>

   <script><!--React and Babel libraries links--></script>

   <script type="text/babel">

     function App() {

       const [value, setValue] = React.useState(0);

       function inc() {

         setValue(value + 1);

       }

  function dec() {

         setValue(value - 1);

       }

       return (

         <div>

           <h1>{value}</h1>

           <button onClick={inc}>+1</button>

<button onClick={dec}>-1</button>

         </div>

       );

     }

     ReactDOM.render(

       <div>

         <App />

       </div>,

       document.getElementById("root")

     );

   </script>

 </body>

</html>

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

❗ При использовании компонентов React достаточно добавить на страницу еще один тег App, чтобы получить два независимых счетчика. Это делает приложение легко расширяемым.

❗ Логика компонента React изолирована. Поэтому поток данных в приложении — более предсказуемый, что упрощает разработку и отладку.

Плюсы и минусы React

Плюсы

Минусы

  • Приложение создают на основе компонентов, поэтому его легко масштабировать и поддерживать.
  • Декларативный подход позволяет избежать большого количества служебного кода — по сравнению с чистым HTML и JavaScript — и сосредоточиться на логике самого приложения.
  • React — это уже не новая библиотека, за ней стоит крупная компания и большое сообщество разработчиков. То есть ее много раз тестировали, регулярно обновляют. А переход к новым версиям — максимально гладкий.
  • Большая библиотека готовых React-компонентов ускорит создание конечного приложения.
  • React увеличивает размер приложения, которое загружает пользователь (~40 Кб для пакетов React и React-dom).
  • Возникнут дополнительные расходы вычислительных мощностей и памяти устройства.
  • Чтобы начать разрабатывать на React, программист должен не только изучить библиотеку, но и привыкнуть к парадигме.

Для каких приложений подойдет React

1️⃣ Большой или средней сложности — несколько экранов, различные формы, много нестандартных элементов управления.

2️⃣ Над которым работает команда программистов — технология поможет быстрее договариваться и лучше поддерживать код.

3️⃣ Которые планируют расширять — изолированные компоненты позволяют легко масштабировать логику, использовать уже созданные решения.

4️⃣ Которые решили обновить — React можно добавлять в уже существующий проект, обновлять кодовую базу постепенно и точечно.

Почему сейчас стоит изучать React

✅ React — это востребованная технология: на React.js написаны яндекс, нетфликс и другие известные сервисы.

✅ Подходы React распространены во frontend-разработке — если изучить React, можно легко менять стек и осваивать новые технологии.

✅ Разработка пользовательских интерфейсов — развивающаяся отрасль: с помощью расширений React сможете создавать интерфейсы не только для веб-приложений, но и для мобильных платформ.

Как изучить React

🎓 Официальный сайт библиотеки на русском языке с актуальной информацией. Если знаете английский, то смотрите англоязычную версию. 

🎓 Вводный тур по React. Проведет через основные этапы инициализации и начала работы над приложением. Познакомит с основными концептами React. Подскажет ссылки на ресурсы с ответами.

🎓 Документация. Подходит для более детального изучения библиотеки.

🎓 Блог. Подпишитесь, чтобы следить за последними обновлениями React.

🎓 Сообщество. В нём помогут с вопросами, на которых нет ответа в документации.

🎓 Гитхаб. Для тех, кто решил углубиться в React по полной.

🎓 Курс «Веб-разработчик» в Skypro. Изучите не только React, а еще и HTML и CSS, базовый синтаксис языка JavaScript, инструменты разработки. Сделаете проекты для портфолио: портал с продажей билетов и интерфейсом билетного контролера по QR, виджет погоды, игру, интернет-магазин и лендинг. Все домашки проверяют только практикующие веб-разработчики.

Главное о React.js для начинающих

  • React — это библиотека с открытым исходным кодом. В основе — декларативный подход.
  • Строительный элемент приложения на React — компонент. 
  • React популярен во frontend-разработке, большинство крупных компаний используют именно его. Подходит для сложных приложений, над которыми работает большая команда.
  • Плюсы: приложение легко масштабировать, есть большая библиотека готовых компонентов. Минусы: увеличенный размер, дополнительные расходы мощностей и памяти устройства.

*Площадки Meta признаны экстремистскими и запрещены в РФ.

img
Подпишитесь на рассылку, чтобы Не упустить что-нибудь новое
Просто и понятно о том, как получить новую профессию


    Дадим нужные знания и поможем получить работу!
    Регистрируйтесь на курс и учитесь у экспертов-практиков.
    Профессия
    за 11 месяцев
    Java-разработчик
    • Даем знания и навыки, которые помогут найти высокооплачиваемую работу
    • Прикрепляем наставника: он ответит на любые вопросы
    • Много практики в среде коммерческой разработки
    • Всего 10 часов в неделю
    3 489 ₽/мес.
    Ещё по теме
    Сколько зарабатывают в IT-сфере

    На доход влияют опыт, город и направление.

    10 августа 2022
    6 мин
    Насколько программисту необходима математика для успешной работы

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

    09 августа 2022
    7 мин
    Плюсы и минусы IT-профессий

    Разбираем преимущества и недостатки профессий веб-дизайнера, тестировщика и других.

    07 августа 2022
    7 мин
    Как стать тестировщиком

    Оптимальный вариант — выучиться онлайн: пройти курс с теорией и практикой.

    Обзор лучших эмуляторов Android для Windows

    BlueStacks, NoxPlayer, Andy, MEmu Play, Genymotion, GameLoop.

    20 июля 2022
    6 мин
    Тест: как выбрать профессию в IT-сфере

    Определяем, кто вы: веб-дизайнер, тестировщик, аналитик или разработчик.

    18 июля 2022
    6 мин
    Тенденции развития IT-сферы в России в 2022 году

    Главные тренды — импортозамещение и облачные технологии.

    17 июля 2022
    5 мин
    Лучшие книги про Python

    «Начинаем программировать на Python», «Python. К вершинам мастерства» и другие.

    11 июля 2022
    7 мин
    5 признаков того, что вам подойдет профессия веб-разработчика

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

    11 июля 2022
    3 мин
    Карта по вселенной разработчиков

    Чем занимаются backend-, frontend- и fullstack-разработчики.

    11 июля 2022
    2 мин
    Словарь тестировщика

    Разбираем, что такое баг, дебаг, валидация и другие термины.

    11 июля 2022
    2 мин
    Какие бывают виды тестирования

    Классификации: по запуску кода на исполнение, по доступу к коду и архитектуре и другие.

    08 июля 2022
    6 мин
    Как использовать функции в Python

    Любая функция начинается с инструкции def, названия и набора аргументов в скобках.

    07 июля 2022
    9 мин
    Что такое Agile

    Agile — это группа гибких методов, чтобы улучшать продукт.

    20 июня 2022
    4 мин
    5 причин освоить Python

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

    Как отбирают кандидатов в IT-компаниях

    IT-рекрутер обращает внимание на то, как вы мыслите и рассуждаете.

    5 причин научиться программировать на Java

    Этот язык постоянно развивается, но остается стабильным, на нём кодят уже 27 лет.

    Как работать со словарями в Python

    Словарь создают с помощью ключевого слова dict, синтаксиса языка.

    Каково быть тестировщиком: 4 истории о боли и радости

    Рассказы тестировщиков: какие ошибки они замечают в обычной жизни.

    Что такое Node.js и зачем ее изучать

    Node.js — платформа с открытым исходным кодом для работы с JavaScript.

    09 июня 2022
    5 мин
    Что такое массивы в Java и как с ними работать

    Массив — это набор однотипных элементов, упорядоченных по номерам.

    Как написать тест-кейс

    Создавайте простые тест-кейсы и учитывайте интересы пользователя.

    06 июня 2022
    6 мин
    Мифы о программистах

    Есть стереотипы, что программисты — это мужчины, всемогущие хакеры и интроверты.

    17 мая 2022
    2 мин
    Код: что ты такое

    Код определяет внешний вид и внутреннюю логику программ, сайтов.

    17 мая 2022
    2 мин
    7 англоязычных подкастов для тех, кто хочет прокачаться в IT

    Про Python, frontend-разработку, мягкие навыки, работу над проектами.

    17 мая 2022
    3 мин
    6 ютуб-каналов для разработчиков

    Ответы на вопросы новичков, интервью успешных спецов, полезные советы.

    17 мая 2022
    2 мин
    Женщины в IT

    Достижения и цитаты шести героинь, которые не побоялись попробовать себя в IT.

    17 мая 2022
    2 мин
    Почему IT — сфера будущего

    Информационные технологии помогают бизнесу зарабатывать и упрощают жизнь.

    IT-компания — это не только Google

    Рассказываем про «Тинькофф», «Билайн» и другие компании.

    16 мая 2022
    2 мин
    Как составить и оформить баг-репорт

    Указывайте в отчете только одну ошибку, прикладывайте скрины, сообщения и коды.

    04 мая 2022
    6 мин
    Как работать со списками в Python

    Учимся добавлять и изменять элементы, объединять и копировать списки.

    02 мая 2022
    5 мин
    Цикл for в Java: что это, как с ним работать

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

    Как работать с модулем JSON в Python

    JSON часто применяют, когда разрабатывают API и веб-приложения.

    25 апреля 2022
    9 мин
    Как IT-специалисту из России найти работу за рубежом в 2022 году

    Есть сервисы, платформы и телеграм-каналы с вакансиями по всему миру.

    21 апреля 2022
    6 мин
    Что такое HTML: основные теги

    С помощью HTML структурируют страницу на сайте, добавляют картинки, таблицы, списки.

    Как работает цикл for в Python

    Цикл for используют, когда количество повторов известно заранее.

    Комьюнити для разработчика

    Есть комьюнити на платформах, под эгидой компаний или самоорганизующиеся.

    07 апреля 2022
    6 мин
    Гайд: как определить, какое направление в IT тебе подходит

    Обязанности и зарплата аналитика, Python- и Java-разработчиков и не только.

    Правильное питание на удаленке. Почему это важно?

    Правильное питание — это не о жестких диетах и полном отказе от любимых продуктов.

    01 апреля 2022
    7 мин
    Как я нашла время на учебу, когда времени не было совсем

    Благодаря методу «круга-пирога» увидите свое время и возьмете его под контроль.

    9 причин, почему не получается внедрять полезные привычки

    Ищите мотивацию, хвалите себя, визуализируйте план и результат.

    Как больше успевать: зачем есть по одной лягушке в день и как справиться со слоном

    Лягушки — небольшие, но неприятные дела, слоны — долговременные задачи.

    Как поставить цель и не бросить на полпути

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

    Кто такой менеджер проектов, чем занимается и как им стать

    Этот специалист контролирует все этапы проекта и приводит его к успеху.

    30 марта 2022
    8 мин
    Как не угробить здоровье на удаленке

    Советы всем удаленщикам — больше двигаться, делать зарядку, разминку для глаз.

    30 марта 2022
    9 мин
    Junior, Middle, Senior в разработке — кто есть кто и как перейти на уровень выше

    Junior зарабатывает от 40 000 ₽, Middle от 100 000 ₽, а Senior от 250 000 ₽ и выше.

    29 марта 2022
    12 мин
    Как банковская служащая в 32 года с нуля перешла в IT и в 40 открыла свою компанию по разработке онлайн-игр

    Совет от героини: сделайте первый шаг, дальше будет проще; учитесь и идите вперед.

    Пять приложений, чтобы не отвлекаться от учебы и работы

    Фишки и стоимость Forest, WaterDo, SleepTown, Alarmy, Pomodoro Timer Lite.

    29 марта 2022
    5 мин
    Язык SQL: что это такое и зачем он нужен

    SQL используют в банках, торговле, перевозках: везде, где много информации.

    29 марта 2022
    7 мин
    Как освоить c нуля IT-профессию и перейти на новую работу без опыта

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

    Словарь IT-сленга

    Термины разработки, Scrum, неформального общения, организационных процессов.

    29 марта 2022
    13 мин
    Подборка: 33 книги и подкаста для начинающих программистов

    Узнаете о работе программиста и поймете, как писать хороший код.

    28 марта 2022
    10 мин
    Хакнуть мозг: как современные знания помогают мозгу развиваться и учиться

    Мозг меняется всю жизнь. Мы можем на него влиять: изучать новое, развивать навыки.

    28 марта 2022
    8 мин
    Что такое CSS и как с ним работать

    С помощью CSS задают цвет, размеры, анимацию, адаптируют сайт под устройства.

    16 марта 2022
    9 мин
    css
    Как создать телеграм-бота на Python

    Python — самый популярный язык программирования в феврале 2022 года.

    16 марта 2022
    9 мин
    Какие профессии в IT подойдут гуманитарию

    Гуманитарию подойдут профессии тестировщика, веб-дизайнера и не только.

    15 марта 2022
    9 мин
    Frontend или backend: чем отличаются и какой вид разработки выбрать

    Фронтендер создает интерфейс продукта, бэкендер работает с серверной частью.

    15 марта 2022
    7 мин
    Кто такой Java-разработчик, чем занимается и как им стать

    Обязанности Java-разработчика — писать код, тестировать и улучшать его.

    15 марта 2022
    7 мин
    Что такое IT-сфера и почему она сейчас так популярна

    IT-отрасль привлекает удаленкой, карьерным ростом, высоким доходом.

    04 марта 2022
    7 мин
    it
    Как установить Python на компьютер и начать на нём писать

    Воспользуйтесь Google Colab, онлайн-интерпретаторами или скачайте Python.

    Postman: как пользоваться программой для тестирования API

    Бесплатный сервис позволяет писать тесты, поддерживает разные типы API.

    04 марта 2022
    6 мин
    api
    Google Colab: что это такое и как с ним работать

    Colab используют, чтобы создавать код на Python прямо в браузере.

    04 марта 2022
    4 мин
    Как перейти в разработчики из другой профессии

    Освоить новую профессию реально с нуля в любом возрасте, главное — мотивация.

    03 марта 2022
    8 мин
    Как помочь ребенку выбрать профессию

    Не выбирайте по принципу «чем проще, тем лучше» и уважайте желания ребенка.

    03 марта 2022
    7 мин
    Нужно ли высшее образование программисту: сравниваем все «за и «против»

    Важнее опыт и проекты в портфолио, но иногда высшее образование все-таки нужно.

    02 марта 2022
    5 мин
    Стоит ли переходить на удаленку: плюсы и минусы

    Сегодня удаленка доступна для разных сфер: ИТ, маркетинг, сервис, продажи.

    02 марта 2022
    6 мин
    Какой язык программирования выбрать новичку

    Выбирайте по уровню спроса у работодателей и направлению в программировании.

    24 февраля 2022
    7 мин
    Фильмы про программистов: лучшие фильмы и сериалы про компьютерных гениев

    20 фильмов и сериалов для тех, кому интересен мир информационных технологий.

    24 февраля 2022
    7 мин
    Фронтенд-разработчик: кто это такой и как им стать с нуля

    Frontend-разработчик создает внешнюю — пользовательскую часть веб-ресурса.

    24 февраля 2022
    8 мин
    Backend-разработчик: кто это такой и чем он занимается

    Backend-разработчик отвечает за внутреннюю — серверную сторону веб-ресурса.

    24 февраля 2022
    9 мин
    Что такое спринты в программировании и как их выполнять

    Спринты используют в долгих проектах и сложных продуктах.

    Как начать изучать Python

    Преимущества Python — понятный синтаксис и читаемость, готовые библиотеки.

    24 февраля 2022
    9 мин
    Jupyter Notebook: что это такое и как им пользоваться

    Jupyter-ноутбуки применяют для визуализации данных в big data и data science.

    24 февраля 2022
    7 мин
    Как развить soft skills

    Soft skills помогают развивать компетенции, осваивать новые тенденции в работе.

    24 февраля 2022
    11 мин
    Как начать изучать Java

    На Java разрабатывают всё: от приложений и ПО до технологий Big Data.

    Вставить формулу как
    Блок
    Строка
    Дополнительные настройки
    Цвет формулы
    Цвет текста
    #333333
    Используйте LaTeX для набора формулы
    Предпросмотр
    \({}\)
    Формула не набрана
    Вставить