Начало работы с React

Этой статьёй мы открываем цикл о разработке на JavaScript фреймворке React. Для его изучения вам необходимы знания JavaScript и представление об NodeJS (и его менеджере пакетов "npm" и "npx"). Так же не лишним будут знания об ECMAScript.

Для старта работ понадобится установить NodeJS и npm. А затем для создания проекта нужно выполнить

npx create-react-app my-app

После чего перейдите в директорию "my-app" и запустите проект, поставив его в автузагрузку (чтобы он запускался даже после того, как компьютер будет перезагружен):

cd my-app
npm start

Теперь можно посмотреть содержимое папки "my-app". Там будет подпапка "src" с файлом "App.js". В будущих статьях все эксперименты будут ставиться именно на этом файле. Поэтому откройте этот файл и приведите к простейшему виду:

import React from 'react';

function App() {
   return <div>
      Тише, мыши, кот на крыше!
   </div>;
}

export default App;

Код в этом файле будет являться нашим основным компонентом в будущем (подробнее о "компонентах" читайте далее в статье).

Если вы программировали на JavaScript ранее, то наверняка заметите ошибку в том, что возвращаемое значение со всеми контейнерами <div> не заключено в кавычки. Но это не ошибка. Этот синтаксис записи называется JSX. React понимает его, но не требует использовать. Но так сложилось, что в разработках на React он активно используется. В добавок React самостоятельно экранирует все значения переменных, встраиваемых в JSX, что предотвращает атаки через инъекции и XSS атаки.

Рекомендуем установить плагин для разработке на React: react-devtools. С его помощью проще вести отладку приложения и находить ошибки.

Компоненты в React

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

Каждому компоненту соответствует ES модуль, который находится в папке "src". Название файла модуля обычно пишется с заглавной буквы (как "App.js") и содержит внутри себя одноимённую функцию. Поэтому в файле "App.js" будет определение функции "App" (пример содержания файла написан выше).

Макеты страниц

В папке "my-app/public" можно найти файл "index.html", который является макетом сайта. в нём можно писать любой HTML код. При этом в макете есть специальный контейнер с id равным root: <div id="root">. В этот контейнер будет выводиться результат работы основного компонента (то есть что будет возвращено через "return").

Процесс преобразования JSX в HTML код называется рендерингом.