Пълно ръководство за реагиране на начинаещи

Снимка на Александър Андрюс на Unsplash

Искам да се върна в писането на повече техническо съдържание. React е една от любимите ми технологии, затова реших, че ще създам интродукция React! Тази публикация изисква познаване на HTML и JavaScript. Аз съм на твърдото мнение, че трябва да знаете това, преди да преминете към библиотеки като React!

Какво е React

React е библиотека с JavaScript, построена през 2013 г. от екипа за развитие на Facebook. React искаше да направи потребителските интерфейси по-модулни (или за многократна употреба) и по-лесни за поддръжка. Според уебсайта на React, той се използва за „Изграждане на капсулирани компоненти, които управляват собственото им състояние, след което ги композира, за да направи сложни потребителски интерфейси“

Ще използвам много примери от Facebook в тази публикация, тъй като те написаха React на първо място!

Спомняте ли си, когато Facebook премина от харесвания към реакции? Вместо да можете да харесвате публикации, сега можете да реагирате със сърце, с усмихнато лице или подобно на всеки пост. Ако тези реакции са направени предимно в HTML, ще бъде огромна работа да промените всички тези харесвания към реакциите и да се уверите, че работят.

Тук идва React. Вместо да прилагаме „разделяне на проблемите“, в React имаме различна архитектура. Тази архитектура увеличава модулността въз основа на структурата на компонента.

Днес ще поддържаме CSS разделен, но дори можете да направите този компонент специфичен, ако искате!

Реагирайте срещу ваниловия JavaScript

Когато говорим за „vanilla“ JavaScript, обикновено говорим за писане на JavaScript код, който не използва допълнителни библиотеки като JQuery, React, Angular или Vue. Ако искате да прочетете повече за тези и какво представлява рамката, имам публикация за всички уеб рамки.

Няколко бързи бележки, преди да започнем

  • За да направите този урок малко по-кратък, някои примери за кодове имат ... преди или след тях. Това означава, че пропуснахме някакъв код.
  • Използвам Git diff на някои места, за да покажа редове от код, които ще се променят. Ако копирате и минавате, трябва да изтриете + в началото на реда.
  • Имам пълни CodePens с завършените версии на всеки раздел - така че можете да ги използвате, за да играете догонване!
  • По-усъвършенстваните концепции, които не са от съществено значение за урока, са в блокове. Това са интересни факти!

Настройвам

Ако създавате производствено приложение React, ще искате да използвате инструмент за изграждане като Webpack. Webpack ще групира вашия код, тъй като React използва някои модели, които няма да работят по подразбиране в браузъра. Create React App е много полезен за тези цели, тъй като прави по-голямата част от конфигурацията за вас!

Засега ще използваме React CDN, което е само за целите на развитието! Ще използваме и Babel CDN, за да можем да използваме някои нестандартни функции на JavaScript (за това ще говорим по-късно!).

Сега, нека да стигнем до нашия React код!

клас HelloWorld разширява React.Component {
  render () {
    // Казва реагира какъв HTML код да изобразява
    връщане 

Здравей, света

  }
}
// Rells React да прикачи компонента HelloWorld към HTML кода на 'root'
ReactDOM.render (, document.getElementById ("корен"))

Всичко, което се случва е, че "Hello World" се показва като H1 на страницата!

Нека да разгледаме какво става тук

Първо, използваме клас ES6, който наследява от класа React.Component. Това е модел, който ще използваме за повечето от нашите компоненти на React.

На следващо място, в нашия клас имаме метод - и неговият специален метод, наречен render. React търси метода за рендиране, за да реши какво да изобрази на страницата! Името има смисъл. Каквото и да е върнато от този метод на рендериране, ще бъде направено от този компонент.

В този случай връщаме H1 с текста на "Hello World" - точно това би било в HTML файла нормално.

И накрая, имаме:

ReactDOM.render (, document.getElementById ("корен"))

Използваме функционалността ReactDOM, за да прикачим нашия реактивен компонент към DOM.

React използва нещо, наречено виртуална DOM, което е виртуално представяне на DOM, с което обикновено бихте взаимодействали във Ванили JavaScript или JQuery. Този reakctDOM.render прави този виртуален DOM в действителния DOM. Зад кулисите React върши много работа за ефективно редактиране и рендериране на DOM, когато нещо в интерфейса трябва да се промени.

Нашият компонент изглежда като HTML таг! Този синтаксис е част от JSX, който е разширение на JavaScript. Не можете да го използвате в браузъра. Спомнете ли си как използваме Babel за нашия JavaScript? Babel ще преобразува (или конвертира) нашия JSX в обикновен JavaScript, за да може браузърът да го разбере.

JSX всъщност е незадължителен в React, но ще видите, че се използва в по-голямата част от случаите!

След това използваме вградения документ на JavaScript.getElementById на JavaScript, за да вземем нашия корен елемент, който създадохме в нашия HTML.

Като цяло, в това ReactDOM.render изявление, ние прикрепяме компонента си HelloWorld към нашия div, който създадохме в нашия HTML файл.

Стартов код

Добре - сега, когато направихме „Hello World“, можем да започнем с нашия Facebook компонент.

Първо, искам да си поиграете с тази демонстрация. Ще работим върху това през останалата част от урока. Чувствайте се свободни да погледнете и кода, но не се притеснявайте да не го разберете! За това е останалото ръководство!

Нека започнем с „твърдо кодиране“ на HTML за джаджа:

С някои добавени CSS това изглежда така:

Ето Codepen с пълния стартов код.

За целта на този урок ще създадем четири компонента: компонент Status, който ще бъде родител, компонент Like, който ще обхваща харесващата логика, и компонентът коментар, който ще съдържа логиката за въвеждане в коментар. Компонентът Like ще има и дете LikeIcon, което ще се покаже или ще бъде скрито при включване на бутона за харесване.

Компонентна архитектура

Нека да разделим HTML кода, който сме написали, на тези компоненти.

Ще започнем с обвивката на компонент и ще го направим също така, за да се уверим, че работи!

Една интересна забележка за горното е, че трябваше да променим „class“ атрибутите на „className“. Класът вече означава нещо в JavaScript - това е за класове ES6! Някои атрибути са именувани по различен начин в JSX, отколкото в HTML.

Можем също да изтрием съдържанието на нашия HTML, оставяйки само елемент с корен на ID - родителският div „content“ е предназначен само за стилизиране!

<Тяло>
  
    
  

Ето HTML, който ще влезе в компонента Status. Забележете, че някои от оригиналния HTML още не е налице - вместо това ще влезе в нашите подкомпоненти!

Нека създадем втори компонент и тогава ще го включим в нашия компонент на състоянието.

клас Коментар разширява React.Component {
  render () {
    връщане (