Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 <ul><li><a>JavaScript - несколько слов о языке</a></li>

2 <li><a>Что такое React</a><ul><li><a>История появления</a></li>

3 </ul></li>

4 <li><a>Что знать перед использованием</a></li>

5 <li><a>О компонентах</a></li>

6 <li><a>Особенности и нюансы библиотеки</a></li>

7 <li><a>Начало работы с React</a><ul><li><a>Инициализация</a><ul><li><a>Через браузер</a></li>

8 <li><a>Через локальную среду</a></li>

9 </ul></li>

10 <li><a>Особенности компонентов</a><ul><li><a>Простой компонент</a></li>

11 <li><a>С состоянием</a></li>

12 <li><a>Приложения</a></li>

13 <li><a>Внешние плагины</a></li>

14 </ul></li>

15 </ul></li>

16 <li><a>Стартовый код - проверка</a><ul><li><a>Передача данных</a></li>

17 <li><a>Создание интерактива</a></li>

18 <li><a>Инструментарий разработчика</a></li>

19 </ul></li>

20 <li><a>Что позволит делать пример кода</a></li>

21 <li><a>Как быстро понять JS и React</a></li>

22 </ul><p>Для программирования софта необходимо знать специализированные языки, их функционал, а также возможности и синтаксис. Неплохим спросом в последнее время пользуется JavaScript. Особенно это касается веб-утилит.</p>

23 <p>Данный ЯП довольно прост в освоении - с ним сможет совладать даже новичок. Имеет разнообразные инструменты и компоненты, помогающие быстро писать сложное ПО. Результат не заставит себя ждать - программист получит на выходе качественный софт с понятным интерфейсом и мощным функционалом.</p>

24 <p>JS имеет немало фреймворков и библиотек. Разработчикам, претендующим на звание Джуниоров, нужно разобраться с таким компонентом, как React. Эта "утилита" пригодится в ПО, где нужно внедрить пользовательский интерфейс. Далее технология будет рассмотрена более подробно.</p>

25 <h2>JavaScript - несколько слов о языке</h2>

26 <p>JavaScript - это простой объектно-ориентированный ЯП, который предназначается для разработки клиент-серверных утилит. Софт, составленный с его помощью, включаются в HTML-документы, после чего распространяется совместно с оными.</p>

27 <p>JS выступает в качестве интерпретируемого ЯП. Применяется в качестве встраиваемого языка для обеспечения программного доступа к объектам контента.</p>

28 <p>К его особенностям относят:</p>

29 <ul><li>относительно простой синтаксис;</li>

30 <li>высокую читаемость программного кода;</li>

31 <li>мощный инструментарий и функционал;</li>

32 <li>наличие фреймворков и библиотек почти на все случаи жизни;</li>

33 <li>достойный уровень безопасности.</li>

34 </ul><p>Пользователь сможет достаточно быстро создавать браузерные и клиент-серверные утилиты через JS. Особенно если задействует React.</p>

35 <h2>Что такое React</h2>

36 <p>React - это элемент программирования. Специализированная технология, применяемая JavaScript при разработке разнообразного контента.</p>

37 <p>Представляет собой библиотеку для создания пользовательских интерфейсов. Обладает открытым исходным кодом. Впервые React появился в 2013 гожу. Выступает в качестве кроссплатформенной библиотеки.</p>

38 <p>React можно назвать:</p>

39 <ul><li>веб-фреймворком;</li>

40 <li>библиотекой функций;</li>

41 <li>библиотекой JS.</li>

42 </ul><p>Сейчас данный компонент имеет поддержку, а также разрабатывается Facebook и Instagram. Им помогает сообщество независимых разработчиков и организаций.</p>

43 <h3>История появления</h3>

44 <p>Технология React была разработана неким Джорданом Валке. Это - один из разработчиков ПО в корпорации Facebook. Идеей послужил XHP. Такое название носит компонентный HTML-фреймворк на PHP.</p>

45 <p>Изначально React был использован в ленте Фейсбука в 2011 году. Позже он был внедрен в ленту Instagram. Это произошло в 2012. Исходный код стал открытым в мае 2013 году при проведении конференции под названием JSConf US.</p>

46 <p>React Native получил анонс на конференции React.js Conf в начале 2015. Его исходный код разработчики открыли в конце весны того же года. Соответствующий компонент дает возможность разрабатывать нативные приложения с React, которые работают на iOS, Android и UWP.</p>

47 <p>А в 2017 году появилась переписанная и оптимизированная версия React, получившая название React Fiber. Это - основа всех будущих функций, а также имеющихся улучшений. Актуальная версия технологии на момент написания статьи - 18.0.0, вышедшая 29 марта 2022 года.</p>

48 <h2>Что знать перед использованием</h2>

49 <p>Перед тем, как приступать к непосредственной работе с Реактом, нужно подготовиться. Новичкам сразу разобраться с ним не так-то просто. Предварительно разработчику необходимо ознакомиться с понятиями и основами работы с:</p>

50 <ul><li>HTML;</li>

51 <li>JavaScript;</li>

52 <li>классами;</li>

53 <li>объектами;</li>

54 <li>функциями;</li>

55 <li>массивами.</li>

56 </ul><p>Когда соответствующие основы заложены, можно приступать к созданию пользовательского интерфейса при помощи Реакта.</p>

57 <h2>О компонентах</h2>

58 <p>Компонент React - это участок программного кода, представляющий собой часть веб-странички. Каждый компонент выступает в виде JS-функции. Последняя отвечает за возврат куска кодификации, отвечающей за определенный фрагмент страницы.</p>

59 <p>Собственный компонент разрешается написать через JSX. Для этого необходимо воспользоваться следующей формой записи:</p>

60 <p>Это - стандартный примем. Нужно просто вызвать компоненты таким образом, словно осуществляется непосредственная работа с HTML.</p>

61 <h2>Особенности и нюансы библиотеки</h2>

62 <p>Для качественного проекта веб-серверной разработки пригодится пользовательских интерфейс. Если разработчик пользуется JS, ему поможет React. Но сначала нужно не только разобраться в особенностях соответствующего ЯП, но и посмотреть, какие нюансы предусматривает рассматриваемая библиотека.</p>

63 <p>Сюда можно отнести следующие моменты:</p>

64 <ol><li>Передача данных однонаправленного типа. Свойства будут передаваться от родительского компонента к дочерним. Они получат свойства в виде множества неизменяемых значений. Это приводит к тому, что компонент не способен напрямую вносить корректировки в имеющиеся параметры.</li>

65 <li>Наличие виртуального DOM. Реакту был присвоен собственный виртуальный DOM. Технология создает кэш-структуру в памяти задействованного устройства, что позволяет производить вычисление между предыдущим и текущим состояниями интерфейса.</li>

66 <li>Наличие JSX. Это - расширение синтаксиса ДжаваСкрипт, которое дает возможность применять HTML-подобный синтаксис для описания структур интерфейса.</li>

67 <li>Применение методов жизненного цикла. Они помогают программеру осуществлять запуск кодификации на разных стадиях "жизни" компонента приложения.</li>

68 <li>Не только отрисовка HTML в браузере.</li>

69 <li>Наличие React Hooks. За счет Хуков можно использовать состояния и иные возможности изучаемой технологии без прописки классов в коде.</li>

70 </ol><p>Все это делает Реакт удобным и функциональным инструментом для пользовательских интерфейсов различной сложности. Главное научиться пользоваться подобной библиотекой. С нуля разобраться в вопросе поможет официальная документация и туториалы на русском языке.</p>

71 <h2>Начало работы с React</h2>

72 <p>Для того, чтобы было проще разобраться в рассматриваемом компоненте для пользовательских интерфейсов, нужно сначала рассмотреть базовые навыки работы с оным. Это не так трудно. Информация, представленная далее, покажется полезной и новичкам, и опытным разработчикам.</p>

73 <h3>Инициализация</h3>

74 <p>Первый раз использовать Реакт удастся только после непосредственной установки соответствующего "фреймворка". Добиться желаемого результата удастся двумя способами. Каждый может выбрать свой вариант развития событий.</p>

75 <h4>Через браузер</h4>

76 <p>Это - самый простой подход к решению поставленной задачи. Для него необходимо:</p>

77 <ol><li>Открыть исходный стартовый код в новой вкладке интернет-обозревателя.</li>

78 <li>В новой вкладке должна быть пустая игровая доска в крестики-нолик, а также кодификация Реакта.</li>

79 <li>Отправить запрос на обработку.</li>

80 </ol><p>Если использован этот вариант, следующий метод инициализации можно пропустить. Взять исходный код технологии предлагается по<a>этой</a>ссылке.</p>

81 <h4>Через локальную среду</h4>

82 <p>Необязательный вариант, который требует от программера определенных навыков и умений. Чтобы справиться с поставленной задачей, необходимо выбрать редактор, а затем:</p>

83 <ol><li>Убедиться в том, что на устройстве стоит последняя версия Node.js.</li>

84 <li>После��овать<a>инструкции</a>по инициализации Create React App. Это поможет создать новый проект.</li>

85 <li>Удалить в папке с именем src/ все документы. Саму папку трогать не нужно.</li>

86 <li>Добавить файл с именем index.css с<a>кодом</a>CSS.</li>

87 <li>Создать index.js с<a>таким</a>кодом.</li>

88 </ol><p>Во втором созданном документе вставить в самом начале файла такие строчки:</p>

89 <p>Теперь можно запускать npm start в папке проекта, а также открыть<a>http://localhost:3000</a>в интернет-обозревателей. На экране должно появиться пустое поле для игры "крестики-нолики".</p>

90 <h3>Особенности компонентов</h3>

91 <p>Теперь, когда технология, поддерживающая работу с пользовательским интерфейсом, инициализирована, можно приступать к коддингу. Читать специализированную литературу и туториалы на русском в "голой" теории достаточно тяжело. Поэтому далее будут рассмотрены небольшие примеры компонентов Реакта, объясняющие особенности функционирования оных.</p>

92 <h4>Простой компонент</h4>

93 <p>Компоненты React простого типа предусматривают такие особенности:</p>

94 <ol><li>Реализуют метод render().</li>

95 <li>Указанный метод принимает входные данные и возвращает информацию для отображения.</li>

96 <li>В примере задействован XML-подобный синтаксис JSX.</li>

97 <li>Входные сведения, передаваемые в компонент, доступы в render() посредством this.props.</li>

98 </ol><p>Стоит обратить внимание на то, что JSX не является обязательным. В React применять оный нет острой необходимости. Можно задействовать для просмотра необработанного кода JS некий PERL Babel.</p>

99 <h4>С состоянием</h4>

100 <p>Компонент способен поддерживать разнообразные внутренние данные состояния. Они доступы при помощи this.state. Когда данные состояния компонента корректируются, отрисованная разметка обновляется. Происходит это при помощи повторного вызова render().</p>

101 <p>Выше - наглядный пример кода, который помогает через рассматриваемую особенность создать своеобразный таймер. Утилита будет отсчитывать время, проведенное в ней, после непосредственного запуска.</p>

102 <h4>Приложения</h4>

103 <p>Через props и state можно сделать небольшую программу со списком дел. В приведенном примере нудно учитывать следующие моменты:</p>

104 <ol><li>State задействован для того, чтобы отслеживать текущий список имеющийся компонентов.</li>

105 <li>Этот метод помогает следить за текстом, введенным пользователем.</li>

106 <li>Сбор и реализация осуществляется через делегирование событий.</li>

107 </ol><p>Выше - пример того, как будет работать и выглядеть соответствующая мини-утилита.</p>

108 <h4>Внешние плагины</h4>

109 <p>В качестве дополнительных возможностей React и его компонентов можно выделить функцию использования в кодификациях внешних плагинов. Это - важный этап разработки программного обеспечения.</p>

110 <p>Здесь необходимо обратить внимание на такие моменты как:</p>

111 <ol><li>React выступает в качестве гибкого элемента программирования и разработки.</li>

112 <li>В этой библиотеке имеют место хуки, которые дают возможность настройки взаимодействия с иными фреймворками и библиотеками.</li>

113 <li>Предложенный далее пример задействует remarkable. Это - внешняя библиотека для работы с Markdown.</li>

114 <li>Подключенная библиотека помогает преобразовывать <textarea> в режиме реального времени.</li>

115 </ol><p>Выше - пример того, как будет выглядеть элементарное приложение с подключенной сторонней библиотекой. И то, какой интерфейс начнет реализовывать React.</p>

116 <h2>Стартовый код - проверка</h2>

117 <p>Можно изучить немало специализированной литературы на русском языке по React, но без базовых знаний добиться успеха с этим "фреймворком" никак не получится. Далее будут рассмотрены наглядные примеры проверки имеющегося стартового кода.</p>

118 <p>Полученные ранее знания помогут осуществить запуск Реакта. Начало процесса зависит от ситуации:</p>

119 <ol><li>Если была установка через браузер, нужно открыть<a>код</a>в новой вкладке.</li>

120 <li>Когда планируется работа через локальную среду, требуется перейти в папке проекта в файл scr/index.js.</li>

121 <li>Стартовый код, предложенный в примере - это основа того, что разрабатывает программер. В нем есть стили CSS, поэтому можно сосредоточиться исключительно на React, а также написании игрушки под названием "крестики-нолики".</li>

122 </ol><p>При рассмотрении кода в Реакте можно заметить, что там есть три компонента: Square, Game, Board. Здесь:</p>

123 <ol><li>Square отвечает за отображение одиночной кнопки button.</li>

124 <li>Beard будет подсвечивать 9 квадратиков.</li>

125 <li>Game отвечает за вывод Board со значениями числе-заполнителей, которые будут откорректированы чуть позже.</li>

126 </ol><p>Сейчас исходная кодификация не имеет никаких интерактивных компонентов, которые могли бы отображаться на поле.</p>

127 <h3>Передача данных</h3>

128 <p>Для того, чтобы поэкспериментировать, нужно хотя бы немного наглядных примеров корректировки кода. Стоит попробовать передать данные из Board в Square. Тогда:</p>

129 <ul><li>В методе renderSquare компонента Board нужно откорректировать кодификацию.</li>

130 <li>Внесение изменений нужно для того, чтобы передать свойство с названием value в Square.</li>

131 </ul><ul><li>Теперь нужно изменить метод render компонента Square. Результатом должно служить отображение значения.</li>

132 </ul><p>Вот<a>здесь</a>можно увидеть полный код получившейся программы.</p>

133 <h3>Создание интерактива</h3>

134 <p>Теперь нужно добавить заполнение Square значением X, если пользователь щелкает по оному. Для этого потребуется:</p>

135 <ul><li>Изменить тег кнопки, который отвечает за возврат из функции render() компонента Square.</li>

136 </ul><ul><li>Сделать так, чтобы компонент Square запомнил, что на него было совершено нажатие. Следствие - заполнил себя значком "крестик". Для этого потребуется задействовать состояние. Инициализация оного происходит через this.state в конструкторах.</li>

137 </ul><ul><li>Теперь нужно откорректировать метод render для того, чтобы отобразить значения текущего состояния при нажатии. После внесения корректировок тег button будет меть такой вид:</li>

138 </ul><ul><li>При вызове this.setState из обработчика под названием onClick в методе render компонента Square React будет повторно отрисовывать этот Square при каждом клике на его кнопку button.</li>

139 </ul><p>После запуска setState в компоненте, Реакт автоматически начнет обновление. Дочерние классы, размещенные внутри оного, тоже будут подлежать автокорректировке. А<a>вот полный код</a>получившегося результата.</p>

140 <h3>Инструментарий разработчика</h3>

141 <p>С каждым разделом статьи становится все более ясно, как работать с Реактом и его компонентами. Можно в процессе разработки ПО и его интерфейса применять инструменты разработчика. Пример - React Devtools. Запускается в Chrome и Mozilla. Дает возможность просмотра древа компонентов Реакта через инструментарий разработчика прямо в интернет-обозревателе.</p>

142 <p>React DevTools позволяет проверять свойства и состояние компонентов утилиты. После установки оного можно просто щелкнуть ПКМ по любому элементу страницы, после чего нажать на кнопку Inspect. Это поможет открыть инструменты разработчика. Вкладка рассматриваемой библиотеки отобразится последней с правой стороны.</p>

143 <p>Если нужно заставить работать React с CodePen, предстоит:</p>

144 <ol><li>Войти или зарегистрироваться в системе.</li>

145 <li>Подтвердить электронный ящик.</li>

146 <li>Щелкнуть по кнопке Fork.</li>

147 <li>Нажать на Change View. Далее - выбрать команду Debug Mode.</li>

148 </ol><p>Теперь открывшаяся вкладка с инструментами будет обладать новым пунктом - React. Все это пригодится не только для "крестиков-ноликов", но и для другого программного обеспечения с пользовательским интерфейсом.</p>

149 <h2>Что позволит делать пример кода</h2>

150 <p>Рассмотренный пример программного кода с React позволяет:</p>

151 <ul><li>играть в игру крестики-нолики;</li>

152 <li>видеть, когда пользователь выигрывает у компьютера;</li>

153 <li>хранить историю игры;</li>

154 <li>смотреть не только историю, но и предыдущие версии игрового поля.</li>

155 </ul><p><a>Вот весь код</a>получившейся утилиты. Он и будет ответом на вопрос о том, как правильно использовать библиотеку JS для своих целей.</p>

156 <p>При наличии дополнительного времени и желания стоит улучшить игрушку. Для этого туда предлагается добавить:</p>

157 <ol><li>Отображение местоположения для каждого хода в виде столбец-строка. Информация должна выводиться на экран в списке истории ходов.</li>

158 <li>Выделить текущий выбранный компонент в списке.</li>

159 <li>Переписать Board так, чтобы можно было задействовать два цикла для создания квадратов без жесткого кодирования.</li>

160 <li>Добавить переключатель, который отвечает за сортировку ходов по возрастанию или убыванию.</li>

161 <li>Выделять три квадрата, которые привели пользователя к победе.</li>

162 <li>Если никто не выиграл, вывести на дисплей устройства сообщение о ничье.</li>

163 </ol><p>Эти задачи сможет выполнить разработчик, который уже знаком с React и его составляющими. Прописанные "новшества" указаны в порядке сложности. А<a>здесь</a>можно увидеть больше полезной информации о компонентах Реакта. Данные пригодятся опытным программистам.</p>

164 <h2>Как быстро понять JS и React</h2>

165 <p>Чтобы лучше разобраться в extends react, а также языке программирования JavaScript, можно:</p>

166 <ol><li>Пойти учиться в техникум или ВУЗ на IT-направление. Программеров нередко обучают основам JS.</li>

167 <li>Заняться самообразованием. В Сети полно полезной информации, включая бесплатные видеоуроки и специализированную литературу. Минус такого подхода - невозможность подтвердить навыки и знания документально.</li>

168 <li>Закончить дистанционные онлайн курсы.</li>

169 </ol><p>Последний вариант наиболее успешный и быстрый. За срок до 12 месяцев можно освоить одно или несколько направлений в IT-сфере. Пользователям гарантируется поддержка опытными кураторами, а также бесценный практический опыт. Рассчитаны курсы как на новичков, так и на опытных разработчиков. С их помощью основы React будут изучены быстро и без проблем. В конце обучения каждый ученик сможет получить электронный сертификат, подтверждающий навыки и умения в выбранных направлениях.</p>

170 <p>Интересует React? Добро пожаловать на<a>специализированный курс</a>в Otus!</p>

171