Реацт-ових пет прстију смрти. Овладајте ових пет концепата, а затим савладајте Реацт.

Пре неколико година, мој пријатељ Шон почео је да ми говори како ће ова потпуно нова фронт-енд библиотека под називом Реацт завладати мрежом. У почетку сам то одбацио као само још један хир оквира. Али онда сам почео да слушам о Реацт-у све више и више, до те мере да сам осећао да то игноришем, што више није опција.

Можда сте у истој позицији у којој сам био и ја: слушали сте о Реацт-у лево и десно, али заправо седећи и учећи да то делује као досадан посао.

Добра вест је да све што требате знати о Реацту можете свести на пет кључних концепата .

Немојте ме погрешно схватити, то не значи да вас могу одмах претворити у Реацт мајстора. Али бар ћете разумети све главне концепте ако одлучите да ускочите.

Пет кључних концепата су:

  1. Компоненте
  2. ЈСКС
  3. Реквизити и држава
  4. АПИ компоненте
  5. Врсте компонената

Пре него што започнемо, имајте на уму да сам првобитно научио Реацт на курсевима Вес Бос-а и укључио сам неколико повезаних веза до њих. Кад год је то могуће, укључио сам и линкове до бесплатних извора.

А мој пријатељ Сеан? Отада је прешао на много савременије ствари. На крају крајева, Реацт је тако 2015.

Концепт # 1: Како реагују компоненте Реацт-а

Прва ствар коју треба да знате о Реацт-у је да су све компоненте . Ваша база Реацт кода је у основи само једна велика гомила великих компоненти које позивају мање компоненте.

Али шта је компонента, питате се? Савршен пример компоненте је уобичајено ct> HTML element. Not only does it come with its own visual output (the grey box, text label, and downward arrow that make up the element itself) — it also handles its own opening and closing logic.

Now imagine being able to build your own self-contained custom ct>, with its own style and behavior:

Well, that’s exactly what React lets you do. A React component is a single object that not only outputs HTML like a traditional template would, but also includes all the code needed to control that output.

In practice, the most common way to write React components is as an ES6 class containing a render method that returns HTML. (There’s also a super-secret functional way, but you’ll have to wait until concept #4 to learn about it):

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

Hello World!

; }

}

Концепт # 2: Како ЈСКС ради

Као што видите, компонентни приступ значи да и ХТМЛ и ЈаваСцрипт код живе у истој датотеци. Реацт-ово тајно оружје за постизање овог нечастивог савеза је ЈСКС језик (где „Кс“ значи „КСМЛ“).

ЈСКС у почетку може изгледати незгодно, али навикнете се прилично брзо.

Да, знам. Сви смо научени да одржавамо чврсто раздвајање између ХТМЛ-а и ЈаваСцрипт-а. Али испоставило се да мало опуштање ових правила заправо може учинити чуда за вашу продуктивност на крају.

На пример, пошто сада на располагању имате пуну снагу ЈаваСцрипт-а, ево како можете приказати тренутни датум уметањем исечка ЈаваСцрипт-а у свој ХТМЛ помоћу {...}:

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

Today is: {new Date()}

; }
}

То такође значи да ћете за ifизразе или петље користити обични ЈаваСцрипт , а не неку врсту синтаксе специфичне за предложак. Овде је посебно користан ЈаваСцрипт тернарни оператор:

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

Hello {this.props.someVar ? 'World' : 'Kitty'}

; }
}

Успут, ако требате да разјасните најновије тачке синтаксе ЈаваСцрипт-а, препоручујем ЕС6 за све од Вес Бос-а (ако волите видео записе) или Працтицал ЕС6 од Ницолас-а Бевацкуа-е (ако више волите читати).

Концепт бр. 3: Како функционирају реквизити и држава

Можда сте се питали одакле this.props.someVarпотиче горња променљива.

Ако сте икада написали редак ХТМЛ-а, вероватно су вам познати ХТМЛ атрибути попут <; а> tag’с хреф. У Реацту су атрибути познати као реквизити (скраћеница од „својства“). Реквизити су начин на који компоненте међусобно разговарају.

class ParentComponent extends React.Component {
 render() { return ; }
}
class ChildComponent extends React.Component {
 render() { return 

And then I said, “{this.props.message}”

; }
}

Због тога је Реацтов ток података једносмеран : подаци могу ићи само од родитељских компоненти до њихове деце, а не обрнуто.

Понекад, међутим, компонента треба да реагује на податке који не потичу од родитељске компоненте (као што је на пример кориснички унос). И ту држава улази.

Добра метафора за разумевање разлике између реквизита и стања била би Етцх-А-Скетцх. За разлику од ствари попут боје тела и положаја бројчаника табле Етцх-А-Скетцх ( реквизити ), сам цртеж ( стање ) није својствено својство Етцх-А-Скетцх-а. То је само привремени резултат корисничког уноса.

Имајте на уму да се стање компоненте такође може пренети на сопствену децу као потпора . Можете ово замислити као велику реку која тече низбрдо, са рутером, слојем података и разним компонентама, који додају свој мали ток података како би формирали главно стање апликације.

Унутар компоненте, стањем се управља помоћу setStateфункције која се често назива унутар обрађивача догађаја:

class MyComponent extends React.Component {
 handleClick = (e) => { this.setState({clicked: true}); }
 render() { return Click me; }
}

У пракси ће велика већина података у апликацији Реацт бити ослонац . Тек када требате да прихватите унос корисника, користићете стање за руковање променом.

Имајте на уму да овде користимо масну стрелицу да бисмо се побринули за везивање handleClickруковаоца. Овде можете сазнати више о овој техници.

Концепт бр. 4: Како функционише компонентни АПИ

Већ смо споменули renderи setState, који су обојица део малог скупа компонентних АПИ метода. Још један користан је онај constructorкоји можете користити за иницијализацију стања и методе везивања.

Осим ове три функције, Реацт такође нуди и скуп повратних позива покренутих у различитим тачкама током животног циклуса компоненте (пре учитавања, након учитавања, након демонтаже итд.). Ако не радите неки напредни Реацт вуду, вероватно вам скоро никад неће бити потребно бринути.

Ако се овај одељак чини кратким, то је зато што је учење Реацт-а заправо много више савладавање програмских и архитектонских концепата, а не учење скупа досадних АПИ метода. Због тога је тако освежавајуће!

Концепт бр. 5: Како функционишу типови компонената

Видели смо како да користимо класе за дефинисање компоненте:

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

Hello World!

; }

}

Такође смо разговарали о методама компонената које подржавају ове класе. Сад заборавите све на њих! Све више и више људи пишу компоненте Реацт као функционалне компоненте .

Функционална компонента је функција која узима propsобјект као аргумент и враћа хрпу ХТМЛ-а. Готово као традиционални шаблон, са кључном разликом што и даље можете користити било који ЈаваСцрипт код који вам треба унутар те функције:

const myComponent = props => {
 return 

Hello {props.name}! Today is {new Date()}.

}

Последица употребе синтаксе функционалне компоненте је да губите приступ методама компонената о којима смо управо говорили. Али испоставило се да је то у пракси сасвим у реду, јер велика већина ваших компоненти вероватно неће требати.

Иначе, једна од ових метода јесте setState, а то значи да функционалне компоненте не могу имати стање. Из тог разлога се често називају функционалним компонентама без држављанства .

Будући да функционалне компоненте захтевају много мање бојног кода, има смисла користити их кад год је то могуће. Из тог разлога већина апликација Реацт садржи здраву мешавину обе синтаксе.

Имајте на уму да постоји и трећа, наслеђена синтакса која користи createClassфункцију. Али свакога ко га користи треба осрамотити и прозивати ако се усуђује да и даље користи обрасце кодирања од пре 18 месеци:

var Greeting = React.createClass({ render: function() { return 

Hello, {this.props.name}

; }
});

Концепт # 6: Како функционишу компонентне улоге

ОК, лагала сам. Заправо постоји шест ствари, а не пет. Али шта да кажем, филм се не зове „Шест прстију смрти“. Иако сада кад размислим, то звучи као да би то био прилично кул филм, који вероватно укључује неку врсту ванземаљског кунг-фу мајстора који тражи освету.

Али, вратимо се на тему која је при руци. Сада долазе досадни архитектонски концепти о којима сам говорио. Па ако ништа од овога нема смисла, слободно се вратите након што сте имали прилику да се још мало поиграте са Реацтом.

Након што су неко време користили Реацт, људи су почели да виде да се у њиховим компонентама појављују два различита „укуса“ кода: један укус се бавио логиком корисничког интерфејса, попут приказивања и скривања ствари. А друга се тицала логике података , као што је учитавање података са вашег сервера.

То је довело до разлике између контејнера и презентационих компонената (такође понекад познатих као „ паметне “ и „ глупе “ компоненте). Компоненте контејнера треба да обрађују ваше податке, али - и ово је важан део - не ваш кориснички интерфејс. Презентацијске компоненте су управо супротне.

Другим речима, у примеру класичног пописа обавеза једна компонента ће учитати податке, а затим их проследити другој компоненти која ће бити задужена за излаз стварног ХТМЛ означавања и руковање променама локалног стања.

Ово је врло слично обрасцу погледа / контролера који вам је могао бити познат из доба вашег бацк-енд програмера. ( 'члан Раилс?' члан Дјанго? )

Разлику контејнера / презентације популаризовао је у овом блогу Дан Абрамов (творац Редук-а) и препоручујем да то проверите ако желите да дубље истражите.

Компоненте вишег реда

Пре него што завршимо ствари, требало би да поразговарамо о врсти компонената контејнера познатих као компоненте вишег реда (често скраћене као ХоЦ).

ХоЦ је компонента коју можете омотати око друге компоненте да бисте јој пренели посебне реквизите и обично се креира помоћу фабричке функције компоненти вишег реда . Имајте на уму да људи саму функцију називају „ХоЦ“, што можда технички није 100% тачно, али у пракси није велика ствар.

Као пример, позивање withRouterфабричке функције Реацт Роутер-а nt>will wrap it in a new ponent)/> component that passes the Router prop to the afor e-mentioned &lt;MyComponent>.

You can think of a HoC function as a golf caddie that follows their golfer around and hands them the club they need it. By themselves, the caddie can’t actually do anything with the golf clubs. They’re just there to give the golfer access to more tools.

HoCs are a very powerful concept. For example, the Recompose library even lets you handle state changes through HoCs. In other words, you can now manage state without having to involve any ES6 class-based components.

With HoC composition becoming so common, it seems like React might be moving away from the ES6 class syntax and more towards a purely functional approach. Interesting times!

Recap

So let’s recap what we’ve just learned:

  • A React codebase is made up of components.
  • These components are written using JSX.
  • Data flows from parent to children, except when it comes to state, which originates inside a component.
  • Components possess a small set of lifecycle and utility methods.
  • Components can also be written as pure functions.
  • You should keep data logic and UI logic in separate components.
  • Higher-order components are a common pattern for giving a component access to new tools.

Believe it or not, we’ve just covered 90% of the knowledge used by a React developer on a daily basis. No matter how abstract or obscure the pattern, everything in React can always be boiled down to functions and props.

Once you truly understand this, React will stop being scary. You’ll be able to see patterns in the code, understand new codebases at a glance, and only then will you be able to proudly proclaim:

“Pfff! React is so 2015!”

Going Further

If I’ve managed to convince you that React isn’t so bad, you might want to take a stab at learning it properly. If so, I can’t recommend the React for Beginners video course enough. It’s how I learned React myself, and it’s actually just been updated to cover all the cool new stuff like functional stateless components:

If you don’t want your hard-earned dollars to finance the nefarious React lobby (I heard Dan Abramov is onto his third yacht), you can also learn for free by checking out this huge list of React resources.

And if you need to put all this newly-acquired knowledge in practice by contributing to a cool React open-source project, check out Telescope Nova. It’s the easiest way to quickly create a full-stack React + GraphQL app, complete with user accounts, forms, and data loading out of the box. And did I mention we’re looking for contributors?

Finally, if you’ve enjoyed this article, please share it and recommend it (that little green heart just below). And please let me know on Twitter what you’d like me to write about next!