Что такое React и как с ним начать?

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

Как работает реакция?

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

Когда вы переходите на веб-сайт с помощью React, веб-сервер отправляет вам две вещи: большой файл JavaScript, обычно называемый bundle.js; и HTML-страница шаблона, которая загружает этот JS-файл с тегом <script> . Это замедляет загрузку первой страницы в приложениях React, но компенсирует это за счет значительного увеличения загрузки последующих страниц.

Файл пакета содержит весь код, который заставляет React работать вместе со всем кодом, который использует само приложение. Любые зависимости от npm также включаются в этот файл.

Приложение React самозагружается и отображает содержимое приложения в пустой тег <div> в шаблоне HTML.

ReactDOM.render(<App />, document.getElementById('root'));

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

React разбивает HTML на компоненты

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

React использует что-то под названием JSX, которое по сути является расширением синтаксиса для JavaScript, поддерживающим HTML. Благодаря этому вы можете динамически генерировать HTML-элементы и даже вставлять JS-выражения в теги:

const element = <h1>Hello, {name}</h1>;

Эта функциональность поддерживает компоненты React. Вы можете создавать очень простые компоненты, просто создав функцию, которая возвращает какой-то JSX:

function App(name) {
  return (
   <h1>Hello, {name}!</h1>
   );
}

Или вы можете использовать функции React, расширив React.Component:

class App extends React.Component {
  render() {
    return (
      <h1>Hello, World!</h1>
    );
  }
}

Это дает вам доступ к методам жизненного цикла, таким как componentDidMount(), которые позволяют запускать код при изменении компонента.

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

this.setState({toggled: True});

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

Как начать?

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

Вам понадобится установленный Node.JS для запуска create-react-app, и вы все равно захотите установить его для разработки. Вы можете запустить скрипт с помощью npx, который устанавливается вместе с npm и используется для установки и запуска скриптов из репозитория npm :

npx create-react-app my-app

Это установит начальный проект в папку my-app . В этом проекте используется пользовательская библиотека под названием react-scripts, которая заботится о скрытых вещах, таких как Webpack и Babel, а также запускает веб-сервер с горячей перезагрузкой для сервера приложения (хотя вы должны использовать настоящий веб-сервер в производстве).

Чтобы запустить приложение, запустите nmp start в каталоге проекта. Это запустит сервер разработки и перенесет вас на localhost:3000 в веб-браузере по умолчанию. Если вы внесете какие-либо изменения в проект, он должен перезагрузиться автоматически.

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

Можете ли вы создавать настольные приложения с помощью React?

Вы можете, на самом деле, именно так создаются такие приложения, как Slack, Discord и Visual Studio Code. Все они используют Electron, который, по сути, запускает дополнительный экземпляр Chrome для отображения веб-страницы в виде настольного приложения без строки URL или других функций браузера.

Он работает достаточно хорошо, чтобы вы могли даже не осознавать, что на самом деле просматриваете веб-страницу, а не используете собственное приложение, потому что весь контент является локальным, и вам не нужно ждать медленной загрузки страницы. Хотя запуск дополнительного экземпляра Chrome означает, что требуется больше оперативной памяти, и приложения Electron, безусловно, работают немного медленнее, чем их родные аналоги.

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