Вивчення React.js: Теорія, Практика і Як Почати?

Вивчення React.js – це опанування інструменту для розробки зовнішнього вигляду веб-додатків. А зовнішній вигляд – це те, що бачать і з чим взаємодіють користувачі, коли заходять на будь-який веб-сайт.

Іншими словами, зовнішній вигляд веб-додатку – це те, що створюють на HTML і CSS, а потім оживляють за допомогою JavaScript. Наприклад: кнопки, меню, форми з полями вводу, оформлення (кольори, шрифти) тощо. А згідно офіційної документації, React.js призначений саме для цього.

Чи Достатньо Вивчення Одного React.js для Розробки UI Веб-Додатків?

В цьому дописі зосередимося на вивченні лише самого React.js.

Звісно, для розробки зовнішнього вигляду сучасних веб-додатків користають багато інструментів. Адже React.js відповідає лише за одну задачу – відображення і оновлення веб-сторінок на екрані монітора. А, наприклад, як робити запити до сервера чи розбивати веб-додаток на сторінки – то вже інші бібліотеки.

У кожного веб-додатку буде свій набір бібліотек, пакетів та інших інструментів, за допомогою яких його розробляють. І ці набори не повторюються, як і в світі нема двох точно подібних веб-додатків.

Але якщо ці додатки користають React.js, то React.js – однаковий для всіх, і його треба вивчити найпершим і якнайкраще. Решту інструментів освоюємо паралельно і поступово: після вивчення React.js на достатньому рівні й відповідно до проєкту, який розробляємо.

Кого Може Цікавити Вивчення React.js?

Якщо ти читаєш цей допис, то маєш свою причину, навіщо тобі вивчати React.js. Я опишу типові портрети цільових людей, які починають вивчення React.js, і потім коротко розкажу мій шлях. А ти порівняєш зі своїми цілями.

Верстальники Веб-Сторінок

Ці люди володіють HTML, CSS, базовим JavaScript і якоюсь його бібліотекою (наприклад, jQuery). Вміють писати прості скрипти з нуля, знаходять і прикручують до веб-сторінок готові (всілякі галереї, форми й інші типові компоненти UI).

Мій шлях до React.js і великої веб-розробки починався саме з верстки сайтів. І одного разу треба було створити такий сайт, щоб його вміст оновлювався без перезавантажень усієї сторінки. Ця ідея мене дуже запалила, і я зразу почав кодити на JavaScript – без жодних фреймворків / бібліотек, і ще не вміючи програмувати нормально.

Сайт запрацював: якщо клацнути по верхньому меню, то вміст сайту змінювався так, ніби ти ходиш різними веб-сторінками. Але вже на цьому етапі мій код JavaScript був заплутаний, як вермішель у тарілці.

Та я тоді ще не помічав жодних кулінарних блюд у моєму JavaScript, був задоволений своїм творінням і додав цей сайт у портфоліо. Опісля сміливо став шукати замовників не лише на верстку, а й на розробку складних скриптів.

Розробники UI на Інших Технологіях (Angular, Vue, Svelte тощо)

Аж якось один розумний дядько, глянувши моє портфоліо, запитав, чому я пишу все з нуля, коли є готові рішення. І назвав мені Angular і Vue. Так почалося моє знайомство з фреймворками для розробки UI. Я ознайомився з Angular і зробив невеличкий проєкт на ньому. Далі на Vue. І десь тоді мені трапився й React.

Аналізуючи ринок замовлень на розробку UI, я помітив, що дуже багато проєктів були саме на React.js. Тому я вирішив ознайомитися ще й із цією бібліотекою. І саме React.js мені сподобався найбільше, бо:

• Там легкий синтаксис, близький до вже відомих мені HTML, CSS і JavaScript.
• Не існувало якихось незрозумілих конструкцій (наприклад, атрибутів для тегів HTML, декораторів), як у Angular і Vue.

Документація React.js була меншою, тож я вирішив, що її вивчення буде швидше, ніж інших фреймворків. Так я й зосередився на розробці саме з React.js.

Спеціалісти з React.js Базового чи Середнього Рівня

І ось питання: після років роботи, більше десятка проєктів, на деяких із яких тебе сприймали як головного спеца, – навіщо тобі продовжувати вивчати React.js? Хіба ти не визубрив його весь, і треба лише інколи підглядати в документацію?

Відповіді:

• Бажання замовників змінюються. Ніколи не буде двох однакових веб-проєктів. Замовники завжди придумують щось нове, для розробки чого доводиться користати React.js так, як ніколи раніше.
• Сам React.js (і всі фреймворки / бібліотеки) постійно розвивається. З’являються нові можливості для вирішення нових завдань із UI, і що раніше їх опануєш, тим більшу матимеш перевагу на ринку.

Тому так, і спеціалістам React.js треба регулярно його повторювати й вивчати оновлення.

Які Цілі Можуть Бути для Вивчення React.js?

У мене все зводилося до одної – вміти розробляти UI веб-додатків будь-якої складності. Тобто, зосередитися на вирішенні того, що цікавить замовника і користувачів додатку.

Для цього треба добре вивчити й розуміти внутрішню роботу React.js під капотом. І саме ці підкапотні знання й дозволять втілювати будь-які задуми клієнтів і тонко покращувати вже розроблене (для UI).

А найповнішу інформацію про це дає офіційна документація React.js. Треба вміти її користати для швидкого знаходження рішень і оновлення знань.

Які Базові Знання Треба для Вивчення React.js?

Такі знання придатні до вивчення будь-якої технології з розробки UI, а не лише React.js. Я ділю їх на обов’язкові й додаткові.

Обов’язкові:

• Верстка веб-сторінок на HTML і CSS. В React.js ти писатимеш розмітку веб-сторінок майже так само.
• JavaScript: базовий і для роботи з DOM (мати поняття, як за допомогою скриптів керувати HTML-розміткою і стилями CSS веб-сторінки).

Необов’язкові:

• Досвід роботи з іншими фреймворками для розробки UI (наприклад, Angular, Vue).

Коли Вивчати в React.js Теорію і Коли – Практику?

Документація радить почати знайомство чи повторювати React.js – саме з практики. На початку довідки є дві навчалки, в яких ти створиш гру “Хрестики-Нулики” і таблицю з продуктами. Під час розробки цих проєктів ти вивчиш 80% можливостей React.js, які розробники користають щодня.

А до теорії звертаємося для глибшого пізнання того, про що дізнаємося на практиці. Так, у наступних розділах довідки React.js ти детальніше ознайомишся з кожною з тих 80% можливостей і з рештою 20%. Будуть і вправи на закріплення вивченого. Читаючи теорію, пробуй одночасно думати, в яких випадках можна застосувати різні можливості React.js.

Ще одне хороше поєднання теорії з практикою – це курси React.js. Але вони ніколи не замінять офіційну документацію. Якщо тобі зручніше вивчення React.js із курсів, то раджу одночасно читати й документацію. А в курсові проєкти пробуєш додавати те, що дізнаєшся з неї.

Інструменти для Вивчення React.js

Це все, що допоможе тобі опановувати React.js (окрім власне уроків). Наприклад:

• Редактори коду: онлайн і як окремі програми.
• Приклади коду: живі, їх можна змінювати.
• Задачі на вирішення типових питань із розробки UI.
• Вихідний код готових додатків.

Де Писати Код Під Час Вивчення React.js?

Є вбудовані в урок живі приклади коду, є онлайн-редактори, є редактори як окремі програми. Писати код можна будь-де. Але кожен із варіантів може трохи впливати на швидкість і зручність проходження уроків.

Вбудовані Живі Приклади Коду

Вважаю їх найзручнішими для навчання. Бо такі приклади знаходяться в матеріалі уроку: серед тексту чи під відео. Проходячи урок, ти пробуєш міняти щось у коді цих прикладів і зразу бачиш результат. Піддаєш дослідам (чи сумнівам) те, що навчає урок. І так бачиш тему з різних цікавих тобі боків і краще її засвоюєш.

А найбільше мені подобається у живих прикладах те, що не треба нічого встановлювати собі на комп чи переходити з уроку на інші вкладки браузера. Все є в уроці тут і зараз.

Онлайн-Редактори

Це середнє між вбудованими живими прикладами і справжніми редакторами (програмами, які встановлюєш на свій комп). Онлайн-редактори теж містять приклади коду з уроків, а за зовнішнім виглядом подібні до справжніх редакторів. Тобто, в них можна створювати нові файли й теки, бачити консоль, попередній перегляд розроблюваного UI.

Єдина дрібна незручність – онлайн-редактори є сторонніми сервісами, і їх треба відкривати в окремих вкладках браузера. Це трохи відволікає від уроку: наприклад, від якихось важливих пояснень того ж прикладу коду. Бо ти постійно стрибаєш із уроку в редактор і назад.

Онлайн-редактори можна сприймати як перехідний етап до справжніх редакторів-програм, які ти користатимеш у справжній розробці.

Редактори Коду як Окремі Програми

Такі редактори найкраще підійдуть для просунутих студентів, які мають досвід роботи з React.js. Користаючи такий редактор під час навчання, ти моделюєш справжню розробку для замовників. Бо тоді треба:

• Редактор коду встановити і налаштувати.
• Створити навчальний проєкт на React.js як новий і теж налаштувати в ньому все з нуля.
• Або скачати заготовку навчального проєкту і налаштувати її для запуску.
• Довстановити певні допоміжні програми, без яких проєкт на React.js не запуститься.

А з іншого боку: якщо в тебе є досвід із React.js, то ти й так умієш працювати з редакторами коду. Навіщо їх користати ще й для навчання, якщо з онлайн-редакторами чи вбудованими живими прикладами не треба налаштувань і уроки проходитимуть швидше?

В Яких Середовищах Може Працювати React?

Офіційна документація каже, що на React.js можна створювати зовнішні вигляди для веб- і мобільних додатків.

У випадку веб-додатків React.js працює там, де й звичайні веб-сторінки на HTML, CSS і JavaScript. Тобто, в браузерах. І надалі, говорячи про вивчення React.js, я матиму на увазі середовище веб-браузерів.

Для розробки UI мобільних додатків є інший інструмент – React Native. Він допомагає користати React.js у мобільній розробці. Але це окрема тема, і її тут не розглядаємо.

Чи Вивчати Файлову Будову Додатків на React.js?

Нема одної визначеної й найкращої ідеї, як організувати файли й теки, з яких складаються додатки на React.js. А якби така файлова будова й існувала, то все одно вона змінюється у процесі розробки. Тому не бачу сенсу в спеціальному вивченні якихось файлових архітектур для додатків React.js.

Тренуючись розробляти на React.js, ти бачитимеш, як організовані файли й теки в додатках. І з часом випрацюєш таку будову, яка буде зрозуміла й найзручніша тобі. Я поділюся своїми принципами:

• Один файл = одна незалежна частина додатку (компонент, функція чи група схожих функцій).
• Коли таких файлів стане багато, їх можна групувати в теки (наприклад: компоненти, функції). Всередині тек можна робити підгрупи (наприклад, у компонентах: кнопки, списки, форми, каркаси веб-сторінок тощо).

З досвідом ти запам’ятаєш найпоширеніші складові частини додатків на React.js (файли) і як їх групувати (теки). І на початку розробки нових UI створюватимеш заздалегідь файли й теки для цих частин.

Які є Теми у Вивченні React.js?

Орієнтуємося на теми в офіційній документації React.js. Чи треба визубрити її зразу всю? – Звичайно, ні. А які теми достатньо вивчити для початку розробки свого додатку чи пошуку замовників? – Документація в своєму першому розділі знайомить із 80% можливостей React.js, які застосовуються в розробці щоденно.

Цей вступ складається з одного теоретичного допису, в якому є багато прикладів живого коду, з якими можеш експериментувати. І двох наступних практичних, де ти створиш два додатки на React.js і відпрацюєш на практиці ті самі 80% можливостей.

Взагалі, всі теми React.js можна згрупувати в такі розділи:

• Розробка зовнішнього вигляду веб-сторінок: розмітка і стилі.
• Оживлення веб-сторінок, щоби вони реагували на різні події: відвідувачів, відповідей сервера тощо.
• Показ і оновлення змінних даних на веб-сторінках (цифри, тексти тощо). Також оновлення зовнішнього вигляду самих веб-сторінок.
• Деякі дії з веб-сторінками, які треба робити поза React.js.

Ці групи тем є в документації React.js, і кожна складається з набору дописів. У тих дописах ти пізнаєш глибше кожну з “80% щоденних можливостей” і дізнаєшся про решту 20%.

Вивчення Тем із Документації React.js як Підготовка до Співбесід

Уяви, що ти на співбесіді з замовником. І кожна тема з довідки React.js: її дописи, заголовки, підзаголовки – це питання, які тобі ставить замовник. Що ти відповідатимеш?

А відповіді знаходяться в текстах дописів довідки. Тому, коли я читаю документацію, то роблю так:

• Відкриваю допис, читаю все до кінця, виконую вправи (якщо є).
• Гортаю до початку допису і пробую переказати, орієнтуючись на заголовки як питання співбесіди.
• Якщо переказую 80% правильно, можна переходити до наступного допису / теми.

І так по колу. Якщо котрийсь допис уже мені відомий, то змінюю місцями перші 2 пункти. Тобто, спочатку його переказую, а коли якусь частину не пам’ятаю – то читаю її ще раз і знову переказую.

А коли вивчиш документацію React.js більш-менш добре, то на справжніх співбесідах цікаво ставити спеціалістам замовника зустрічні питання з якихось тонких нюансів. І вже ти дивитимешся, як відповідатимуть ті, хто щойно опитували тебе: “Е-е-е, у-у-у” чи нормально.

Закріплення і Перевірка Знань під час Вивчення React.js

Найкраще зміцнення знань при вивченні React.js – це розробляти якийсь повноцінний додаток: тренувальний чи свій. Наприклад, береш відомий тобі сайт або знаходиш безкоштовні шаблони на HTML і пробуєш переписати їхній зовнішній вигляд на React.js. Потім додаєш у своє портфоліо.

Але:

• Ти можеш не знати, як створювати якусь частину сайту, бо відповідна тема з довідки React.js іще не вивчалася.
• Тренувальний проєкт може користати не всі ті можливості React.js, які описує той допис із довідки, який ти зараз читаєш. Таким чином, ти тренуєш на практиці лише якусь частину з вивченого. А як натренувати іншу?

Тут або для тренувального проєкту самостійно придумувати додатковий функціонал, який використає ті самі “інші” можливості React.js. Або практикуватися інакше – на тестах, вікторинах, вправах:

• Тести (складність найлегша): вставити правильну відповідь або дописати шмат коду, щоби запрацювало.
• Вікторини (складність середня): відповісти на задану кількість питань. Може бути обмеження за часом.
• Вправи (складність вища) – це як частини справжньої розробки: написати код із нуля чи дописати, виправити щось у готовому.

Так, у кожному дописі з довідки React.js є живі приклади коду і вправи, які тренують усе, про що дізнаєшся в дописі. В інших навчальних матеріалах можуть бути і тести з вікторинами.

Тести, вікторини, вправи і тренувальні додатки – це як сходинки до повноцінної розробки на React.js. У них поступово збільшується складність. Тести є найлегшими, а тренувальні додатки – найскладнішими, бо стоять найближче до справжньої розробки.

Матеріали для Вивчення React.js

Офіційні документація й блог, курси, спільноти, інші блогери – що і коли обирати для вивчення React.js? Моя порада – і документацію, і курси. Хай вони йдуть одночасно, 50 на 50. А якщо все одно лишаться питання, то можна шукати відповідей у блогерів і консультантів.

Офіційна Документація React.js

Почни з неї, бо так зразу потрапиш у бойові умови, де інформацію треба шукати і вивчати самостійно. Документація є як найповніший курс React.js, який оновлюється завжди і найперше серед усіх навчань-конкурентів. У ній є розділи і для новачків, і для досвідчених:

• Розділ Quick Start – це для повних новачків. Ти знайомишся з React.js відразу на практиці, створивши 2 додатки. Освоїш найголовніші можливості React.js, які розробники застосовують у своїй роботі щодня.
• Розділ Learn – для середнього рівня, хто знайомі з React.js і мають досвід розробки. Ти заглибишся в усі можливості бібліотеки й розумітимеш, як усе працює під капотом.
• Розділ Reference – для вищого рівня. Теж усі можливості React.js, але у формі довідника. Написано сухою технічною мовою з безліччю прикладів коду. Тут знайдеш відповіді на всі можливі тонкі нюанси, рідкісні випадки застосування React.js, які навіть не описані в розділі Learn. Щоби розуміти довідник, тобі бажано мати досвід розробки таких UI, які вимагали би вивертати React.js навиворіт і вичавлювати з нього все.

Платні Курси, Тренінги

Їх можна брати, закінчивши в документації розділ Quick Start і проходячи Learn. Курси цікаві авторським досвідом: як автор розуміє React.js, які задачі вирішував, які прийоми застосовував? Окрім цього, я беру курси тоді, коли в мене лишаються питання після вивчення якоїсь частини документації React.js. Я задаю їх автору і колегам-студентам.

Ще курси знайомлять із додатковими інструментами розробки UI. Бо React.js не покриває всього функціоналу, який є в UI-додатках, наприклад: отримання даних від сервера, поділ UI на веб-сторінки і зшиття їх у один додаток. А інколи треба покращити чи розширити й деякі функції самого React.js, наприклад: роботу з даними всередині UI. Курси навчать, як встановити, налаштувати й користати такі інструменти.

Оновлення Своїх Навичок із React.js

У React.js є офіційний блог, який публікує описи всіх оновлень. Але не існує якогось визначеного графіку, коли яке оновлення виходить. Просто заглядай у блог зі зручною тобі періодичністю.

Кожне оновлення React.js – це окремий допис у блозі. В цьому дописі є детальні описи всього, що оновилося чи прибралося. Кожне оновлення має:

• Заголовок.
• Опис, що це за оновлення і чому його ввели.
• Приклади коду, як це оновлення користати під час розробки UI.
• Нотатки (виділені фоном): якісь особливо важливі деталі даного оновлення.
• Посилання на ті теми з документації React.js, які дане оновлення зачіпає.

Всі дописи про оновлення схожі на ті, які є в документації React.js. І ми вивчаємо ці дописи й розбираємо приклади коду так само.

Куди Рухатися Після Вивчення React.js?

Як згадувалося вище, однієї бібліотеки React.js недостатньо для розробки сучасних веб-UI. Наступні інструменти можна вивчати, засвоївши React.js на більш-менш впевненому рівні (хоча би розділи Quick Start і Learn React документації).

Почнемо з інструментів, які згадуються вище, в розділі про курси і тренінги для вивчення React.js. Це бібліотеки для розробки окремих частин UI, покращення і розширення деяких можливостей самого React.js.

Далі непогано вивчити кращі прийоми (шаблони) використання React.js. Щоби вміти швидко вирішувати найпоширеніші завдання з розробки UI.

Бібліотеки Типових Компонентів UI на React.js

Це такі готові компоненти, як: форми, кнопки, галереї тощо. А бібліотеки – React Bootstrap, Material UI та інші.

Вони економлять час і прибирають багато рутини, бо ці компоненти не треба розробляти з нуля, а тільки злегка підлаштувати до розроблюваного UI. Такі бібліотеки компонентів користаємо як довідники, тому зазубрювати їх не треба.

Фреймворки на базі React.js

Наприклад, Next.js.

Вони ще більше спрощують розробку, бо включають у себе і React.js, і додаткові бібліотеки (дивись вище). Із фреймворками не треба тратити час на встановлення і налаштування всієї цієї купи бібліотек. Натомість ти зосереджуєшся суто на розробці логіки твого додатку.

Висновок

У цьому дописі йдеться про вивчення React.js саме для розробки зовнішнього вигляду веб-додатків. Розробку мобільних додатків не розглядаємо.

Головною метою вивчення React.js може бути вміння розробити веб-UI будь-якої складності. Тобто, втілювати все, що придумають замовники й намалюють веб-дизайнери.

Веб-додатки складаються з різних бібліотек. Але React.js – однакова для всіх, тому її треба вивчити спершу і найкраще. Щоби почати вивчати React.js, достатньо знати HTML, CSS і базовий JavaScript.

Починати навчання краще з практики: на тестах, вікторинах, вправах, проєктах (своїх чи навчальних). А теорію дізнаємося поступово, щоби глибше розуміти те, з чим стикаємось на практиці.

Писати код під час вивчення React.js найзручніше в онлайн-редакторах: вони схожі на справжні, але їх не треба встановлювати на комп’ютер. І React.js у них вже, як правило, налаштований і готовий до використання.

Файлову будову додатків на React.js можна не вивчати наперед, бо в процесі розробки вона всеодно зміниться. Є базові принципи: один файл – одна частина додатку (незалежна), і групування схожих частин у теки. А з часом кожен розробник випрацює власний підхід.

Теми для вивчення беремо з офіційної документації React.js. Вони об’єднані в 4 групи: власне розробка UI, оживлення веб-сторінок, відображення змінних даних і деякі дії з веб-сторінкою поза React.js. Кожну тему, її заголовки-підзаголовки можна розглядати як питання на співбесіді й тренуватися відповідати на них.

Найкращий матеріал для вивчення React.js – це офіційна документація, бо вона містить все і оновлюється найпершою. Курси підходять для знайомства з авторським досвідом: задачами, підходами до рішень, розумінням React.js. Тому користаємо документацію й курси разом (50 на 50).

Вчасно оновлювати свої знання (швидше, ніж автори курсів) найліпше з офіційного блогу React.js. Там кожне оновлення – це окремий допис, як у довідці: з прикладами коду й поясненнями. Тому розбираємо й вивчаємо оновлення так само, як і довідку.

По вивченні React.js на рівні, що вмітимеш розробляти веб-сторінки з нуля, можна починати знайомство з тими самими додатковими інструментами розробки UI. Наприклад: набори типових компонентів, розширення деяких можливостей React.js, фреймворки на базі React.js тощо. Вони забирають багато рутини, роблять розробку швидшою й приємнішою.

Успіхів тобі у вивченні React.js! Напиши в коментарях, як тобі цей допис і які питання ще треба розкрити.