React Functional Components, Props и JSX - React.js Урок за начинаещи

React е една от най-популярните JavaScript библиотеки за изграждане на потребителски интерфейси.

Ако искате да станете разработчик отпред или да си намерите работа за уеб разработка, вероятно ще се възползвате от изучаването на React задълбочено.

В тази публикация ще научите някои от основите на React като създаване на компонент, синтаксис JSX и Props. Ако нямате или имате малък опит с React, тази публикация е за вас.

За начало, ето как можете да инсталирате React.

Какво е JSX?

Първото нещо, което ще осъзнаете след инсталирането на първия си проект на React е, че функцията JavaScript връща някакъв HTML код:

function App() { return ( 

Edit src/App.js and save to reload.

); }

Това е специално и валидно разширение на синтаксиса за React, което се нарича JSX (JavaScript XML). Обикновено във проекти, свързани с интерфейс, ние поддържаме HTML, CSS и JavaScript код в отделни файлове. В React обаче това работи малко по-различно.

В React проектите не създаваме отделни HTML файлове, защото JSX ни позволява да пишем HTML и JavaScript, комбинирани заедно в един и същ файл, както в примера по-горе. Можете обаче да отделите вашия CSS в друг файл.

В началото JSX може да изглежда малко странно. Но не се притеснявайте, ще свикнете.

JSX е много практичен, тъй като можем също така да изпълним всеки код на JavaScript (логика, функции, променливи и т.н.) вътре в HTML директно, като използваме фигурни скоби {}, по следния начин:

function App() { const text = 'Hello World'; return ( 

{text}

); }

Също така можете да присвоите HTML тагове на JavaScript променливи:

const message = 

React is cool!

;

Или можете да върнете HTML вътре в логиката на JavaScript (например, ако други случаи):

render() { if(true) { return 

YES

; } else { return

NO

; } }

Няма да навлизам в повече подробности за JSX, но не забравяйте да вземете предвид следните правила, докато пишете JSX:

  • HTML и компонентни маркери трябва винаги да бъдат затворени
  • Някои атрибути като „class“ стават „className“ (тъй като класът се отнася до JavaScript класове), „tabindex“ става „tabIndex“ и трябва да бъде написан camelCase
  • Не можем да върнем повече от един HTML елемент наведнъж, така че не забравяйте да ги увиете в родителски маркер:
return ( 

Hello

World

);
  • или като алтернатива можете да ги обвиете с празни тагове:
return (  

Hello

World

);

Можете също така да гледате моя урок React for Beginners за повече информация:

Какво представляват функционалните и класните компоненти?

След като свикнете със синтаксиса JSX, следващото нещо, което трябва да разберете, е базираната на компоненти структура на React.

Ако отново посетите примерния код в горната част на тази публикация, ще видите, че кодът JSX се връща от функция. Но функцията App () не е обикновена функция - тя всъщност е компонент. И така, какво е компонент?

Какво е компонент?

Компонентът е независим код за многократна употреба, който разделя потребителския интерфейс на по-малки части. Например, ако изграждахме потребителския интерфейс на Twitter с React:

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

React има два типа компоненти: функционалени клас. Нека разгледаме всеки сега по-подробно.

Функционални компоненти

Първият и препоръчителен тип компонент в React е функционалните компоненти. Функционалният компонент е основно JavaScript / ES6 функция, която връща React елемент (JSX). Според официалните документи на React, функцията по-долу е валиден функционален компонент:

function Welcome(props) { return 

Hello, {props.name}

; }

Като алтернатива можете също да създадете функционален компонент с дефиницията на функцията стрелка:

const Welcome = (props) => { return 

Hello, {props.name}

; }
Тази функция е валиден React компонент, тъй като приема единичен аргумент "props" (което означава свойства) с данни и връща React елемент. - реагирайте.org

За да можете да използвате компонент по-късно, първо трябва да го експортирате, за да можете да го импортирате някъде другаде:

function Welcome(props) { return 

Hello, {props.name}

; } export default Welcome;

След като го импортирате, можете да извикате компонента, както в този пример:

import Welcome from './Welcome'; function App() { return ( ); }

Така че функционален компонент в React:

  • е функция JavaScript / ES6
  • трябва да върне React елемент (JSX)
  • винаги започва с главна буква (конвенция за именуване)
  • взема реквизит като параметър, ако е необходимо

Какво представляват компонентите на класа?

Вторият тип компонент е компонентът на класа. Компонентите на класа са ES6 класове, които връщат JSX. По-долу виждате същата нашата функция за добре дошли, този път като компонент на класа:

class Welcome extends React.Component { render() { return 

Hello, {this.props.name}

; } }

За разлика от функционалните компоненти, компонентите на класа трябва да имат допълнителен метод render () за връщане на JSX.

Защо да използвам компоненти на класа?

Използвахме компоненти на класа заради "състояние". В по-старите версии на React (версия <16.8) не беше възможно да се използва състояние във функционални компоненти.

Следователно се нуждаехме от функционални компоненти само за изобразяване на потребителски интерфейс, докато бихме използвали компоненти на класа за управление на данни и някои допълнителни операции (като методи на жизнения цикъл).

Това се промени с въвеждането на React Hooks и сега можем да използваме състояния и във функционални компоненти. (Ще обхващам състоянието и куките в следващите си публикации, така че засега не ги притеснявайте).

Компонент на клас:

  • е клас ES6, ще бъде компонент, след като „разшири“ компонент React.
  • взема Props (в конструктора), ако е необходимо
  • трябва да има рендер ()метод за връщане на JSX

Какво представляват подпорите в React?

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

Но бъдете внимателни - подпорите транспортират само данни в еднопосочен поток (само от родителски към дъщерни компоненти). С реквизитите не е възможно да се предават данни от дете на родител или на компоненти на същото ниво.

Нека отново посетим функцията App () по-горе, за да видим как да предаваме данни с реквизит.

Първо, трябва да дефинираме опора за компонента за добре дошли и да му присвоим стойност:

import Welcome from './Welcome'; function App() { return ( ); }

Реквизитите са персонализирани стойности и те също правят компонентите по-динамични. Тъй като компонентът Welcome е дъщерно тук, трябва да дефинираме реквизит на неговия родител (App), така че да можем да предадем стойностите и да получим резултата, просто чрез достъп до "name" на prop:

function Welcome(props) { return 

Hello, {props.name}

; }

Реакционните реквизити са наистина полезни

Така че разработчиците на React използват реквизит за предаване на данни и те са полезни за тази работа. Но какво да кажем за управлението на данни? Реквизитът се използва за предаване на данни, а не за манипулиране с тях. Ще разгледам управлението на данни с React в моите бъдещи публикации тук на freeCodeCamp.

Междувременно, ако искате да научите повече за React & Web разработката, не се колебайте да се абонирате за моя канал в YouTube.

Благодаря ви, че прочетохте!