Какво е ReactJS?

ReactJS или React е Javascript библиотека, която се използва за изграждане на потребителски интерфейси (интерфейси), така че React е библиотека, а не рамка. Самият Reactjs е разработен от Facebook (публично издание на 29 май 2013 г.). React е създаден от Jordan Walke, софтуерен инженер във Facebook, който пусна ранен прототип на React, наречен „FaxJS“. React може да се използва и като основа за разработка на уеб или мобилни приложения. Въпреки това, React се занимава само с управление на състоянието и изобразяване на това състояние в DOM, така че изграждането на приложение на React обикновено изисква използването на допълнителни библиотеки за маршрутизиране и определена функционалност от страна на клиента.

Ето нещата, които са важни в реакцията:

1. Компоненти

Може да се каже, че компонентите са много важни в reactjs. Компонентът е концепция за това как всяка част от потребителския интерфейс (изглед) да работи независимо и изолирано от другите части.

Съзнателно или несъзнателно, тези, които често работят с HTML код, винаги отделят части от страниците като заглавка, съдържание и долен колонтитул. Обикновено целта е кодът да не се натрупва на една страница, така че да бъде разделен на по-малки, по-специфични файлове и кодът да може да се поддържа по-лесно, ако се направят подобрения.

СЪВЕТИ: Специално реагира дори на най-малките в дисплея, които се препоръчват да бъдат отделени. този компонент има многократна употреба, което прави ненужно разработчиците да копират една и съща страница или компонент отново и отново.

Ето илюстрация на компонент в reactjs:

2. JSX

JSX е разширение на javascript, което ни позволява да пишем HTML тагове в javascript.

В reactjs отиваме към JSX и може би има малка разлика в него, но за тези, които вече разбират HTML, това няма да изглежда трудно.

3. Виртуален DOM

Ако започнем да се гмурнем дълбоко в React, ще има въпроси за това какво е виртуален DOM? Виртуалният DOM е виртуално представяне на DOM. Тогава защо React използва виртуален DOM? Ето и обяснението:

Първо, JavaScript работи бързо, което кара JavaScript да се чувства бавен, когато обработва DOM. Какво е дом? DOM е представяне на потребителския интерфейс в нашето приложение. Накратко, самият DOM формуляр е дървовидна структура от данни, следователно, ако има промяна или актуализация на dom, това ще бъде бързо. Въпреки това, след промени в dom, елементите, които са променени от родител на дете, ще бъдат повторно изобразени, за да актуализират потребителския интерфейс в нашето приложение. Процесът на повторно изобразяване или повторно рисуване на потребителския интерфейс е това, което го прави бавен. Ето илюстрация от DOM:

Но в React React създава виртуален DOM, за да ускори нещата. React изпълнява всички операции във виртуалния DOM. След като операцията приключи, React записва промените в DOM.

Ето процеса в React, ако даден елемент се промени в DOM:

1. React вече има представяне на DOM във виртуалния DOM.

2. React приема DOM представяне, съдържащо промените.

3. React сравнява разликите между старите и новите представяния.

4. Резултатите от сравнението се въвеждат в опашката.

5. Накрая React ще рендерира отново корекцията в DOM

Аналогията е следната, имам молив и маркер. Когато пиша на хартия с маркер и направя печатна грешка в средата на абзац, тогава трябва да я заменя с нова хартия и да пиша отново от началото. Но ако използвам молив (да кажем, че React използва Virtual DOM), мога да изтрия грешката с гумичка, без да започвам отначало.

4. Състояния и жизнен цикъл

Държавата е произходът на данните. Компонентите в React разбира се се нуждаят от данни (не всички, но средно се нуждаят от данни). Данните могат да идват отвсякъде. Държавата е един такъв източник на данни. В допълнение към данните за състоянието от компонентите могат да идват и от подпори (не свойства).

Има три жизнени цикъла в компонент в React, а именно:

1. Инициализация/монтиране (когато даден компонент е създаден/добавен за първи път в DOM)

2. Актуализиране/изобразяване (когато има промяна на състояние/реклама, която води до промяна в DOM)

3. Демонтиране (когато компонентът е премахнат от DOM)

Във всеки от тези жизнени цикли компонентът react ще изпълнява различни методи/функции, които наричаме методи на жизнения цикъл. Някои методи имат префикси will и did, които показват кога методът ще бъде изпълнен.

Продължете в следващата част....

Справка:
https://reactjs.org/docs/create-a-new-react-app.html