Данный учебник посвящен популярному JavaScript фреймворку React. Для его изучения вам необходимо знать чистый JavaScript, основы командной строки, работу с npm и npx, работу с модулями ES6. Для уст... Читать дальше

Пусть у нас есть сайт. На этом сайте мы можем выделить некоторые блоки: хедер, контент, сайдбар, футер и так далее. Каждый блок можно разделить на более мелкие подблоки. К примеру в хедере обычно можн... Читать дальше

Язык JSX - это обычный JavaScript, но с некоторыми дополнениями, позволяющими писать теги прямо в коде, без кавычек. Теги можно возвращать через return: function App() { return <div> ... Читать дальше

В предыдущем уроке у вас получился следующий код: function App() { return <div> text </div>; } Давайте посмотрим, какие особенности имеет возврат тегов из функции при работе с ... Читать дальше

Пусть у нас есть следующий код: function App() { const str = 'text'; return <div> text </div>; } Давайте сделаем так, чтобы в текст дива вставилось значение константы str.... Читать дальше

В переменных и константах можно хранить теги, выполняя затем их вставку в нужное место. Смотрите пример: function App() { const str = <p>text</p>; return <div> {str} ... Читать дальше

Вставку переменных и констант можно делать не только в тексты тегов, но и в атрибуты. При этом кавычки от атрибутов не ставятся: function App() { const str = 'elem'; return <div id={str}&... Читать дальше

Давайте сделаем так, чтобы в зависимости от содержимого константы show на экран вывелся или один, или другой текст: function App() { let text; const show = true; if (show) { text = 'tex... Читать дальше

Как вы уже знаете, внутри фигурных скобок можно выполнять JavaScript код. На самом деле этот код может быть не любым, а только самым простым. В частности, условия if там применять нельзя. Взамен сл... Читать дальше

Внутри основной функции компонента можно делать вспомогательные функции. К примеру, давайте с помощью вспомогательных функций найдем сумму степеней двух чисел и выведем ее в тексте тега: function A... Читать дальше

Давайте теперь изучим работу с событиями на React. К примеру, сделаем так, чтобы по клику на блок выводился алерт с некоторым текстом. Пусть у нас есть функция showMess, которая выводит алерт с соо... Читать дальше

Внутри функции, привязанной к обработчику событий, доступен объект Event: function App() { function func(event) { console.log(event); // объект с событием } return <div> <bu... Читать дальше

Пусть у нас в массиве хранятся теги: function App() { const arr = [<p>1</p>, <p>2</p>, <p>3</p>]; } Мы можем выполнить вставку содержимого нашей переменной с... Читать дальше

Пусть у нас есть массив объектов с продуктами: const prods = [ {name: 'product1', cost: 100}, {name: 'product2', cost: 200}, {name: 'product3', cost: 300}, ]; function App() { } Дава... Читать дальше

Пусть у нас опять дан наш массив с продуктами: const prods = [ {id: 1, name: 'product1', cost: 100}, {id: 2, name: 'product2', cost: 200}, {id: 3, name: 'product3', cost: 300}, ]; Давайте в... Читать дальше

Как вы уже знаете, в массиве объектов должны присутствовать уникальные id. Давайте разберемся, откуда они берутся. Массивы объектов могут иметь два происхождения: либо они присланы нам сервером, ли... Читать дальше

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

Работа с инпутами в React происходит с помощью стейтов. Каждому инпуту назначается свой стейт, содержащий в себе value инпута. Давайте посмотрим на примере. Пусть у нас есть инпут: function App(... Читать дальше

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

Давайте теперь научимся работать с многострочным полем ввода textarea. В React для удобства работа с ним сделана похожа на работу с текстовым инпутом. В отличие от чистого JS, в React в textarea не ну... Читать дальше