1 added
1 removed
Original
2026-01-01
Modified
2026-02-26
1
<blockquote><p>React - A JavaScript library for building user interfaces</p>
1
<blockquote><p>React - A JavaScript library for building user interfaces</p>
2
</blockquote><p>Так характеризуют React его создатели, разработчики компании Facebook. Появившись в 2013 году, React быстро стал набирать обороты и получил широчайшее распространение. На момент создания курса на<a>GitHub</a>у проекта более 200 тысяч звёзд.</p>
2
</blockquote><p>Так характеризуют React его создатели, разработчики компании Facebook. Появившись в 2013 году, React быстро стал набирать обороты и получил широчайшее распространение. На момент создания курса на<a>GitHub</a>у проекта более 200 тысяч звёзд.</p>
3
<p>Секрет успеха в том, что React позволил под другим углом посмотреть на процесс создания интерфейсов. Он резко снизил порог входа и сложность получаемых решений. Причём не только по сравнению с ручной работой с DOM, но и по сравнению со многими фреймворками.</p>
3
<p>Секрет успеха в том, что React позволил под другим углом посмотреть на процесс создания интерфейсов. Он резко снизил порог входа и сложность получаемых решений. Причём не только по сравнению с ручной работой с DOM, но и по сравнению со многими фреймворками.</p>
4
<p>И хотя React как библиотеку для отрисовки можно встраивать в существующий технологический стек там, где это имеет смысл, он также способен взять на себя полное управление фронтендом. Правда, в данном случае для эффективной работы придётся подключить еще некоторые ключевые дополнения, такие как redux и react-router.</p>
4
<p>И хотя React как библиотеку для отрисовки можно встраивать в существующий технологический стек там, где это имеет смысл, он также способен взять на себя полное управление фронтендом. Правда, в данном случае для эффективной работы придётся подключить еще некоторые ключевые дополнения, такие как redux и react-router.</p>
5
<p>Фундаментальная идея, лежащая в основе работы React, оказалась настолько мощной, что её расширили далеко за рамки браузера. С React можно работать как на сервере (server-side rendering), так и на мобильных платформах (React Native). Вы не ослышались: сейчас на языке JavaScript можно создавать приложения под мобильные платформы, которые работают почти так же эффективно, как и нативные приложения. Такую ситуацию, когда один подход используется для реализации разных задач (сайт, мобильные приложения) называется<strong>"Learn once, Write anywhere"</strong>.</p>
5
<p>Фундаментальная идея, лежащая в основе работы React, оказалась настолько мощной, что её расширили далеко за рамки браузера. С React можно работать как на сервере (server-side rendering), так и на мобильных платформах (React Native). Вы не ослышались: сейчас на языке JavaScript можно создавать приложения под мобильные платформы, которые работают почти так же эффективно, как и нативные приложения. Такую ситуацию, когда один подход используется для реализации разных задач (сайт, мобильные приложения) называется<strong>"Learn once, Write anywhere"</strong>.</p>
6
<h2>Практика</h2>
6
<h2>Практика</h2>
7
<p>В этом курсе вам предстоит плотно пройтись по возможностям React и хорошенько с ними разобраться. Однако это не отменяет необходимости работать с React и вне среды Hexlet.</p>
7
<p>В этом курсе вам предстоит плотно пройтись по возможностям React и хорошенько с ними разобраться. Однако это не отменяет необходимости работать с React и вне среды Hexlet.</p>
8
<h3>CodePen</h3>
8
<h3>CodePen</h3>
9
<p>Самый простой способ попрактиковаться с React - это сервис<a>CodePen</a>. После регистрации вы сможете создать<strong>pen</strong>(пен) - изолированную среду разработки, подключив туда React. Результаты кода отображаются там же, в соседней панели.</p>
9
<p>Самый простой способ попрактиковаться с React - это сервис<a>CodePen</a>. После регистрации вы сможете создать<strong>pen</strong>(пен) - изолированную среду разработки, подключив туда React. Результаты кода отображаются там же, в соседней панели.</p>
10
<p>CodePen позволяет вставлять пены прямо в свой сайт, эта возможность будет использоваться для демонстрации. Вы можете не только проанализировать такой код, но запустить и даже поправить его.</p>
10
<p>CodePen позволяет вставлять пены прямо в свой сайт, эта возможность будет использоваться для демонстрации. Вы можете не только проанализировать такой код, но запустить и даже поправить его.</p>
11
-
<p><a>https://codepen.io/hexlet/pen/eEyJeZ/</a></p>
11
+
<p><a>Попрактиковаться</a></p>
12
<h3>create-vite</h3>
12
<h3>create-vite</h3>
13
<p>Разработчики, понимая как сложно настроить с нуля экосистему для старта фронтенд-проектов, создали проект под названием<a>create-vite</a>. Это npm-библиотека, которая позволяет стартануть с нулевой конфигурацией. Для создания проекта нужно выполнить команду:</p>
13
<p>Разработчики, понимая как сложно настроить с нуля экосистему для старта фронтенд-проектов, создали проект под названием<a>create-vite</a>. Это npm-библиотека, которая позволяет стартануть с нулевой конфигурацией. Для создания проекта нужно выполнить команду:</p>
14
<p>При выполнении команды, библиотека предлагает выбрать нужные настройки. Среди них можно выбрать фреймворк React. Ниже пример выбора настроек, подходящих под наши нужды:</p>
14
<p>При выполнении команды, библиотека предлагает выбрать нужные настройки. Среди них можно выбрать фреймворк React. Ниже пример выбора настроек, подходящих под наши нужды:</p>
15
<p>Когда утилита завершит работу, она предложит выполнить команды. Выполняем:</p>
15
<p>Когда утилита завершит работу, она предложит выполнить команды. Выполняем:</p>
16
<p>Дальше просто открывайте<a>http://localhost</a></p>
16
<p>Дальше просто открывайте<a>http://localhost</a></p>
17
<p><a>/</a>и наслаждайтесь.</p>
17
<p><a>/</a>и наслаждайтесь.</p>
18
<h3>babel-preset-react</h3>
18
<h3>babel-preset-react</h3>
19
<p>Если вы всё же решитесь делать всё самостоятельно, то не забудьте подключить пресет (preset) @babel/preset-react к вашей конфигурации Babel. React расширяет JS, и Babel не может работать с кодом без этого пресета.</p>
19
<p>Если вы всё же решитесь делать всё самостоятельно, то не забудьте подключить пресет (preset) @babel/preset-react к вашей конфигурации Babel. React расширяет JS, и Babel не может работать с кодом без этого пресета.</p>
20
<h2>Курс</h2>
20
<h2>Курс</h2>
21
<p>На протяжении всего курса вам предстоит создавать маленькие и не очень маленькие компоненты Bootstrap. Если вы еще не знакомы с ним, то прочитайте<a>руководство по Бутстрапу</a>. В любом случае в каждой задаче будет подробно описано, какой компонент использовать и как он должен выглядеть.</p>
21
<p>На протяжении всего курса вам предстоит создавать маленькие и не очень маленькие компоненты Bootstrap. Если вы еще не знакомы с ним, то прочитайте<a>руководство по Бутстрапу</a>. В любом случае в каждой задаче будет подробно описано, какой компонент использовать и как он должен выглядеть.</p>
22
<p>Как и в курсе<a>JS: DOM API</a>, часть тестов основана на снепшот-тестировании, а это значит, что важно использовать вёрстку именно так, как указано в задании.</p>
22
<p>Как и в курсе<a>JS: DOM API</a>, часть тестов основана на снепшот-тестировании, а это значит, что важно использовать вёрстку именно так, как указано в задании.</p>
23
<p>Кроме этого, практически все задания визуализированы. Перед тем, как запускать тесты убедитесь, что всё работает в веб-доступе.</p>
23
<p>Кроме этого, практически все задания визуализированы. Перед тем, как запускать тесты убедитесь, что всё работает в веб-доступе.</p>
24
<h2>Классовые компоненты актуальны</h2>
24
<h2>Классовые компоненты актуальны</h2>
25
<p>С момента создания React претерпел значительные изменения. Сначала основное внимание уделялось классовым компонентам, которые предоставили разработчикам возможность создавать компоненты с состоянием и жизненным циклом. Однако с появлением функциональных компонентов и хуков в версии React 16.8 в 2019 году акцент сместился. Хуки позволили разработчикам использовать состояние и другие возможности React без необходимости использовать классы.</p>
25
<p>С момента создания React претерпел значительные изменения. Сначала основное внимание уделялось классовым компонентам, которые предоставили разработчикам возможность создавать компоненты с состоянием и жизненным циклом. Однако с появлением функциональных компонентов и хуков в версии React 16.8 в 2019 году акцент сместился. Хуки позволили разработчикам использовать состояние и другие возможности React без необходимости использовать классы.</p>
26
<p>Стоит отметить, что классовые компоненты никуда не ушли и по-прежнему широко используются во многих приложениях. А некоторые задачи просто не возможно решить без них (например,<a>ErrorBoundary</a>). Поэтому классовые компоненты остаются актуальными и по сей день, а в чем-то даже превосходят функциональные. Любой функциональный компонент можно заменить классовым, но не любой классовый можно заменить функциональным.</p>
26
<p>Стоит отметить, что классовые компоненты никуда не ушли и по-прежнему широко используются во многих приложениях. А некоторые задачи просто не возможно решить без них (например,<a>ErrorBoundary</a>). Поэтому классовые компоненты остаются актуальными и по сей день, а в чем-то даже превосходят функциональные. Любой функциональный компонент можно заменить классовым, но не любой классовый можно заменить функциональным.</p>
27
<p>Классовые компоненты имеют более четкую и понятную структуру, особенно для тех, кто уже знаком с объектно-ориентированным программированием. Они используют синтаксис классов и методов, что может быть более интуитивно понятно для разработчиков. Кроме того, классы предоставляют более явные методы жизненного цикла и управления состоянием.</p>
27
<p>Классовые компоненты имеют более четкую и понятную структуру, особенно для тех, кто уже знаком с объектно-ориентированным программированием. Они используют синтаксис классов и методов, что может быть более интуитивно понятно для разработчиков. Кроме того, классы предоставляют более явные методы жизненного цикла и управления состоянием.</p>
28
<p>По этим причинам изучение React лучше всего начинать с классовых компонентов. Это позволит комфортно погрузиться в изучение основ. Далее вы перейдете к изучению функциональных компонентов и хуков уже имея необходимый набор знаний как работают компоненты React. Работа с хуками - это отдельный пласт знаний, требующий базового понимания концепций React. Уроки в курсе построены таким образом, чтобы максимально комфортно изучить все аспекты работы с React.</p>
28
<p>По этим причинам изучение React лучше всего начинать с классовых компонентов. Это позволит комфортно погрузиться в изучение основ. Далее вы перейдете к изучению функциональных компонентов и хуков уже имея необходимый набор знаний как работают компоненты React. Работа с хуками - это отдельный пласт знаний, требующий базового понимания концепций React. Уроки в курсе построены таким образом, чтобы максимально комфортно изучить все аспекты работы с React.</p>
29
<h2>Отладка</h2>
29
<h2>Отладка</h2>
30
<p>Так как React отрабатывает на фронтенде, то и ошибки будут появляться там же. Не забывайте всегда держать открытой консоль (например, в инструментах разработки Chrome) и внимательно читать всё, что там написано. Большая часть ошибок будет выводиться именно там.</p>
30
<p>Так как React отрабатывает на фронтенде, то и ошибки будут появляться там же. Не забывайте всегда держать открытой консоль (например, в инструментах разработки Chrome) и внимательно читать всё, что там написано. Большая часть ошибок будет выводиться именно там.</p>
31
<p>Также не забудьте поставить<strong>React Developer Tools</strong>. Это расширение для браузера, которое даёт очень удобную панель для анализа происходящего с React в вашем приложении. Начните его использовать с первого урока.</p>
31
<p>Также не забудьте поставить<strong>React Developer Tools</strong>. Это расширение для браузера, которое даёт очень удобную панель для анализа происходящего с React в вашем приложении. Начните его использовать с первого урока.</p>