Π Π°Π·Π½ΠΎΠ΅

Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ react: Π§Π΅ΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ React ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², основанных Π½Π° классах?

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ / Π‘Π»ΠΎΠ³ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ RUVDS.com / Π₯Π°Π±Ρ€

Π’ ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· Π½Π°ΡˆΠΈΡ… ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² ΠΌΡ‹ Π·Π°Π΄Π°Π²Π°Π»ΠΈ Π²Π°ΠΌ вопрос ΠΎ Ρ‚ΠΎΠΌ, цСлСсообразно Π»ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π° Π±Π°Π·Π΅ этого курса ΠΏΠΎ React ΡΠ΅Ρ€ΠΈΡŽ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹Ρ… ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΉ. Π’Ρ‹ Π½Π°ΡˆΡƒ идСю ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠ°Π»ΠΈ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ сСгодня ΠΌΡ‹ прСдставляСм Π²Π°ΡˆΠ΅ΠΌΡƒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ курса. Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ….

β†’ Π§Π°ΡΡ‚ΡŒ 1: ΠΎΠ±Π·ΠΎΡ€ курса, ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹ популярности React, ReactDOM ΠΈ JSX

β†’ Π§Π°ΡΡ‚ΡŒ 2: Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

β†’ Π§Π°ΡΡ‚ΡŒ 3: Ρ„Π°ΠΉΠ»Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², структура ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 4: Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΈ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

β†’ Π§Π°ΡΡ‚ΡŒ 5: Π½Π°Ρ‡Π°Π»ΠΎ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, основы стилизации

β†’ Π§Π°ΡΡ‚ΡŒ 6: ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… особСнностях курса, JSX ΠΈ JavaScript

β†’ Π§Π°ΡΡ‚ΡŒ 7: встроСнныС стили

β†’ Π§Π°ΡΡ‚ΡŒ 8: ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, знакомство со свойствами ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 9: свойства ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 10: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ со свойствами ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ стилизации

β†’ Π§Π°ΡΡ‚ΡŒ 11: динамичСскоС Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄ массивов map

β†’ Π§Π°ΡΡ‚ΡŒ 12: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ, Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ

β†’ Π§Π°ΡΡ‚ΡŒ 13: ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, основанныС Π½Π° классах

β†’ Π§Π°ΡΡ‚ΡŒ 14: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ ΠΏΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ, основанным Π½Π° классах, состояниС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 15: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌΡ‹ ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с состояниСм ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 16: Ρ‡Π΅Ρ‚Π²Ρ‘Ρ€Ρ‚Ρ‹ΠΉ этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° событий

β†’ Π§Π°ΡΡ‚ΡŒ 17: пятый этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, модификация состояния ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 18: ΡˆΠ΅ΡΡ‚ΠΎΠΉ этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ

β†’ Π§Π°ΡΡ‚ΡŒ 19: ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 20: ΠΏΠ΅Ρ€Π²ΠΎΠ΅ занятиС ΠΏΠΎ условному Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Ρƒ

β†’ Π§Π°ΡΡ‚ΡŒ 21: Π²Ρ‚ΠΎΡ€ΠΎΠ΅ занятиС ΠΈ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ ΠΏΠΎ условному Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Ρƒ

β†’ Π§Π°ΡΡ‚ΡŒ 22: сСдьмой этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ· Π²Π½Π΅ΡˆΠ½ΠΈΡ… источников

β†’ Π§Π°ΡΡ‚ΡŒ 23: ΠΏΠ΅Ρ€Π²ΠΎΠ΅ занятиС ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ

β†’ Π§Π°ΡΡ‚ΡŒ 24: Π²Ρ‚ΠΎΡ€ΠΎΠ΅ занятиС ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ

β†’ Π§Π°ΡΡ‚ΡŒ 25: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ

β†’ Π§Π°ΡΡ‚ΡŒ 26: Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½ Container/Component

β†’ Π§Π°ΡΡ‚ΡŒ 27: курсовой ΠΏΡ€ΠΎΠ΅ΠΊΡ‚

ЗанятиС 6. Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

β†’ ΠžΡ€ΠΈΠ³ΠΈΠ½Π°Π»

На ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ практичСском занятии ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ вСсь JSX-ΠΊΠΎΠ΄, Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ HTML-элСмСнты, Π² Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° ReactDOM.render(). Π’ нашСм случаС Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Ρ‘Ρ‚ ΠΎ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ спискС, Ρ‚Π°ΠΊΠΎΠΌ, описаниС ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ прСдставлСно Π½ΠΈΠΆΠ΅.

import React from "react"
import ReactDOM from "react-dom"

ReactDOM.render(
 Β <ul>
 Β Β Β <li>1</li>
 Β Β Β <li>2</li>
 Β Β Β <li>3</li>
 Β </ul>,
 Β document.getElementById("root")
)

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ сСбС, Ρ‡Ρ‚ΠΎ Π½Π°Π΄ΠΎ вывСсти, ΠΏΠΎΠ»ΡŒΠ·ΡƒΡΡΡŒ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠΌ, Ρ†Π΅Π»ΡƒΡŽ Π²Π΅Π±-страницу, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ сотни элСмСнтов. Если это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Ρ‚ΠΎ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ практичСски Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. Когда ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°Ρ… популярности React, ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π½ΠΈΡ… Π±Ρ‹Π»Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° этой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², подходящих для ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ использования. БСйчас ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ React.

Π­Ρ‚ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Β«Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈΒ» ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ ΠΈΡ…, конструируя особыС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ.

Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π½ΠΎΠ²ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΈ Π΄Π°Π΄ΠΈΠΌ Π΅ΠΉ имя MyApp:

import React from "react"
import ReactDOM from "react-dom"

function MyApp() {
 Β 
}

ReactDOM.render(
 Β <ul>
 Β Β Β <li>1</li>
 Β Β Β <li>2</li>
 Β Β Β <li>3</li>
 Β </ul>,
 Β document.getElementById("root")
)

Имя Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ сдСлано ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊΠΈ ΠΏΠΎ Ρ‚ΠΎΠΉ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅, Ρ‡Ρ‚ΠΎ здСсь ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ схСма имСнования Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ-конструкторов. Π˜Ρ… ΠΈΠΌΠ΅Π½Π° (фактичСски β€” ΠΈΠΌΠ΅Π½Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²) Π·Π°ΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ Π² Π²Π΅Ρ€Π±Π»ΡŽΠΆΡŒΠ΅ΠΌ стилС β€” ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π±ΡƒΠΊΠ²Ρ‹ слов, ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠ½ΠΈ состоят, Π΄Π΅Π»Π°ΡŽΡ‚ΡΡ Π·Π°Π³Π»Π°Π²Π½Ρ‹ΠΌΠΈ, Π² Ρ‚ΠΎΠΌ числС β€” пСрвая Π±ΡƒΠΊΠ²Π° ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ слова. Π’Π°ΠΌ слСдуСт строго ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ этого соглашСния ΠΎΠ± ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ.

Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ устроСны довольно просто. А ΠΈΠΌΠ΅Π½Π½ΠΎ, Π² Ρ‚Π΅Π»Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΠΌΠ°Π½Π΄Π°, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΡŽΡ‰Π°Ρ JSX-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈ прСдставляСт ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚.

Π’ нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ достаточно Π²Π·ΡΡ‚ΡŒ ΠΊΠΎΠ΄ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка ΠΈ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΎΠ·Π²Ρ€Π°Ρ‚ этого ΠΊΠΎΠ΄Π° ΠΈΠ· Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ это ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ:

function MyApp() {
 Β return <ul>
 Β Β Β <li>1</li>
 Β Β Β <li>2</li>
 Β Β Β <li>3</li>
 Β </ul>
}

И хотя Π² Π΄Π°Π½Π½ΠΎΠΌ случаС всё Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ оТидаСтся, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ, ΠΊΠΎΠΌΠ°Π½Π΄Π° return Π²Π΅Ρ€Π½Ρ‘Ρ‚ вСсь этот ΠΊΠΎΠ΄, рСкомСндуСтся Π·Π°ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ конструкции Π² ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ скобки ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π΅Ρ‰Ρ‘ ΠΎΠ΄Π½ΠΎ соглашСниС, принятоС Π² React ΠΏΡ€ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠΎΠ΄Π° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ. Оно Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ элСмСнты ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽΡ‚ Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… строках ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°ΡŽΡ‚. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ примСнСния Π²Ρ‹ΡˆΠ΅ΠΎΠΏΠΈΡΠ°Π½Π½Ρ‹Ρ… ΠΈΠ΄Π΅ΠΉ ΠΊΠΎΠ΄ нашСго Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

function MyApp() {
 Β return (
 Β Β Β <ul>
 Β Β Β Β Β <li>1</li>
 Β Β Β Β Β <li>2</li>
 Β Β Β Β Β <li>3</li>
 Β Β Β </ul>
 Β )
}

ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ возвращаСмая ΠΈΠ· ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° оказываСтся ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠ΅ΠΉ Π½Π° ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, Π² ΠΌΠ΅Ρ‚ΠΎΠ΄Π΅ ReactDOM.render(), ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ экзСмпляр нашСго Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, ΠΏΠ΅Ρ€Π΅Π΄Π°Π² Π΅Π³ΠΎ этому ΠΌΠ΅Ρ‚ΠΎΠ΄Ρƒ Π² качСствС ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ Π·Π°ΠΊΠ»ΡŽΡ‡ΠΈΠ² Π΅Π³ΠΎ Π² JSX-Ρ‚Π΅Π³.

import React from "react"
import ReactDOM from "react-dom"

function MyApp() {
 Β return (
 Β Β Β <ul>
 Β Β Β Β Β <li>1</li>
 Β Β Β Β Β <li>2</li>
 Β Β Β Β Β <li>3</li>
 Β Β Β </ul>
 Β )
}

ReactDOM.render(
 Β <MyApp />,
 Β document.getElementById("root")
)

МоТно Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ‚ΡƒΡ‚ использован ΡΠ°ΠΌΠΎΠ·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ Ρ‚Π΅Π³. Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠ΅ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ структуру, ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ конструкции строятся ΠΈΠ½Π°Ρ‡Π΅, Π½ΠΎ ΠΏΠΎΠΊΠ° ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊΠΈΠΌΠΈ ΡΠ°ΠΌΠΎΠ·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΠΈΡΡ Ρ‚Π΅Π³Π°ΠΌΠΈ.

Если ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ страницу, ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ срСдствами Π²Ρ‹ΡˆΠ΅ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, Ρ‚ΠΎ Π΅Ρ‘ внСшний Π²ΠΈΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅, ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ½ Π±Ρ‹Π» Π΄ΠΎ выноса Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚.

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΡŽΡ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, подчиняСтся Ρ‚Π΅ΠΌ ΠΆΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ рассматривали Π² ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΊ ΠΏΠ΅Ρ€Π²ΠΎΠΌΡƒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρƒ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° ReactDOM.render(). Π’ΠΎ Π΅ΡΡ‚ΡŒ β€” нСльзя, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² Π½Π΅ΠΉ присутствовали JSX-элСмСнты, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ Π·Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ. ΠŸΠΎΠΏΡ‹Ρ‚ΠΊΠ° ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ послС элСмСнта <ul> любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ элСмСнт, скаТСм β€” <ol>, ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Ρ‚ ΠΊ ошибкС. Π˜Π·Π±Π΅ΠΆΠ°Ρ‚ΡŒ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ ΠΌΠΎΠΆΠ½ΠΎ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, просто ΠΎΠ±Π΅Ρ€Π½ΡƒΠ² всё, Ρ‡Ρ‚ΠΎ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, Π² элСмСнт <div>.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ ΡƒΠΆΠ΅ Π½Π°Ρ‡Π°Π»ΠΈ ΠΎΡ‰ΡƒΡ‰Π°Ρ‚ΡŒ Ρ‚ΠΎ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΌΠΎΡ‰Π½Ρ‹Π΅ возмоТности Π΄Π°Ρ‘Ρ‚ Π½Π°ΠΌ использованиС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Π’ частности, Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Ρ‘Ρ‚ ΠΎ создании собствСнных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ содСрТат Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ JSX-ΠΊΠΎΠ΄Π°, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ собой описаниС HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, которая окаТСтся Π½Π° Π²Π΅Π±-страницС. Π’Π°ΠΊΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ.

Π’ нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ имССтся ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, выводящий простой HTML-список, Π½ΠΎ, ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ всё Π±ΠΎΠ»Π΅Π΅ слоТныС прилоТСния, ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, выводящиС Π΄Ρ€ΡƒΠ³ΠΈΠ΅ созданныС Π½Π°ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. Π’ ΠΈΡ‚ΠΎΠ³Π΅ всё это Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ Π² ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ HTML-элСмСнты, Π½ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° для формирования этих элСмСнтов понадобятся, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, дСсятки собствСнных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².

Π’ ΠΈΡ‚ΠΎΠ³Π΅, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ всё большС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΈΡ… Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„Π°ΠΉΠ»Π°Ρ…, Π½ΠΎ ΠΏΠΎΠΊΠ° Π²Π°ΠΌ Π²Π°ΠΆΠ½ΠΎ ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ обсудили, ΠΏΡ€ΠΈΠ²Ρ‹ΠΊΠ½ΡƒΡ‚ΡŒ ΠΊ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ. Π’ процСссС прохоТдСния курса Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ всё Π±ΠΎΠ»Π΅Π΅ ΠΈ Π±ΠΎΠ»Π΅Π΅ слоТныС Ρ„Π°ΠΉΠ»ΠΎΠ²Ρ‹Π΅ структуры.

На этом занятии ΠΌΡ‹ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Π»ΠΈ основы Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Π° Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ знания Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅.

ЗанятиС 7. ΠŸΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ. Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

β†’ ΠžΡ€ΠΈΠ³ΠΈΠ½Π°Π»

▍ЗаданиС

  1. ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΡŒΡ‚Π΅ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ React-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.
  2. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ MyInfo, Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ HTML-элСмСнты:
    1. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <h2> с вашим ΠΈΠΌΠ΅Π½Π΅ΠΌ.
    2. ВСкстовый Π°Π±Π·Π°Ρ† (элСмСнт <p>), содСрТащий ваш ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΉ рассказ ΠΎ сСбС.
    3. Бписок, ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ (<ul>) ΠΈΠ»ΠΈ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ (<ol>), с ΠΏΠ΅Ρ€Π΅Ρ‡Π½Π΅ΠΌ Ρ‚Ρ€Ρ‘Ρ… мСст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚ΡŒ.
  3. Π’Ρ‹Π²Π΅Π΄ΠΈΡ‚Π΅ экзСмпляр ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° MyInfo Π½Π° Π²Π΅Π±-страницу.

β–Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅

Π‘Ρ‚ΠΈΠ»ΠΈΠ·ΡƒΠΉΡ‚Π΅ элСмСнты страницы, ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ·Π½Π°Π² ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ (ΠΏΠΎΠΈΡ‰ΠΈΡ‚Π΅ Π² Google). Надо ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎ стилизации ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΌΡ‹ Π² этом курсС Π΅Ρ‰Ρ‘ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: сворачиваСмый Π±Π»ΠΎΠΊ

β–Π Π΅ΡˆΠ΅Π½ΠΈΠ΅

Π’ΡƒΡ‚ нас устроит такая ΠΆΠ΅ HTML-страница, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΌΡ‹ пользовались Ρ€Π°Π½Π΅Π΅. Π€Π°ΠΉΠ» с React-ΠΊΠΎΠ΄ΠΎΠΌ Ρ‚ΠΎΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π²ΠΏΠΎΠ»Π½Π΅ стандартно. А ΠΈΠΌΠ΅Π½Π½ΠΎ, ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌ Π² Π½Π΅Π³ΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, создадим каркас Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° MyInfo ΠΈ Π²Ρ‹Π·ΠΎΠ²Π΅ΠΌ ΠΌΠ΅Ρ‚ΠΎΠ΄ render() ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ReactDOM, ΠΏΠ΅Ρ€Π΅Π΄Π°Π² Π΅ΠΌΡƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π°Π΄ΠΎ вывСсти Π½Π° страницу, ΠΈ ссылку Π½Π° элСмСнт страницы, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Π²Π΅Π΄Π΅Π½ этот ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚. На Π΄Π°Π½Π½ΠΎΠΌ этапС Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

import React from "react"
import ReactDOM from "react-dom"

function MyInfo() {
 Β 
}

ReactDOM.render(<MyInfo />, document.getElementById("root"))

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½ΡƒΠΆΠ½ΠΎ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ ΠΈΠ· MyInfo JSX-ΠΊΠΎΠ΄, Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ Π² соотвСтствии с Π·Π°Π΄Π°Π½ΠΈΠ΅ΠΌ. Π’ΠΎΡ‚ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ.

import React from "react"
import ReactDOM from "react-dom"

function MyInfo() {
 Β return (
 Β Β Β <div>
 Β Β Β Β Β <h2>Bob Ziroll</h2>
 Β Β Β Β Β <p>This is a paragraph about me...</p>
 Β Β Β Β Β <ul>
 Β Β Β Β Β Β Β <li>Thailand</li>
 Β Β Β Β Β Β Β <li>Japan</li>
 Β Β Β Β Β Β Β <li>Nordic Countries</li>
 Β Β Β Β Β </ul>
 Β Β Β </div>
 Β )
}

ReactDOM.render(
 Β <MyInfo />, 
 Β document.getElementById("root")
)

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ конструкция, возвращаСмая ΠΈΠ· MyInfo, Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½Π° Π² ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ скобки, ΠΈ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ вывСсти, находятся Π²Π½ΡƒΡ‚Ρ€ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта <div>.

Π˜Ρ‚ΠΎΠ³ΠΈ

Π’ этом ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π΅ ΠΌΡ‹ познакомились с Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ React. Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π°Π· ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Ρ„Π°ΠΉΠ»Π°Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ ΠΎ структурС React-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

Π£Π²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ! Если Π²Ρ‹ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚Π΅ этот курс β€” просим Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, Π² ΠΊΠ°ΠΊΠΎΠΉ срСдС Π²Ρ‹ выполняСтС упраТнСния.

Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ / Π₯Π°Π±Ρ€

Как говорится, Π² Ρ€Π΅Π΄Π°ΠΊΡ†ΠΈΡŽ ΠΏΡ€ΠΈΡˆΠ»ΠΎ письмо: «Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π²Ρ‹ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ Ρ€Π°Π·ΡŠΡΡΠ½ΠΈΡ‚ΡŒ…» ΠžΡ‚Π²Π΅Ρ‡Π°ΡŽ ΠΏΡƒΠ±Π»ΠΈΡ‡Π½ΠΎ, ΠΊΠΎΠΌΡƒ ΠΎΠ½ΠΎ Π½Π°Π΄ΠΎ, Π° ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡ‰ΡƒΠΏΠ°Ρ‚ΡŒ Ρ‚ΡƒΡ‚.

Π‘Π½Π°Ρ‡Π°Π»Π° Π±Ρ‹Π»ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π½Π° классах:

class Square extends React.Component {
  constructor() {
    super()
    this.state = {
      value: null,
    }
  }
  render() {
    const { value, onClick } = this.props
    return (
      <button className="square" onClick={onClick}>
        {value}
      </button>
    )
  }
}

ΠŸΠΎΡ‚ΠΎΠΌ явились Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹:

const Square = ({ value, onClick }) => {(
  <button className="square" onClick={onClick}>
    {value}
  </button>
)}

Π’ Ρ‡Ρ‘ΠΌ Ρ€Π°Π·Π½ΠΈΡ†Π°? Π’Ρ‹ΠΊΠΈΠ΄Ρ‹Π²Π°Π΅ΠΌ: объявлСниС класса, constructor(), render(), const для дСструктуризации props, this. А Π΅Ρ‰Ρ‘ исчСзло состояниС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° β€” ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ stateless functional components.

Как дальшС ΠΆΠΈΡ‚ΡŒ Π±Π΅Π· локального состояния: 1) ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π°ΠΌ, Π³Π΄Π΅ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ состояниС; 2) ΠΈΠ»ΠΈ пСрСнСсти всё состояниС Π² стор redux-Π° (ΠΊΠ°ΠΊ СдинствСнный источник ΠΏΡ€Π°Π²Π΄Ρ‹). Π›ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ состояния ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² β€” это Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ абстракции, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰ΠΈΠΉ обслуТивания. А Π·Π°Ρ‡Π΅ΠΌ?

Π•Ρ‰Ρ‘ ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€Π΅ΠΎΠ΄ΠΎΠ»Π΅Ρ‚ΡŒ ΠΊΠΎΠ½Π½Π΅ΠΊΡ‚ΠΎΠ±ΠΎΡΠ·Π½ΡŒ β€” Π½Π΅ Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ всС свойства Ρ‡Π΅Ρ€Π΅Π· Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, Π° ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ connect() для Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ использования свойств.

Π Π°Π·ΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ, Π° ΠΊΠ°ΠΊ ΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ PureComponent ΠΊ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ? На ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ° Higher-Order Components:

// utils.js
import React from 'react'

export const pureComponent = (fn) => {
  class Wrapper extends React.PureComponent {
    render() {
      return fn(this.props, this.context)
    }
  }
  // Π½Π΅ Π½Π°Π΄ΠΎ, Ρ‚.ΠΊ. подписываСт Π½Π° контСкст ΠΊΠ°ΠΊ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚,
  // Ρ‚Π°ΠΊ ΠΈ ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΡƒ-PureComponent; Π»ΡƒΡ‡ΡˆΠ΅ Π½Π°Π·Π½Π°Ρ‡Π°Ρ‚ΡŒ сразу ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠ΅ (снаруТи)
  // Wrapper.contextTypes = fn.contextTypes
  Wrapper.displayName = `PureComponent(${fn.name})`
  return Wrapper
}

ΠŸΡ€ΠΈΡΠ²Π°ΠΈΠ²Π°Π½ΠΈΠ΅ displayName β€” для красоты Π² React DevTools. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΏΡ€ΠΎ contextTypes ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Ρ‚ΡƒΡ‚.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования:

import { pureComponent } from 'utils'

const Square = ({ value, onClick }) => {(
  <button className="square" onClick={onClick}>
    {value}
  </button>
)}

export default pureComponent(Square)

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ

свойства ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² / Π‘Π»ΠΎΠ³ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ RUVDS.com / Π₯Π°Π±Ρ€

Π’ сСгодняшнСй части ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Π° ΡƒΡ‡Π΅Π±Π½ΠΎΠ³ΠΎ курса ΠΏΠΎ React ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ свойствах ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Π­Ρ‚ΠΎ β€” ΠΎΠ΄Π½Π° ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΉ, Π½Π°ΡˆΠ΅Π΄ΡˆΠΈΡ… ΠΎΡ‚Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π΄Π°Π½Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ΅.

β†’ Π§Π°ΡΡ‚ΡŒ 1: ΠΎΠ±Π·ΠΎΡ€ курса, ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹ популярности React, ReactDOM ΠΈ JSX

β†’ Π§Π°ΡΡ‚ΡŒ 2: Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

β†’ Π§Π°ΡΡ‚ΡŒ 3: Ρ„Π°ΠΉΠ»Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², структура ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 4: Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΈ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

β†’ Π§Π°ΡΡ‚ΡŒ 5: Π½Π°Ρ‡Π°Π»ΠΎ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, основы стилизации

β†’ Π§Π°ΡΡ‚ΡŒ 6: ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… особСнностях курса, JSX ΠΈ JavaScript

β†’ Π§Π°ΡΡ‚ΡŒ 7: встроСнныС стили

β†’ Π§Π°ΡΡ‚ΡŒ 8: ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, знакомство со свойствами ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 9: свойства ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 10: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ со свойствами ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ стилизации

β†’ Π§Π°ΡΡ‚ΡŒ 11: динамичСскоС Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄ массивов map

β†’ Π§Π°ΡΡ‚ΡŒ 12: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ, Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ

β†’ Π§Π°ΡΡ‚ΡŒ 13: ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, основанныС Π½Π° классах

β†’ Π§Π°ΡΡ‚ΡŒ 14: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ ΠΏΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ, основанным Π½Π° классах, состояниС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 15: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌΡ‹ ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с состояниСм ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 16: Ρ‡Π΅Ρ‚Π²Ρ‘Ρ€Ρ‚Ρ‹ΠΉ этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° событий

β†’ Π§Π°ΡΡ‚ΡŒ 17: пятый этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, модификация состояния ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 18: ΡˆΠ΅ΡΡ‚ΠΎΠΉ этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ

β†’ Π§Π°ΡΡ‚ΡŒ 19: ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 20: ΠΏΠ΅Ρ€Π²ΠΎΠ΅ занятиС ΠΏΠΎ условному Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Ρƒ

β†’ Π§Π°ΡΡ‚ΡŒ 21: Π²Ρ‚ΠΎΡ€ΠΎΠ΅ занятиС ΠΈ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ ΠΏΠΎ условному Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Ρƒ

β†’ Π§Π°ΡΡ‚ΡŒ 22: сСдьмой этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ· Π²Π½Π΅ΡˆΠ½ΠΈΡ… источников

β†’ Π§Π°ΡΡ‚ΡŒ 23: ΠΏΠ΅Ρ€Π²ΠΎΠ΅ занятиС ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ

β†’ Π§Π°ΡΡ‚ΡŒ 24: Π²Ρ‚ΠΎΡ€ΠΎΠ΅ занятиС ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ

β†’ Π§Π°ΡΡ‚ΡŒ 25: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ

β†’ Π§Π°ΡΡ‚ΡŒ 26: Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½ Container/Component

β†’ Π§Π°ΡΡ‚ΡŒ 27: курсовой ΠΏΡ€ΠΎΠ΅ΠΊΡ‚

ЗанятиС 19. Бвойства ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π² React

β†’ ΠžΡ€ΠΈΠ³ΠΈΠ½Π°Π»

Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ срСдствами create-react-app ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ ΠΊΠΎΠ΄ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… стандартных Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈΠ· ΠΏΠ°ΠΏΠΊΠΈ src.

Π’ΠΎΡ‚ ΠΊΠΎΠ΄ Ρ„Π°ΠΉΠ»Π° index.js:

import React from "react"
import ReactDOM from "react-dom"
import "./index.css"

import App from "./App"

ReactDOM.render(<App />, document.getElementById("root"))

Π’ΠΎΡ‚ стили, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ описаны Π² Ρ„Π°ΠΉΠ»Π΅ index.css:

body {
 Β margin: 0;
}

.contacts {
 Β display: flex;
 Β flex-wrap: wrap;
}

.contact-card {
 Β flex-basis: 250px;
 Β margin: 20px;
}

.contact-card > img {
 Β width: 100%;
 Β height: auto;
}

.contact-card > h4 {
 Β text-align: center;
}

.contact-card > p {
 Β font-size: 12px;
}

Π’ΠΎΡ‚ ΠΊΠΎΠ΄, находящийся Π² Ρ„Π°ΠΉΠ»Π΅ App.js:

import React from "react"

function App() {
 Β Β Β return (
 Β Β Β Β Β Β Β <div className="contacts">
 Β Β Β Β Β Β Β Β Β Β Β <div className="contact-card">
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <img align="center" src="http://placekitten.com/300/200"/>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <h4><font color="#3AC1EF">▍Mr. Whiskerson</font></h4>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <p>Phone: (212) 555-1234</p>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <p>Email: [email protected]</p>
 Β Β Β Β Β Β Β Β Β Β Β </div>
 Β Β Β Β Β Β Β Β Β Β Β 
 Β Β Β Β Β Β Β Β Β Β Β <div className="contact-card">
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <img align="center" src="http://placekitten.com/400/200"/>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <h4><font color="#3AC1EF">▍Fluffykins</font></h4>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <p>Phone: (212) 555-2345</p>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <p>Email: [email protected]</p>
 Β Β Β Β Β Β Β Β Β Β Β </div>
 Β Β Β Β Β Β Β Β Β Β Β 
 Β Β Β Β Β Β Β Β Β Β Β <div className="contact-card">
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <img align="center" src="http://placekitten.com/400/300"/>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <h4><font color="#3AC1EF">▍Destroyer</font></h4>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <p>Phone: (212) 555-3456</p>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <p>Email: [email protected]</p>
 Β Β Β Β Β Β Β Β Β Β Β </div>
 Β Β Β Β Β Β Β Β Β Β Β 
 Β Β Β Β Β Β Β Β Β Β Β <div className="contact-card">
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <img align="center" src="http://placekitten.com/200/100"/>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <h4><font color="#3AC1EF">▍Felix</font></h4>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <p>Phone: (212) 555-4567</p>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <p>Email: [email protected]</p>
 Β Β Β Β Β Β Β Β Β Β Β </div>
 Β Β Β Β Β Β Β </div>
 Β Β Β )
}

export default App

Π’ΠΎΡ‚ ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ это ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.
Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° прилоТСния Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅

ΠŸΡ€ΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π² ΠΊΠΎΠ΄ ΠΈ внСшний Π²ΠΈΠ΄ прилоТСния ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΉΡ‚ΠΈ ΠΊ Π²Ρ‹Π²ΠΎΠ΄Ρƒ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ для Π²Ρ‹Π²ΠΎΠ΄Π° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ со свСдСниями ΠΎ ΠΆΠΈΠ²ΠΎΡ‚Π½Ρ‹Ρ… Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ особыС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. БСйчас эти элСмСнты Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‚ΡΡ срСдствами ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° App. Учитывая ΠΆΠ΅ Ρ‚ΠΎ, ΠΎ Ρ‡Ρ‘ΠΌ ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ Π½Π° ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… занятиях, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΉΡ‚ΠΈ ΠΈ дальшС β€” ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎΠ± ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ, пСрСдавая Π΅ΠΌΡƒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΈΠ»ΠΈ свойства.

Π’ нашСм ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ с изобраТСниями кошСк, ΠΈΡ… ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ ΠΈ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½Ρ‹ΠΌΠΈ свСдСниями ΠΈΡ… Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅Π² (Π° ΠΌΠΎΠΆΠ΅Ρ‚ β€” ΠΈ ΠΈΡ… самих) β€” Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ΠΎΠΌ ΠΈ адрСсом элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹. Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π² дальнСйшСм станСт основой для всСх ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ, ΠΌΠΎΠΆΠ½ΠΎ Π²Π·ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ App. НапримСр β€” Ρ‚Π°ΠΊΠΎΠΉ:

<div className="contact-card">
 Β Β Β <img align="center" src="http://placekitten.com/300/200"/>
 Β Β Β <h4><font color="#3AC1EF">▍Mr. Whiskerson</font></h4>
 Β Β Β <p>Phone: (212) 555-1234</p>
 Β Β Β <p>Email: [email protected]</p>
</div>

App Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… Π±Π»ΠΎΠΊΠ°, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для создания ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, Π½ΠΎ Ρ‚Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ нас Π½Π΅ устраиваСт. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ создадим ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ станСт основой всСх ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ, Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌΡ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ. Для этого создадим Π² ΠΏΠ°ΠΏΠΊΠ΅ src Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ» ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° β€” ContactCard.js ΠΈ помСстим Π² Π½Π΅Π³ΠΎ ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт <div>, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌΡ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ App, ΠΊΠΎΠ΄ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½ Π²Ρ‹ΡˆΠ΅. Π’ΠΎΡ‚ ΠΊΠ°ΠΊΠΈΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠΎΠ΄ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ContactCard:

import React from "react"

function ContactCard() {
 Β Β Β return (
 Β Β Β Β Β Β Β <div className="contact-card">
 Β Β Β Β Β Β Β Β Β Β Β <img align="center" src="http://placekitten.com/300/200"/>
 Β Β Β Β Β Β Β Β Β Β Β <h4><font color="#3AC1EF">▍Mr. Whiskerson</font></h4>
 Β Β Β Β Β Β Β Β Β Β Β <p>Phone: (212) 555-1234</p>
 Β Β Β Β Β Β Β Β Β Β Β <p>Email: [email protected]</p>
 Β Β Β Β Β Β Β </div>
 Β Β Β )
}

export default ContactCard

Ясно, Ρ‡Ρ‚ΠΎ Ссли ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ нСсколько экзСмпляров этого ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, Ρ‚ΠΎ всС ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΈ ΠΈ Ρ‚Π΅ ΠΆΠ΅ Π΄Π°Π½Π½Ρ‹Π΅, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ эти Π΄Π°Π½Π½Ρ‹Π΅ Тёстко Π·Π°Π΄Π°Π½Ρ‹ Π² ΠΊΠΎΠ΄Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. А Π½Π°ΠΌ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹, ΠΏΡ€ΠΈ создании Ρ€Π°Π·Π½Ρ‹Ρ… экзСмпляров этого ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌΡ‹Π΅ ΠΈΠΌ Π΄Π°Π½Π½Ρ‹Π΅. Π Π΅Ρ‡ΡŒ ΠΈΠ΄Ρ‘Ρ‚ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΈΠ΅ свойства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΎΠ½ ΠΏΠΎΡ‚ΠΎΠΌ смоТСт Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ.

ΠœΡ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ с Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ JS-Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ…, благодаря использованию Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ React, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ особыС конструкции. Как извСстно, Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Ρ‹, хотя ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π±Π΅Π· Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ². АналогиСй нашСго ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ContactCard, Π² Ρ‚ΠΎΠΌ Π²ΠΈΠ΄Π΅, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ½ сСйчас сущСствуСт, ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ такая Π²ΠΎΡ‚ простая функция, которая, Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ принимая, просто Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ сумму Π΄Π²ΡƒΡ… чисСл:

function addNumbers() {
 Β Β Β return 1 + 1
}

Π•Ρ‘ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ сумму чисСл 1 ΠΈ 1, Π½ΠΎ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ»ΠΎΠΆΠΈΡ‚ΡŒ 1 ΠΈ 2, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‚ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… Π²Ρ…ΠΎΠ΄Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ…, Π½Π°ΠΌ ΠΏΡ€ΠΈΡˆΠ»ΠΎΡΡŒ Π±Ρ‹ ΠΏΠΈΡΠ°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ. Π‘ΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Ρ‚ ΠΊ ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹ΠΌ нСудобствам ΠΏΡ€ΠΈ нСобходимости слоТСния Ρ€Π°Π·Π½Ρ‹Ρ… чисСл, поэтому Π² ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΉ ситуации Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·ΡƒΠΌΠ½Ρ‹ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ для слоТСния чисСл, которая ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π΄Π²Π° числа ΠΈ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ ΠΈΡ… сумму:

function addNumbers(a, b) {
 Β Β Β return a + b
}

Π’ΠΎ, Ρ‡Ρ‚ΠΎ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ такая функция, Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π²ΠΈΡΠ΅Ρ‚ΡŒ ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΈΠ΅ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Π΅ΠΉ ΠΏΠ΅Ρ€Π΅Π΄Π°Π»ΠΈ ΠΏΡ€ΠΈ Π²Ρ‹Π·ΠΎΠ²Π΅. Боздавая React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠΉΡ‚ΠΈ Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΏΡƒΡ‚Ρ‘ΠΌ.

Π˜ΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌ Π² Ρ„Π°ΠΉΠ» App.js ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ContactCard ΠΈ Π²Π΅Ρ€Π½Ρ‘ΠΌ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Π΅Π³ΠΎ экзСмпляра, Π½Π΅ удаляя ΠΏΠΎΠΊΠ° ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Π½Π° страницС прилоТСния:

import React from "react"
import ContactCard from "./ContactCard"

function App() {
 Β Β Β return (
 Β Β Β Β Β Β Β <div className="contacts">
 Β Β Β Β Β Β Β Β Β Β Β <ContactCard />
 Β Β Β Β Β Β Β Β Β Β Β <ContactCard />
 Β Β Β Β Β Β Β Β Β Β Β <ContactCard />
 Β Β Β Β Β Β Β Β Β Β Β <ContactCard />

 Β Β Β Β Β Β Β Β Β Β Β <div className="contact-card">
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <img align="center" src="http://placekitten.com/300/200"/>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <h4><font color="#3AC1EF">▍Mr. Whiskerson</font></h4>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <p>Phone: (212) 555-1234</p>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <p>Email: [email protected]</p>
 Β Β Β Β Β Β Β Β Β Β Β </div>
 Β Β Β Β Β Β Β Β Β Β Β 
 Β Β Β Β Β Β Β Β Β Β Β <div className="contact-card">
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <img align="center" src="http://placekitten.com/400/200"/>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <h4><font color="#3AC1EF">▍Fluffykins</font></h4>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <p>Phone: (212) 555-2345</p>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <p>Email: [email protected]</p>
 Β Β Β Β Β Β Β Β Β Β Β </div>
 Β Β Β Β Β Β Β Β Β Β Β 
 Β Β Β Β Β Β Β Β Β Β Β <div className="contact-card">
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <img align="center" src="http://placekitten.com/400/300"/>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <h4><font color="#3AC1EF">▍Destroyer</font></h4>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <p>Phone: (212) 555-3456</p>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <p>Email: [email protected]</p>
 Β Β Β Β Β Β Β Β Β Β Β </div>
 Β Β Β Β Β Β Β Β Β Β Β 
 Β Β Β Β Β Β Β Β Β Β Β <div className="contact-card">
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <img align="center" src="http://placekitten.com/200/100"/>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <h4><font color="#3AC1EF">▍Felix</font></h4>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <p>Phone: (212) 555-4567</p>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <p>Email: [email protected]</p>
 Β Β Β Β Β Β Β Β Β Β Β </div>
 Β Β Β Β Β Β Β </div>
 Β Β Β )
}

export default App

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠΎΡ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ Π½Π°Π΄ ΠΊΠΎΠ΄ΠΎΠΌ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌ для создания экзСмпляров ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ContactCard. Боздавая ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ HTML-элСмСнты, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹, Π²Π»ΠΈΡΡŽΡ‰ΠΈΠ΅ Π½Π° ΠΈΡ… ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈ внСшний Π²ΠΈΠ΄. ИмСна этих Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Тёстко Π·Π°Π΄Π°Π½Ρ‹ стандартом. Π’ случаС с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠΌ, с Ρ‚ΠΎΠΉ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π°Π·Π½ΠΈΡ†Π΅ΠΉ, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² ΠΌΡ‹ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΡ‹Π²Π°Π΅ΠΌ сами, ΠΈ сами ΠΆΠ΅ Ρ€Π΅ΡˆΠ°Π΅ΠΌ β€” ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ Π² ΠΊΠΎΠ΄Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°.

КаТдая ΠΈΠ· ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ содСрТит Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π° ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅, ΠΎΡ‚ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΊ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ΅, ΠΌΠΎΠ³ΡƒΡ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ. Π­Ρ‚ΠΎ β€” ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ кошки ΠΈ Π΅Ρ‘ имя, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ ΠΈ адрСс элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹. ΠŸΡƒΡΡ‚ΡŒ имя кошки Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒΡΡ Π² свойствС name, адрСс изобраТСния β€” Π² свойствС imgURL, Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ β€” Π² свойствС phone, Π° адрСс элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ β€” Π² свойствС email.

Π—Π°Π΄Π°Π΄ΠΈΠΌ эти свойства экзСмплярам ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ContactCard ΠΈ, ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ пСрСноса Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ· ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΆΠ΅ имССтся Π² App, Π±ΡƒΠ΄Π΅ΠΌ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π΅Π³ΠΎ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΊΠΎΠ΄ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° App Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

import React from "react"
import ContactCard from "./ContactCard"

function App() {
 Β Β Β return (
 Β Β Β Β Β Β Β <div className="contacts">
 Β Β Β Β Β Β Β Β Β Β Β <ContactCard 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β name="Mr. Whiskerson" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β imgUrl="http://placekitten.com/300/200" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β phone="(212) 555-1234" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β email="[email protected]"
 Β Β Β Β Β Β Β Β Β Β Β />
 Β Β Β Β Β Β Β Β Β Β Β 
 Β Β Β Β Β Β Β Β Β Β Β <ContactCard 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β name="Fluffykins" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β imgUrl="http://placekitten.com/400/200" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β phone="(212) 555-2345" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β email="[email protected]"
 Β Β Β Β Β Β Β Β Β Β Β />
 Β Β Β Β Β Β Β Β Β Β Β 
 Β Β Β Β Β Β Β Β Β Β Β <ContactCard 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β name="Destroyer" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β imgUrl="http://placekitten.com/400/300" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β phone="(212) 555-3456" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β email="[email protected]"
 Β Β Β Β Β Β Β Β Β Β Β />
 Β Β Β Β Β Β Β Β Β Β Β 
 Β Β Β Β Β Β Β Β Β Β Β <ContactCard 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β name="Felix" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β imgUrl="http://placekitten.com/200/100" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β phone="(212) 555-4567" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β email="[email protected]"
 Β Β Β Β Β Β Β Β Β Β Β />
 Β Β Β Β Β Β Β Β Β Β Β 
 Β Β Β Β Β Β Β </div>
 Β Β Β )
}

export default App

ΠŸΡ€Π°Π²Π΄Π°, ΠΎΠ΄Π½ΠΎΠΉ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ свойств ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ нСдостаточно для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π±Ρ‹Π»ΠΈ Π±Ρ‹ Π² Π½Ρ‘ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹. Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°, которая Π±ΡƒΠ΄Π΅Ρ‚ сформирована Π²Ρ‹ΡˆΠ΅ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½Π½Ρ‹ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ App, Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, Π΄Π°Π½Π½Ρ‹Π΅ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π·Π°Π΄Π°Π½Ρ‹ Π² ΠΊΠΎΠ΄Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ContactCard, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ° Π½Π΅ Π·Π½Π°Π΅Ρ‚ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΅ΠΌΡƒ Π΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Π½Ρ‹ΠΌΠΈ Π΅ΠΌΡƒ свойствами.
Π”Π°Π½Π½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ Тёстко Π·Π°Π΄Π°Π½Ρ‹ Π² ΠΊΠΎΠ΄Π΅, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π½Π΅ ΡƒΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Π½Ρ‹ΠΌΠΈ Π΅ΠΌΡƒ свойствами

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ сСйчас ΠΏΡ€ΠΈΡˆΠ»ΠΎ врСмя ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ContactCard ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ со свойствами, ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Π΅ΠΌΡ‹ΠΌΠΈ Π΅ΠΌΡƒ ΠΏΡ€ΠΈ создании Π΅Π³ΠΎ экзСмпляров.

ΠŸΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΠΌ ΠΊ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡŽ этой Π·Π°Π΄Π°Ρ‡ΠΈ, ΡƒΠΊΠ°Π·Π°Π², ΠΏΡ€ΠΈ объявлСнии Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ContactCard, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ props. ΠŸΡ€ΠΈ этом ΠΊΠΎΠ΄ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

import React from "react"

function ContactCard(props) {
 Β Β Β return (
 Β Β Β Β Β Β Β <div className="contact-card">
 Β Β Β Β Β Β Β Β Β Β Β <img align="center" src="http://placekitten.com/300/200"/>
 Β Β Β Β Β Β Β Β Β Β Β <h4><font color="#3AC1EF">▍Mr. Whiskerson</font></h4>
 Β Β Β Β Β Β Β Β Β Β Β <p>Phone: (212) 555-1234</p>
 Β Β Β Β Β Β Β Β Β Β Β <p>Email: [email protected]</p>
 Β Β Β Β Β Β Β </div>
 Β Β Β )
}

export default ContactCard

На самом Π΄Π΅Π»Π΅, этот ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΡƒΠ³ΠΎΠ΄Π½ΠΎ, Π½ΠΎ Π² React принято Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ props, ΠΈ Ρ‚Π΅ свойства, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΡ‹ Ρ‚ΡƒΡ‚ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ, часто Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ просто Β«propsΒ».

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ props β€” это ΠΎΠ±ΡŠΠ΅ΠΊΡ‚. Бвойствами этого ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ΡΠ²Π»ΡΡŽΡ‚ΡΡ свойства, ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ ΠΏΡ€ΠΈ создании Π΅Π³ΠΎ экзСмпляра. Π’ΠΎ Π΅ΡΡ‚ΡŒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² нашСм ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π΅ props Π±ΡƒΠ΄Π΅Ρ‚ свойство props.name, содСрТащСС имя кошки, ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Π½ΠΎΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ ΠΏΡ€ΠΈ создании Π΅Π³ΠΎ экзСмпляра. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ρƒ Π½Π΅Π³ΠΎ Π±ΡƒΠ΄ΡƒΡ‚ свойства props.imgUrl, props.phone, props.email. Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² этом ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π² Π½Π°Ρ‡Π°Π»ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ContactCard ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ console.log(props).

import React from "react"

function ContactCard(props) {
 Β Β Β console.log(props)
 Β Β Β return (
 Β Β Β Β Β Β Β <div className="contact-card">
 Β Β Β Β Β Β Β Β Β Β Β <img align="center" src="http://placekitten.com/300/200"/>
 Β Β Β Β Β Β Β Β Β Β Β <h4><font color="#3AC1EF">▍Mr. Whiskerson</font></h4>
 Β Β Β Β Β Β Β Β Β Β Β <p>Phone: (212) 555-1234</p>
 Β Β Β Β Β Β Β Β Β Β Β <p>Email: [email protected]</p>
 Β Β Β Β Β Β Β </div>
 Β Β Β )
}

export default ContactCard

Π­Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ вывСсти ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ props, ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ, Π² консоль.
ΠžΠ±ΡŠΠ΅ΠΊΡ‚ props Π² консоли

Π’ΡƒΡ‚ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π²Ρ‹Π²ΠΎΠ΄ Ρ‡Π΅Ρ‚Ρ‹Ρ€Ρ‘Ρ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² ΠΈΠ· ContactCard.js. Π˜Ρ… ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ создаём Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ экзСмпляра ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ContactCard.

Всё это Π΄Π°Ρ‘Ρ‚ Π½Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΊΠΎΠ΄Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, вмСсто Тёстко Π·Π°Π΄Π°Π½Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Π½ΠΎ Π΅ΠΌΡƒ ΠΏΡ€ΠΈ создании Π΅Π³ΠΎ экзСмпляра, доступноС Π² Π²ΠΈΠ΄Π΅ свойств ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° props.

Π§Ρ‚ΠΎ Ссли ΠΌΡ‹ попытаСмся Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ свойством props.imgUrl Ρ‚Π°ΠΊ:

<img align="center" src=props.imgUrl/>

На ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ взгляд такая конструкция ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, Π½ΠΎ вспомним ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚ΡƒΡ‚ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΡƒΡ‰Π½ΠΎΡΡ‚ΡŒ ΠΈΠ· JavaScript Π² JSX-ΠΊΠΎΠ΄Π΅. О Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ это дСлаСтся, ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… занятий. А ΠΈΠΌΠ΅Π½Π½ΠΎ, Π² нашСм случаС свойство ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π½ΡƒΠΆΠ½ΠΎ Π·Π°ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π² Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Π΅ скобки:

<img align="center" src={props.imgUrl}/>

ΠŸΠ΅Ρ€Π΅Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ ΠΏΠΎ Ρ‚Π°ΠΊΠΎΠΌΡƒ ΠΆΠ΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡƒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌΡ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ, послС Ρ‡Π΅Π³ΠΎ Π΅Π³ΠΎ ΠΊΠΎΠ΄ ΠΏΡ€ΠΈΠΌΠ΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π²ΠΈΠ΄:

import React from "react"

function ContactCard(props) {
 Β Β Β return (
 Β Β Β Β Β Β Β <div className="contact-card">
 Β Β Β Β Β Β Β Β Β Β Β <img align="center" src={props.imgUrl}/>
 Β Β Β Β Β Β Β Β Β Β Β <h4><font color="#3AC1EF">▍{props.name}</font></h4>
 Β Β Β Β Β Β Β Β Β Β Β <p>Phone: {props.phone}</p>
 Β Β Β Β Β Β Β Β Β Β Β <p>Email: {props.email}</p>
 Β Β Β Β Β Β Β </div>
 Β Β Β )
}

export default ContactCard

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π² полях для Π²Ρ‹Π²ΠΎΠ΄Π° Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π° ΠΈ адрСса элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ ΠΌΡ‹ оставили тСксты Phone: ΠΈ Email: с ΠΏΡ€ΠΎΠ±Π΅Π»Π°ΠΌΠΈ, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ Π·Π° Π½ΠΈΠΌΠΈ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ эти тСксты ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π²ΠΎ всСх ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ…. Если Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° страницу прилоТСния, Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° содСрТит Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Ρ€Π°Π·Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ.
Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°, сформированная с использованиСм ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°

Наш ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ всСго Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ свойства. Π§Ρ‚ΠΎ Ссли Π½Π΅ΠΊΠΎΠ΅ΠΌΡƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ 50 свойств? ΠŸΠΎΠΆΠ°Π»ΡƒΠΉ, ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ Ρ‚Π°ΠΊΠΎΠ΅ свойство ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ строкой, ΠΊΠ°ΠΊ это сдСлано Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ App, Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ΡƒΠ΄ΠΎΠ±Π½ΠΎ. Π’ Ρ‚Π°ΠΊΠΈΡ… случаях ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π΄Ρ€ΡƒΠ³ΠΈΠΌ способом ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ свойств ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ. Он Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ, ΠΏΡ€ΠΈ создании экзСмпляра ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, Π΅ΠΌΡƒ пСрСдаётся Π½Π΅ список свойств, Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ со свойствами. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ это ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°:

import React from "react"
import ContactCard from "./ContactCard"

function App() {
 Β Β Β return (
 Β Β Β Β Β Β Β <div className="contacts">
 Β Β Β Β Β Β Β Β Β Β Β <ContactCard 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β contact={{
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β name: "Mr. Whiskerson",
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β imgUrl: "http://placekitten.com/300/200",
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β phone: "(212) 555-1234",
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β email: "[email protected]"
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β }}
 Β Β Β Β Β Β Β Β Β Β Β />
 Β Β Β Β Β Β Β Β Β Β Β 
 Β Β Β Β Β Β Β Β Β Β Β <ContactCard 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β name="Fluffykins" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β imgUrl="http://placekitten.com/400/200" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β phone="(212) 555-2345" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β email="[email protected]"
 Β Β Β Β Β Β Β Β Β Β Β />
 Β Β Β Β Β Β Β Β Β Β Β 
 Β Β Β Β Β Β Β Β Β Β Β <ContactCard 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β name="Destroyer" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β imgUrl="http://placekitten.com/400/300" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β phone="(212) 555-3456" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β email="[email protected]"
 Β Β Β Β Β Β Β Β Β Β Β />
 Β Β Β Β Β Β Β Β Β Β Β 
 Β Β Β Β Β Β Β Β Β Β Β <ContactCard 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β name="Felix" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β imgUrl="http://placekitten.com/200/100" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β phone="(212) 555-4567" 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β email="[email protected]"
 Β Β Β Β Β Β Β Β Β Β Β />
 Β Β Β Β Β Β Β Β Β Β Β 
 Β Β Β Β Β Β Β </div>
 Β Β Β )
}

export default App

НСльзя ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ этот ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ сократил количСство ΠΊΠΎΠ΄Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ для описания экзСмпляра ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ свойства, ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Π΅ΠΌΡ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ, всё Ρ‚Π°ΠΊ ΠΆΠ΅ Тёстко Π·Π°Π΄Π°Π½Ρ‹ Π² ΠΊΠΎΠ΄Π΅, хотя ΠΌΡ‹ ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‘ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ лишь ΠΎΠ΄ΠΈΠ½ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚. ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° этого ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‰ΡƒΡ‚ΠΈΡ‚ΡŒ Π² ситуациях, ΠΊΠΎΠ³Π΄Π° Π΄Π°Π½Π½Ρ‹Π΅ для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ ΠΈΠ· Π½Π΅ΠΊΠΈΡ… Π²Π½Π΅ΡˆΠ½ΠΈΡ… источников. НапримСр β€” ΠΈΠ· JSON-Ρ„Π°ΠΉΠ»Π°.

Π’ Ρ…ΠΎΠ΄Π΅ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ ΠΊΠΎΠ΄Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° App, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ для создания ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ экзСмпляра ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ContactCard, ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Π°Ρ Ρ€Π°Π±ΠΎΡ‚Π° прилоТСния Π±Ρ‹Π»Π° Π½Π°Ρ€ΡƒΡˆΠ΅Π½Π°. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π΅Π³ΠΎ страница.

ΠΠ°Ρ€ΡƒΡˆΠ΅Π½ΠΈΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ прилоТСния

Как это ΠΌΠΎΠΆΠ½ΠΎ это ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ? Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² этом Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ, ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ происходящСС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ console.log(props).

Анализ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° props

Как Π²ΠΈΠ΄Π½ΠΎ, ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ props ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° отличаСтся ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΆΠ΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².

Π’ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ ContactCard ΠΌΡ‹ ΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ props исходя ΠΈΠ· прСдполоТСния ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρƒ Π½Π΅Π³ΠΎ Π΅ΡΡ‚ΡŒ свойства name, imgUrl ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΠ΅ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅. Π—Π΄Π΅ΡΡŒ ΠΆΠ΅ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ лишь ΠΎΠ΄Π½ΠΎ свойство β€” contact. Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Ρƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° props оказываСтся лишь ΠΎΠ΄Π½ΠΎ свойство β€” contact, ΡΠ²Π»ΡΡŽΡ‰Π΅Π΅ΡΡ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ, Π° Π² ΠΊΠΎΠ΄Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Ρ€Π°Π±ΠΎΡ‚Π° с ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΉ структурой Π½Π΅ прСдусмотрСна.

ΠŸΠ΅Ρ€Π΅Π²Π΅ΡΡ‚ΠΈ наш ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π½Π° модСль использования лишь ΠΎΠ΄Π½ΠΎΠ³ΠΎ свойства-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° contact, содСрТащСго Π΄Ρ€ΡƒΠ³ΠΈΠ΅ свойства, довольно просто. Для этого, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для доступа ΠΊ свойству name, достаточно Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ конструкциСй Π²ΠΈΠ΄Π° props.contact.name Π² ΠΊΠΎΠ΄Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. АналогичныС конструкции ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π½ΡƒΠΆΠ½Ρ‹ΠΌΠΈ Π½Π°ΠΌ свойствами.

ΠŸΠ΅Ρ€Π΅Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ ΠΊΠΎΠ΄ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° с ΡƒΡ‡Ρ‘Ρ‚ΠΎΠΌ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π΅ΠΌΡƒ СдинствСнного свойства-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° contact, содСрТащСго Π΄Ρ€ΡƒΠ³ΠΈΠ΅ свойства:

import React from "react"

function ContactCard(props) {
 Β Β Β console.log(props)
 Β Β Β return (
 Β Β Β Β Β Β Β <div className="contact-card">
 Β Β Β Β Β Β Β Β Β Β Β <img align="center" src={props.contact.imgUrl}/>
 Β Β Β Β Β Β Β Β Β Β Β <h4><font color="#3AC1EF">▍{props.contact.name}</font></h4>
 Β Β Β Β Β Β Β Β Β Β Β <p>Phone: {props.contact.phone}</p>
 Β Β Β Β Β Β Β Β Β Β Β <p>Email: {props.contact.email}</p>
 Β Β Β Β Β Β Β </div>
 Β Β Β )
}

export default ContactCard

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ, Π½ΠΎ ΠΌΡ‹ этого, Π½Π° Π΄Π°Π½Π½ΠΎΠΌ этапС Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ, Π½Π΅ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ систСма сообщит Π½Π°ΠΌ ΠΎ мноТСствС ошибок, связанных с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ нСсколько экзСмпляров ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ContactCard, создаваСмыС Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ App, Π½Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ свойство-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ contact. ΠŸΡ€ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ ΠΊΠΎΠ΄Π° это свойство Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ undefined. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ производится ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ° ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊ Π½Π΅ΠΊΠΎΠ΅ΠΌΡƒ свойству значСния undefined, Ρ‡Ρ‚ΠΎ ΠΈ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ возникновСнию ошибки. Π˜ΡΠΏΡ€Π°Π²ΠΈΠΌ это, ΠΏΠ΅Ρ€Π΅Ρ€Π°Π±ΠΎΡ‚Π°Π² ΠΊΠΎΠ΄ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° App, отвСтствСнный Π·Π° Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ContactCard:

import React from "react"
import ContactCard from "./ContactCard"

function App() {
 Β Β Β return (
 Β Β Β Β Β Β Β <div className="contacts">
 Β Β Β Β Β Β Β Β Β Β Β <ContactCard 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β contact={{
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β name: "Mr. Whiskerson", 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β imgUrl: "http://placekitten.com/300/200", 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β phone: "(212) 555-1234", 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β email: "[email protected]"
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β }}
 Β Β Β Β Β Β Β Β Β Β Β />
 Β Β Β Β Β Β Β Β Β Β Β 
 Β Β Β Β Β Β Β Β Β Β Β <ContactCard 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β contact={{
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β name: "Fluffykins", 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β imgUrl: "http://placekitten.com/400/200", 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β phone: "(212) 555-2345", 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β email: "[email protected]"
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β }}
 Β Β Β Β Β Β Β Β Β Β Β />
 Β Β Β Β Β Β Β Β Β Β Β 
 Β Β Β Β Β Β Β Β Β Β Β <ContactCard
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β contact={{
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β name: "Destroyer", 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β imgUrl: "http://placekitten.com/400/300", 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β phone: "(212) 555-3456", 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β email: "[email protected]"
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β }}
 Β Β Β Β Β Β Β Β Β Β Β />
 Β Β Β Β Β Β Β Β Β Β Β 
 Β Β Β Β Β Β Β Β Β Β Β <ContactCard 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β contact={{
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β name: "Felix", 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β imgUrl: "http://placekitten.com/200/100", 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β phone: "(212) 555-4567", 
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β email: "[email protected]"
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β }}
 Β Β Β Β Β Β Β Β Β Β Β />
 Β Β Β Β Β Β Β Β Β Β Β 
 Β Β Β Β Β Β Β </div>
 Β Β Β )
}

export default App

Π’Π΅ΠΏΠ΅Ρ€ΡŒ страница прилоТСния Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Ρ€Π°Π½ΡŒΡˆΠ΅.

Как ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ, рСкомСндуСтся ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с ΠΈΠ·ΡƒΡ‡Π΅Π½Π½Ρ‹ΠΌΠΈ сСгодня концСпциями для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΡ… ΡƒΡΠ²ΠΎΠΈΡ‚ΡŒ. НапримСр β€” ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΠΊΠΎΠ΄ΠΎΠΌ, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ свойства, ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Π΅ΠΌΡ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ, ΠΈ ΠΏΠΎΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅.

Π˜Ρ‚ΠΎΠ³ΠΈ

БСгодня ΠΌΡ‹ познакомились с ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠ΅ΠΉ свойств, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ React для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΈΡ… ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΈ внСшним Π²ΠΈΠ΄ΠΎΠΌ. Π­Ρ‚ΠΈ свойства Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡŽΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ HTML-элСмСнтов, Π½ΠΎ, ΠΏΠΎΠ»ΡŒΠ·ΡƒΡΡΡŒ свойствами Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ…, программист ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊΠΎΠΉ смысл ΠΎΠ½ΠΈ нСсут ΠΈ Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ с Π½ΠΈΠΌΠΈ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅. Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π°Π· вас Π±ΡƒΠ΄Π΅Ρ‚ ΠΆΠ΄Π°Ρ‚ΡŒ практичСскоС занятиС ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ со свойствами ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ ΠΏΠΎ стилизации.

Π£Π²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ! Как Π²Ρ‹ экспСримСнтировали с ΠΊΠΎΠ΄ΠΎΠΌ сСгодняшнСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ со свойствами React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²?

Π£Ρ‡Π΅Π±Π½Ρ‹ΠΉ курс ΠΏΠΎ React, Ρ‡Π°ΡΡ‚ΡŒ 2: Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

Π£Ρ‡Π΅Π±Π½Ρ‹ΠΉ курс ΠΏΠΎ React, Ρ‡Π°ΡΡ‚ΡŒ 2: Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

Β CСгодня ΠΌΡ‹ прСдставляСм Π²Π°ΡˆΠ΅ΠΌΡƒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ курса. Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ….

β†’Β Π§Π°ΡΡ‚ΡŒ 1: ΠΎΠ±Π·ΠΎΡ€ курса, ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹ популярности React, ReactDOM ΠΈ JSX
ЗанятиС 6. Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹


На ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ практичСском занятии ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ вСсь JSX-ΠΊΠΎΠ΄, Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ HTML-элСмСнты, Π² Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°Β ReactDOM.render(). Π’ нашСм случаС Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Ρ‘Ρ‚ ΠΎ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ спискС, Ρ‚Π°ΠΊΠΎΠΌ, описаниС ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ прСдставлСно Π½ΠΈΠΆΠ΅.



import React from "react"
import ReactDOM from "react-dom"

ReactDOM.render(
 Β <ul>
 Β Β Β <li>1</li>
 Β Β Β <li>2</li>
 Β Β Β <li>3</li>
 Β </ul>,
 Β document.getElementById("root")
)


ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ сСбС, Ρ‡Ρ‚ΠΎ Π½Π°Π΄ΠΎ вывСсти, ΠΏΠΎΠ»ΡŒΠ·ΡƒΡΡΡŒ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠΌ, Ρ†Π΅Π»ΡƒΡŽ Π²Π΅Π±-страницу, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ сотни элСмСнтов. Если это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Ρ‚ΠΎ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ практичСски Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. Когда ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°Ρ… популярности React, ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π½ΠΈΡ… Π±Ρ‹Π»Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° этой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², подходящих для ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ использования. БСйчас ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ React.

Π­Ρ‚ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Β«Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈΒ» ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ ΠΈΡ…, конструируя особыС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ.Β 

Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π½ΠΎΠ²ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΈ Π΄Π°Π΄ΠΈΠΌ Π΅ΠΉ имя MyApp:



import React from "react"
import ReactDOM from "react-dom"

function MyApp() {
 Β 
}

ReactDOM.render(
 Β <ul>
 Β Β Β <li>1</li>
 Β Β Β <li>2</li>
 Β Β Β <li>3</li>
 Β </ul>,
 Β document.getElementById("root")
)


Имя Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ сдСлано ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊΠΈ ΠΏΠΎ Ρ‚ΠΎΠΉ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅, Ρ‡Ρ‚ΠΎ здСсь ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ схСма имСнования Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ-конструкторов. Π˜Ρ… ΠΈΠΌΠ΅Π½Π° (фактичСски β€” ΠΈΠΌΠ΅Π½Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²) Π·Π°ΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ Π² Π²Π΅Ρ€Π±Π»ΡŽΠΆΡŒΠ΅ΠΌ стилС β€” ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π±ΡƒΠΊΠ²Ρ‹ слов, ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠ½ΠΈ состоят, Π΄Π΅Π»Π°ΡŽΡ‚ΡΡ Π·Π°Π³Π»Π°Π²Π½Ρ‹ΠΌΠΈ, Π² Ρ‚ΠΎΠΌ числС β€” пСрвая Π±ΡƒΠΊΠ²Π° ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ слова. Π’Π°ΠΌ слСдуСт строго ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ этого соглашСния ΠΎΠ± ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ.

Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ устроСны довольно просто. А ΠΈΠΌΠ΅Π½Π½ΠΎ, Π² Ρ‚Π΅Π»Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΠΌΠ°Π½Π΄Π°, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΡŽΡ‰Π°Ρ JSX-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈ прСдставляСт ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚.

Π’ нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ достаточно Π²Π·ΡΡ‚ΡŒ ΠΊΠΎΠ΄ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка ΠΈ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΎΠ·Π²Ρ€Π°Ρ‚ этого ΠΊΠΎΠ΄Π° ΠΈΠ· Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ это ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ:



function MyApp() {
 Β return <ul>
 Β Β Β <li>1</li>
 Β Β Β <li>2</li>
 Β Β Β <li>3</li>
 Β </ul>
}


И хотя Π² Π΄Π°Π½Π½ΠΎΠΌ случаС всё Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ оТидаСтся, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ, ΠΊΠΎΠΌΠ°Π½Π΄Π°Β returnΒ Π²Π΅Ρ€Π½Ρ‘Ρ‚ вСсь этот ΠΊΠΎΠ΄, рСкомСндуСтся Π·Π°ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ конструкции Π² ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ скобки ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π΅Ρ‰Ρ‘ ΠΎΠ΄Π½ΠΎ соглашСниС, принятоС Π² React ΠΏΡ€ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠΎΠ΄Π° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ. Оно Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ элСмСнты ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽΡ‚ Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… строках ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°ΡŽΡ‚. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ примСнСния Π²Ρ‹ΡˆΠ΅ΠΎΠΏΠΈΡΠ°Π½Π½Ρ‹Ρ… ΠΈΠ΄Π΅ΠΉ ΠΊΠΎΠ΄ нашСго Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:



function MyApp() {
 Β return (
 Β Β Β <ul>
 Β Β Β Β Β <li>1</li>
 Β Β Β Β Β <li>2</li>
 Β Β Β Β Β <li>3</li>
 Β Β Β </ul>
 Β )
}


ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ возвращаСмая ΠΈΠ· ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° оказываСтся ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠ΅ΠΉ Π½Π° ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, Π² ΠΌΠ΅Ρ‚ΠΎΠ΄Π΅Β ReactDOM.render(), ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ экзСмпляр нашСго Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, ΠΏΠ΅Ρ€Π΅Π΄Π°Π² Π΅Π³ΠΎ этому ΠΌΠ΅Ρ‚ΠΎΠ΄Ρƒ Π² качСствС ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ Π·Π°ΠΊΠ»ΡŽΡ‡ΠΈΠ² Π΅Π³ΠΎ Π² JSX-Ρ‚Π΅Π³.



import React from "react"
import ReactDOM from "react-dom"

function MyApp() {
 Β return (
 Β Β Β <ul>
 Β Β Β Β Β <li>1</li>
 Β Β Β Β Β <li>2</li>
 Β Β Β Β Β <li>3</li>
 Β Β Β </ul>
 Β )
}

ReactDOM.render(
 Β <MyApp />,
 Β document.getElementById("root")
)


МоТно Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ‚ΡƒΡ‚ использован ΡΠ°ΠΌΠΎΠ·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ Ρ‚Π΅Π³. Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠ΅ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ структуру, ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ конструкции строятся ΠΈΠ½Π°Ρ‡Π΅, Π½ΠΎ ΠΏΠΎΠΊΠ° ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊΠΈΠΌΠΈ ΡΠ°ΠΌΠΎΠ·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΠΈΡΡ Ρ‚Π΅Π³Π°ΠΌΠΈ.

Если ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ страницу, ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ срСдствами Π²Ρ‹ΡˆΠ΅ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, Ρ‚ΠΎ Π΅Ρ‘ внСшний Π²ΠΈΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅, ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ½ Π±Ρ‹Π» Π΄ΠΎ выноса Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚.

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΡŽΡ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, подчиняСтся Ρ‚Π΅ΠΌ ΠΆΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ рассматривали Π² ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΊ ΠΏΠ΅Ρ€Π²ΠΎΠΌΡƒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρƒ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°Β ReactDOM.render(). Π’ΠΎ Π΅ΡΡ‚ΡŒ β€” нСльзя, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² Π½Π΅ΠΉ присутствовали JSX-элСмСнты, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ Π·Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ. ΠŸΠΎΠΏΡ‹Ρ‚ΠΊΠ° ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ послС элСмСнта <ul> любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ элСмСнт, скаТСм β€”Β <ol>, ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Ρ‚ ΠΊ ошибкС. Π˜Π·Π±Π΅ΠΆΠ°Ρ‚ΡŒ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ ΠΌΠΎΠΆΠ½ΠΎ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, просто ΠΎΠ±Π΅Ρ€Π½ΡƒΠ² всё, Ρ‡Ρ‚ΠΎ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, Π² элСмСнт <div>.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ ΡƒΠΆΠ΅ Π½Π°Ρ‡Π°Π»ΠΈ ΠΎΡ‰ΡƒΡ‰Π°Ρ‚ΡŒ Ρ‚ΠΎ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΌΠΎΡ‰Π½Ρ‹Π΅ возмоТности Π΄Π°Ρ‘Ρ‚ Π½Π°ΠΌ использованиС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Π’ частности, Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Ρ‘Ρ‚ ΠΎ создании собствСнных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ содСрТат Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ JSX-ΠΊΠΎΠ΄Π°, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ собой описаниС HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, которая окаТСтся Π½Π° Π²Π΅Π±-страницС. Π’Π°ΠΊΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ.

Π’ нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ имССтся ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, выводящий простой HTML-список, Π½ΠΎ, ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ всё Π±ΠΎΠ»Π΅Π΅ слоТныС прилоТСния, ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, выводящиС Π΄Ρ€ΡƒΠ³ΠΈΠ΅ созданныС Π½Π°ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. Π’ ΠΈΡ‚ΠΎΠ³Π΅ всё это Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ Π² ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ HTML-элСмСнты, Π½ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° для формирования этих элСмСнтов понадобятся, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, дСсятки собствСнных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².

Π’ ΠΈΡ‚ΠΎΠ³Π΅, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ всё большС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΈΡ… Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„Π°ΠΉΠ»Π°Ρ…, Π½ΠΎ ΠΏΠΎΠΊΠ° Π²Π°ΠΌ Π²Π°ΠΆΠ½ΠΎ ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ обсудили, ΠΏΡ€ΠΈΠ²Ρ‹ΠΊΠ½ΡƒΡ‚ΡŒ ΠΊ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ. Π’ процСссС прохоТдСния курса Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ всё Π±ΠΎΠ»Π΅Π΅ ΠΈ Π±ΠΎΠ»Π΅Π΅ слоТныС Ρ„Π°ΠΉΠ»ΠΎΠ²Ρ‹Π΅ структуры.

На этом занятии ΠΌΡ‹ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Π»ΠΈ основы Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Π° Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ знания Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅.


ЗанятиС 7. ΠŸΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ. Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹


▍ЗаданиС


  1. ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΡŒΡ‚Π΅ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ React-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.

  2. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Β MyInfo, Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ HTML-элСмСнты:

  3. Π’Ρ‹Π²Π΅Π΄ΠΈΡ‚Π΅ экзСмпляр ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Β MyInfoΒ Π½Π° Π²Π΅Π±-страницу.O

β–Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅


Π‘Ρ‚ΠΈΠ»ΠΈΠ·ΡƒΠΉΡ‚Π΅ элСмСнты страницы, ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ·Π½Π°Π² ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ (ΠΏΠΎΠΈΡ‰ΠΈΡ‚Π΅ Π² Google). Надо ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎ стилизации ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΌΡ‹ Π² этом курсС Π΅Ρ‰Ρ‘ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ.


ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: сворачиваСмый Π±Π»ΠΎΠΊ


β–Π Π΅ΡˆΠ΅Π½ΠΈΠ΅


Π’ΡƒΡ‚ нас устроит такая ΠΆΠ΅ HTML-страница, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΌΡ‹ пользовались Ρ€Π°Π½Π΅Π΅. Π€Π°ΠΉΠ» с React-ΠΊΠΎΠ΄ΠΎΠΌ Ρ‚ΠΎΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π²ΠΏΠΎΠ»Π½Π΅ стандартно. А ΠΈΠΌΠ΅Π½Π½ΠΎ, ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌ Π² Π½Π΅Π³ΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, создадим каркас Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Β MyInfoΒ ΠΈ Π²Ρ‹Π·ΠΎΠ²Π΅ΠΌ ΠΌΠ΅Ρ‚ΠΎΠ΄Β render()Β ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°Β ReactDOM, ΠΏΠ΅Ρ€Π΅Π΄Π°Π² Π΅ΠΌΡƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π°Π΄ΠΎ вывСсти Π½Π° страницу, ΠΈ ссылку Π½Π° элСмСнт страницы, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Π²Π΅Π΄Π΅Π½ этот ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚. На Π΄Π°Π½Π½ΠΎΠΌ этапС Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:



import React from "react"
import ReactDOM from "react-dom"

function MyInfo() {
 Β 
}

ReactDOM.render(<MyInfo />, document.getElementById("root"))


Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½ΡƒΠΆΠ½ΠΎ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ ΠΈΠ·Β MyInfoΒ JSX-ΠΊΠΎΠ΄, Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ Π² соотвСтствии с Π·Π°Π΄Π°Π½ΠΈΠ΅ΠΌ. Π’ΠΎΡ‚ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ.



import React from "react"
import ReactDOM from "react-dom"

function MyInfo() {
 Β return (
 Β Β Β <div>
 Β Β Β Β Β <h2>Bob Ziroll</h2>
 Β Β Β Β Β <p>This is a paragraph about me...</p>
 Β Β Β Β Β <ul>
 Β Β Β Β Β Β Β <li>Thailand</li>
 Β Β Β Β Β Β Β <li>Japan</li>
 Β Β Β Β Β Β Β <li>Nordic Countries</li>
 Β Β Β Β Β </ul>
 Β Β Β </div>
 Β )
}

ReactDOM.render(
 Β <MyInfo />, 
 Β document.getElementById("root")
)


ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ конструкция, возвращаСмая ΠΈΠ·Β MyInfo, Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½Π° Π² ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ скобки, ΠΈ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ вывСсти, находятся Π²Π½ΡƒΡ‚Ρ€ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта <div>.


Π˜Ρ‚ΠΎΠ³ΠΈ


Π’ этом ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π΅ ΠΌΡ‹ познакомились с Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ React. Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π°Π· ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Ρ„Π°ΠΉΠ»Π°Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ ΠΎ структурС React-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, основанныС Π½Π° классах / Π‘Π»ΠΎΠ³ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ RUVDS.com / Π₯Π°Π±Ρ€

БСгодня ΠΌΡ‹ ΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΠΎΡ‡Π΅Ρ€Π΅Π΄Π½ΠΎΠ³ΠΎ занятия ΡƒΡ‡Π΅Π±Π½ΠΎΠ³ΠΎ курса ΠΏΠΎ React. Оно посвящСно ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ, основанным Π½Π° классах. Π’Π°ΠΊΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ с использованиСм ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ слова class.

β†’ Π§Π°ΡΡ‚ΡŒ 1: ΠΎΠ±Π·ΠΎΡ€ курса, ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹ популярности React, ReactDOM ΠΈ JSX

β†’ Π§Π°ΡΡ‚ΡŒ 2: Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

β†’ Π§Π°ΡΡ‚ΡŒ 3: Ρ„Π°ΠΉΠ»Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², структура ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 4: Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΈ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

β†’ Π§Π°ΡΡ‚ΡŒ 5: Π½Π°Ρ‡Π°Π»ΠΎ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, основы стилизации

β†’ Π§Π°ΡΡ‚ΡŒ 6: ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… особСнностях курса, JSX ΠΈ JavaScript

β†’ Π§Π°ΡΡ‚ΡŒ 7: встроСнныС стили

β†’ Π§Π°ΡΡ‚ΡŒ 8: ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, знакомство со свойствами ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 9: свойства ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 10: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ со свойствами ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ стилизации

β†’ Π§Π°ΡΡ‚ΡŒ 11: динамичСскоС Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄ массивов map

β†’ Π§Π°ΡΡ‚ΡŒ 12: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ, Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ

β†’ Π§Π°ΡΡ‚ΡŒ 13: ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, основанныС Π½Π° классах

β†’ Π§Π°ΡΡ‚ΡŒ 14: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ ΠΏΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ, основанным Π½Π° классах, состояниС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 15: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌΡ‹ ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с состояниСм ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 16: Ρ‡Π΅Ρ‚Π²Ρ‘Ρ€Ρ‚Ρ‹ΠΉ этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° событий

β†’ Π§Π°ΡΡ‚ΡŒ 17: пятый этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, модификация состояния ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 18: ΡˆΠ΅ΡΡ‚ΠΎΠΉ этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ

β†’ Π§Π°ΡΡ‚ΡŒ 19: ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 20: ΠΏΠ΅Ρ€Π²ΠΎΠ΅ занятиС ΠΏΠΎ условному Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Ρƒ

β†’ Π§Π°ΡΡ‚ΡŒ 21: Π²Ρ‚ΠΎΡ€ΠΎΠ΅ занятиС ΠΈ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ ΠΏΠΎ условному Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Ρƒ

β†’ Π§Π°ΡΡ‚ΡŒ 22: сСдьмой этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ· Π²Π½Π΅ΡˆΠ½ΠΈΡ… источников

β†’ Π§Π°ΡΡ‚ΡŒ 23: ΠΏΠ΅Ρ€Π²ΠΎΠ΅ занятиС ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ

β†’ Π§Π°ΡΡ‚ΡŒ 24: Π²Ρ‚ΠΎΡ€ΠΎΠ΅ занятиС ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ

β†’ Π§Π°ΡΡ‚ΡŒ 25: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ

β†’ Π§Π°ΡΡ‚ΡŒ 26: Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½ Container/Component

β†’ Π§Π°ΡΡ‚ΡŒ 27: курсовой ΠΏΡ€ΠΎΠ΅ΠΊΡ‚

ЗанятиС 24. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, основанныС Π½Π° классах

β†’ ΠžΡ€ΠΈΠ³ΠΈΠ½Π°Π»

Если Π²Ρ‹, Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π½Π°Ρ‡Π°Π»ΠΈ ΠΎΡΠ²Π°ΠΈΠ²Π°Ρ‚ΡŒ этот ΡƒΡ‡Π΅Π±Π½Ρ‹ΠΉ курс, ΠΈΠ·ΡƒΡ‡Π°Π»ΠΈ React ΠΏΠΎ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°ΠΌ ΠΊΠ°ΠΊΠΈΡ…-Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… курсов, Ρƒ вас ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ вопрос ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρƒ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ здСсь ΠΌΡ‹ ΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ. Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… Π΄Ρ€ΡƒΠ³ΠΈΡ… курсах эта Ρ‚Π΅ΠΌΠ° Π»ΠΈΠ±ΠΎ Π½Π΅ освСщаСтся, Π»ΠΈΠ±ΠΎ ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ… говорят ΠΊΠ°ΠΊ ΠΎ Ρ‡Ρ‘ΠΌ-Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠΌ, Π² Ρ‡Ρ‘ΠΌ Π½Π΅Ρ‚ особой нСобходимости. НСкоторыС Π°Π²Ρ‚ΠΎΡ€Ρ‹ ΠΈΠ΄ΡƒΡ‚ Π΅Ρ‰Ρ‘ дальшС ΠΈ говорят ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, отдавая ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ, основанным Π½Π° классах. Π­Ρ‚ΠΎ, ΠΏΠΎ ΠΈΡ… мнСнию, избавляСт программиста ΠΎΡ‚ Π½Π΅Π½ΡƒΠΆΠ½ΠΎΠΉ Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ. Π― ΠΆΠ΅ полагаю, Ρ‡Ρ‚ΠΎ Π»ΡŽΠ±ΠΎΠΌΡƒ, ΠΊΡ‚ΠΎ ΠΈΠ·ΡƒΡ‡Π°Π΅Ρ‚ React, ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Ρƒ ΠΈ ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΎ популярных Π² наши Π΄Π½ΠΈ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°Ρ… ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ. Π’ частности, сСйчас Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅, Π² соотвСтствии с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π²Π΅Π·Π΄Π΅, Π³Π΄Π΅ это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, основанныС Π½Π° классах β€” лишь Ρ‚Π°ΠΌ, Π³Π΄Π΅ ΠΎΠ½ΠΈ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹. ΠŸΡ€ΠΈ этом Π½Π°Π΄ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ всё это β€” лишь Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ сам Ρ€Π΅ΡˆΠ°Π΅Ρ‚ ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠΎΠ½ΡΡ‚Ρ€ΡƒΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свои прилоТСния.

Когда я Π²Π΅Π΄Ρƒ курсы ΠΏΠΎ React, я ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ с Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ β€” понятныС конструкции. Одного взгляда Π½Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ достаточно для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠΌΠ΅Π½Π½ΠΎ дСйствия ΠΎΠ½ выполняСт. Π‘ΠΊΠ°ΠΆΠ΅ΠΌ, Π²ΠΎΡ‚ ΠΊΠΎΠ΄ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдставляСт собой ΠΎΠ±Ρ‹Ρ‡Π½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΡŽΡ‰ΡƒΡŽ элСмСнт <div>, содСрТащий элСмСнт <h2> с Π½Π΅ΠΊΠΈΠΌ тСкстом.

function App() {
 Β Β Β return (
 Β Β Β Β Β Β Β <div>
 Β Β Β Β Β Β Β Β Β Β Β <h2>Code goes here</h2>
 Β Β Β Β Β Β Β </div>
 Β Β Β )
}

Но, ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ‹ углубляСмся Π² ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ React, знакомимся с Π΅Π³ΠΎ возмоТностями, оказываСтся, Ρ‡Ρ‚ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π½Π΅ способны ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ Π½Π°ΠΌ всё Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Π½Π°ΠΌ ΠΎΡ‚ React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ сСгодня ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ…, основанных Π½Π° классах. А ΠΈΠΌΠ΅Π½Π½ΠΎ, Π½Π°Ρ‡Π½Ρ‘ΠΌ с создания ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, основанного Π½Π° классС, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ выполняСт Ρ‚Π΅ ΠΆΠ΅ дСйствия, Ρ‡Ρ‚ΠΎ ΠΈ Π²Ρ‹ΡˆΠ΅ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½Π½Ρ‹ΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚. А Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… занятиях ΠΌΡ‹ коснёмся Ρ‚Π΅Ρ… Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… возмоТностСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π°ΡŽΡ‚ Π½Π°ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, основанныС Π½Π° классах. Π’ частности, Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Ρ‘Ρ‚ ΠΎ возмоТности Ρ€Π°Π±ΠΎΡ‚Ρ‹ с состояниСм ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ с ΠΌΠ΅Ρ‚ΠΎΠ΄Π°ΠΌΠΈ ΠΈΡ… ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π°.

ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅ΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, основанный Π½Π° классС. Если Π²Ρ‹ Π½Π΅ особСнно Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ словом class, появившСмся Π² ES6, ΠΈ с возмоТностями, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ, рСкомСндуСтся ΡƒΠ΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с классами ΠΏΠΎΠ±Π»ΠΈΠΆΠ΅.

ОписаниС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, основанного Π½Π° классах, начинаСтся с ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ слова class. Π—Π°Ρ‚Π΅ΠΌ ΠΈΠ΄Ρ‘Ρ‚ имя ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, составляСмоС ΠΏΠΎ Ρ‚Π΅ΠΌ ΠΆΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌ, Ρ‡Ρ‚ΠΎ ΠΈ ΠΈΠΌΠ΅Π½Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². ΠŸΡ€ΠΈ этом послС конструкции Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅ class App Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ΄Ρ‚ΠΈ Π½Π΅ Π½Π΅Ρ‡Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ Ρ„ΠΈΠ³ΡƒΡ€Π½ΠΎΠΉ скобки, Π° конструкция Π²ΠΈΠ΄Π° extends React.Component. ПослС Π½Π΅Ρ‘ ставится ΠΏΠ°Ρ€Π° Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Ρ… скобок, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π±ΡƒΠ΄Π΅Ρ‚ описано Ρ‚Π΅Π»ΠΎ класса.

ΠšΠ»Π°ΡΡΡ‹ Π² JavaScript ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой надстройку Π½Π°Π΄ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎΠΉ модСлью ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ½ΠΎΠ³ΠΎ наслСдования. Π‘ΡƒΡ‰Π½ΠΎΡΡ‚ΡŒ конструкции class App extends React.Component сводится ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ объявляСм Π½ΠΎΠ²Ρ‹ΠΉ класс ΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠΌ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ React.Component. НаличиС Ρƒ нашСго ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° этого ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² этом ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ всСми Ρ‚Π΅ΠΌΠΈ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ возмоТностями, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ Π² React.Component.

Π˜Ρ‚Π°ΠΊ, Π½Π° Π΄Π°Π½Π½ΠΎΠΌ этапС Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ, основанном Π½Π° классах, Π΅Π³ΠΎ ΠΊΠΎΠ΄ выглядит Ρ‚Π°ΠΊ:

class App extends React.Component {
 Β Β Β 
}

Π£ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, основанного Π½Π° классах, Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ, ΠΏΠΎ мСньшСй ΠΌΠ΅Ρ€Π΅, ΠΎΠ΄ΠΈΠ½ ΠΌΠ΅Ρ‚ΠΎΠ΄. Π­Ρ‚ΠΎ β€” ΠΌΠ΅Ρ‚ΠΎΠ΄ render(). Π”Π°Π½Π½Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ Ρ‚ΠΎ ΠΆΠ΅ самоС, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌ ΠΈΠ· Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Π’ΠΎΡ‚ ΠΊΠ°ΠΊ выглядит ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, основанного Π½Π° классах, Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΡŽΡ‰Π΅Π³ΠΎ Ρ‚Π΅ ΠΆΠ΅ возмоТности, Ρ‡Ρ‚ΠΎ ΠΈ Π²Ρ‹ΡˆΠ΅ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½Π½Ρ‹ΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚.

class App extends React.Component {
 Β Β Β render() {
 Β Β Β Β Β Β Β return (
 Β Β Β Β Β Β Β Β Β Β Β <div>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <h2>Code goes here</h2>
 Β Β Β Β Β Β Β Β Β Β Β </div>
 Β Β Β Β Β Β Β )
 Β Β Β }
}

Π Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ, основанными Π½Π° классах Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ с Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ. Π’ΠΎ Π΅ΡΡ‚ΡŒ, Π² нашСм случаС достаточно Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π½Π° Π½ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠ΄ ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΏΡ€Π΅ΠΆΠ΄Π΅.

ΠŸΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄Π΅ render(). Если, ΠΏΠ΅Ρ€Π΅Π΄ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ элСмСнтов, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌΡ‹Ρ… этим ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ, Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΈΠ΅ вычислСния, ΠΈΡ… Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ ΠΈΠΌΠ΅Π½Π½ΠΎ Π² этом ΠΌΠ΅Ρ‚ΠΎΠ΄Π΅, ΠΏΠ΅Ρ€Π΅Π΄ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ return. Π’ΠΎ Π΅ΡΡ‚ΡŒ, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ Π½Π΅ΠΊΠΈΠΉ ΠΊΠΎΠ΄, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰ΠΈΠΉ порядок формирования Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ прСдставлСния ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, этот ΠΊΠΎΠ΄ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² ΠΌΠ΅Ρ‚ΠΎΠ΄ render. НапримСр, Ρ‚ΡƒΡ‚ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ настройку стилСй Π² Ρ‚ΠΎΠΌ случаС, Ссли Π²Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ΡΡŒ встроСнными стилями. Π—Π΄Π΅ΡΡŒ ΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈ ΠΊΠΎΠ΄, Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΡŽΡ‰ΠΈΠΉ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ условного Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°, ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ конструкции.

Если Π²Ρ‹ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с классами, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ собствСнный ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΈ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄, готовящий ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΊ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ, Π² Π½Ρ‘ΠΌ, послС Ρ‡Π΅Π³ΠΎ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ этот ΠΌΠ΅Ρ‚ΠΎΠ΄ Π² ΠΌΠ΅Ρ‚ΠΎΠ΄Π΅ render. Выглядит это Ρ‚Π°ΠΊ:

class App extends React.Component {
 Β Β Β 
 Β Β Β yourMethodHere() {
 Β Β Β Β Β Β Β 
 Β Β Β }
 Β Β Β 
 Β Β Β render() {
 Β Β Β Β Β Β Β const style = this.yourMethodHere()
 Β Β Β Β Β Β Β return (
 Β Β Β Β Β Β Β Β Β Β Β <div>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <h2>Code goes here</h2>
 Β Β Β Β Β Β Β Β Β Β Β </div>
 Β Β Β Β Β Β Β )
 Β Β Β }
}

А ΠΈΠΌΠ΅Π½Π½ΠΎ, Ρ‚ΡƒΡ‚ ΠΌΡ‹ исходим ΠΈΠ· прСдполоТСния ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π² ΠΌΠ΅Ρ‚ΠΎΠ΄Π΅ yourMethodHere() производится Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ стилСй, Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚, записываСтся Π² константу style, ΠΎΠ±ΡŠΡΠ²Π»Π΅Π½Π½ΡƒΡŽ Π² ΠΌΠ΅Ρ‚ΠΎΠ΄Π΅ render(). ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ для обращСния ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ собствСнному ΠΌΠ΅Ρ‚ΠΎΠ΄Ρƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ слово this. ПозТС ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎΠ± особСнностях этого ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ слова, Π½ΠΎ ΠΏΠΎΠΊΠ° остановимся Π½Π° прСдставлСнной здСсь конструкции.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ…, основанных Π½Π° классах, Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ со свойствами, ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Π΅ΠΌΡ‹ΠΌΠΈ ΠΈΠΌ ΠΏΡ€ΠΈ создании ΠΈΡ… экзСмпляров.

ΠŸΡ€ΠΈ использовании Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΌΡ‹ объявляли ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ с ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ props, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠΌ собой ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΏΠ°Π΄Π°Π»ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Π»ΠΎΡΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ ΠΏΡ€ΠΈ создании Π΅Π³ΠΎ экзСмпляра. Выглядит это Ρ‚Π°ΠΊ:

function App(props) {
 Β Β Β return (
 Β Β Β Β Β Β Β <div>
 Β Β Β Β Β Β Β Β Β Β Β <h2>{props.whatever}</h2>
 Β Β Β Β Β Β Β </div>
 Β Β Β )
}

ΠŸΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ, основанном Π½Π° классС, Ρ‚ΠΎ ΠΆΠ΅ самоС выглядит Ρ‚Π°ΠΊ:

class App extends React.Component {
 Β Β Β render() {
 Β Β Β Β Β Β Β return (
 Β Β Β Β Β Β Β Β Β Β Β <div>
 Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <h2>{this.props.whatever}</h2>
 Β Β Β Β Β Β Β Β Β Β Β </div>
 Β Β Β Β Β Β Β )
 Β Β Β }
}

Π˜Ρ‚ΠΎΠ³ΠΈ

Как ΡƒΠΆΠ΅ Π±Ρ‹Π»ΠΎ сказано, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, основанныС Π½Π° классах, Π΄Π°ΡŽΡ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ мноТСство возмоТностСй. Об этих возмоТностях ΠΌΡ‹ Π΅Ρ‰Ρ‘ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ. А сСйчас ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΡƒΠ·Π½Π°Π»ΠΈ сСгодня ΠΈ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒΡΡ ΠΊ практичСскому Π·Π°Π½ΡΡ‚ΠΈΡŽ ΠΏΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ основаны Π½Π° классах.

Π£Π²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ! Если Π²Ρ‹ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ React β€” просим Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, Π² ΠΊΠ°ΠΊΠΈΡ… ситуациях Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, Π° Π² ΠΊΠ°ΠΊΠΈΡ… β€” ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, основанныС Π½Π° классах.

Наши Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ написания ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React

Наши Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ написания ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React

Я помню, ΠΊΠΎΠ³Π΄Π° ΡΒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Π» ΠΏΠΈΡΠ°Ρ‚ΡŒ Π½Π°Β React, я видСл ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·Π½Ρ‹Ρ… ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ² ΠΊΒ ΠΏΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², сильно Ρ€Π°Π·Π»ΠΈΡ‡Π°ΡŽΡ‰ΠΈΡ…ΡΡ ΠΎΡ‚Β ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ° Π΄ΠΎΒ ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ°. Π˜Β Ρ…ΠΎΡ‚Ρ с тСх ΠΏΠΎΡ€ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ созрСл, ΠΏΠΎΡ…ΠΎΠΆΠ΅, до сих ΠΏΠΎΡ€ нС сущСствуСт СдинствСнного Β«ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎΒ» способа написания ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².

За послСдний Π³ΠΎΠ΄ Π²Β MuseFind наша ΠΊΠΎΠΌΠ°Π½Π΄Π° написала ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React. ΠœΡ‹Β ΠΏΠΎΡΡ‚Π΅ΠΏΠ΅Π½Π½ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Π΅ΠΌ наш ΠΏΠΎΠ΄Ρ…ΠΎΠ΄, ΠΏΠΎΠΊΠ° ΠΎΠ½Β Π½Π΅Β Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ нас ΡƒΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ.

В этом руководствС я собрал наши Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ. ΠœΡ‹Β Π½Π°Π΄Π΅Π΅ΠΌΡΡ, Ρ‡Ρ‚ΠΎ это Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, Π±ΡƒΠ΄ΡŒ Π²Ρ‹Β Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ ΠΈΠ»ΠΈ ΠΎΠΏΡ‹Ρ‚Π½Ρ‹ΠΉ.

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΌΡ‹Β Π½Π°Ρ‡Π½Π΅ΠΌ, нСсколько Π·Π°ΠΌΠ΅Ρ‡Π°Π½ΠΈΠΉ:

  • ΠœΡ‹Β ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ синтаксис ES6 ΠΈΒ ES7.
  • Если Π²Ρ‹Β Π½Π΅Β ΡƒΠ²Π΅Ρ€Π΅Π½Ρ‹ Π²Β Ρ‚ΠΎΠΌ, Ρ‡Π΅ΠΌ ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈΒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹,Β ΠΏΡ€ΠΎΡ‡Ρ‚ΠΈΡ‚Π΅ это.
  • ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, Π΄Π°ΠΉΡ‚Π΅ Π½Π°ΠΌ Π·Π½Π°Ρ‚ΡŒ в коммСнтариях, Ссли у вас Π΅ΡΡ‚ΡŒ прСдлоТСния, вопросы ΠΈΠ»ΠΈ обратная связь.

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ на основС классов

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ на основС классов ΠΈΠΌΠ΅ΡŽΡ‚ состояниС ΠΈ/ΠΈΠ»ΠΈ содСрТат ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹. ΠœΡ‹Β ΡΡ‚Π°Ρ€Π°Π΅ΠΌΡΡ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ…Β ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅ΠΆΠ΅, но и для Π½ΠΈΡ… находится своС ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅.

Π”Π°Π²Π°ΠΉΡ‚Π΅ пошагово построим наш ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, строка за строкой.

Π˜ΠΌΠΏΠΎΡ€Ρ‚ CSS

import React, {Component} from ‘react’
import {observer} from ‘mobx-react’

import ExpandableForm from ‘./ExpandableForm’
import ‘./styles/ProfileContainer.css’



import React, {Component} from ‘react’

import {observer} from ‘mobx-react’

Β 

import ExpandableForm from ‘./ExpandableForm’

import ‘./styles/ProfileContainer.css’

МнС нравится CSS Π²Β JavaScript, Π²Β Ρ‚Π΅ΠΎΡ€ΠΈΠΈ. Но это всС Π΅Ρ‰Π΅ новая идСя, ΠΈΒ Π·Ρ€Π΅Π»ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ нС появилось. Π”ΠΎΒ Ρ‚Π΅Ρ… ΠΏΠΎΡ€ ΠΌΡ‹Β ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌ Ρ„Π°ΠΉΠ» CSS для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°.

ΠœΡ‹Β Ρ‚Π°ΠΊΠΆΠ΅ отдСляСм ΠΈΠΌΠΏΠΎΡ€Ρ‚ зависимостСй ΠΎΡ‚Β Π»ΠΎΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° пустой строкой.

Π˜Π½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΡ состояния

import React, {Component} from ‘react’
import {observer} from ‘mobx-react’

import ExpandableForm from ‘./ExpandableForm’
import ‘./styles/ProfileContainer.css’


export default class ProfileContainer extends Component {
state = { expanded: false }



import React, {Component} from ‘react’

import {observer} from ‘mobx-react’

Β 

import ExpandableForm from ‘./ExpandableForm’

import ‘./styles/ProfileContainer.css’

Β 

Β 

export default class ProfileContainer extends Component {

Β Β Β Β state = { expanded: false }

Π’Ρ‹Β Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ старый ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊΒ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ состояния в конструкторС. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎΠ±Β ΡΡ‚ΠΎΠΌΒ Π·Π΄Π΅ΡΡŒ. ΠœΡ‹Β ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ чистый ΠΏΡƒΡ‚ΡŒ.

ΠœΡ‹Β Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ экспортируСм наш класс ΠΏΠΎΒ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

propTypes and defaultProps

import React, {Component} from ‘react’
import {observer} from ‘mobx-react’

import ExpandableForm from ‘./ExpandableForm’
import ‘./styles/ProfileContainer.css’

export default class ProfileContainer extends Component {
state = { expanded: false }

static propTypes = {
model: React.PropTypes.object.isRequired,
title: React.PropTypes.string
}

static defaultProps = {
model: {
id: 0
},
title: ‘Your Name’
}


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

import React, {Component} from ‘react’

import {observer} from ‘mobx-react’

Β 

import ExpandableForm from ‘./ExpandableForm’

import ‘./styles/ProfileContainer.css’

Β 

export default class ProfileContainer extends Component {

Β Β Β Β state = { expanded: false }

Β 

Β Β Β Β static propTypes = {

Β Β Β Β Β Β Β Β model: React.PropTypes.object.isRequired,

Β Β Β Β Β Β Β Β title: React.PropTypes.string

Β Β Β Β }

Β 

Β Β Β Β static defaultProps = {

Β Β Β Β Β Β Β Β model: {

Β Β Β Β Β Β Β Β Β Β Β Β id: 0

Β Β Β Β Β Β Β Β },

Β Β Β Β Β Β Β Β title: ‘Your Name’

Β Β Β Β }

propTypes ΠΈΒ defaultPropsΒ β€” статичСскиС свойства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ максимально высоко Π²Β ΠΊΠΎΠ΄Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. Они Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ сразу Π²ΠΈΠ΄Π½Ρ‹ ΠΏΡ€ΠΈ Ρ‡Ρ‚Π΅Π½ΠΈΠΈ Ρ„Π°ΠΉΠ»Π°, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой своСго Ρ€ΠΎΠ΄Π° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ.

ВсС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ propTypes.

ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹

import React, {Component} from ‘react’
import {observer} from ‘mobx-react’

import ExpandableForm from ‘./ExpandableForm’
import ‘./styles/ProfileContainer.css’

export default class ProfileContainer extends Component {
state = { expanded: false }

static propTypes = {
model: React.PropTypes.object.isRequired,
title: React.PropTypes.string
}

static defaultProps = {
model: {
id: 0
},
title: ‘Your Name’
}

handleSubmit = (e) =&gt; {
e.preventDefault()
this.props.model.save()
}

handleNameChange = (e) =&gt; {
this.props.model.changeName(e.target.value)
}

handleExpand = (e) =&gt; {
e.preventDefault()
this.setState({ expanded: !this.state.expanded })
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

import React, {Component} from ‘react’

import {observer} from ‘mobx-react’

Β 

import ExpandableForm from ‘./ExpandableForm’

import ‘./styles/ProfileContainer.css’

Β 

export default class ProfileContainer extends Component {

Β Β Β Β state = { expanded: false }

Β 

Β Β Β Β static propTypes = {

Β Β Β Β Β Β Β Β model: React.PropTypes.object.isRequired,

Β Β Β Β Β Β Β Β title: React.PropTypes.string

Β Β Β Β }

Β 

Β Β Β Β static defaultProps = {

Β Β Β Β Β Β Β Β model: {

Β Β Β Β Β Β Β Β Β Β Β Β id: 0

Β Β Β Β Β Β Β Β },

Β Β Β Β Β Β Β Β title: ‘Your Name’

Β Β Β Β }

Β 

Β Β Β Β handleSubmit =

Ρ„Π°ΠΉΠ»Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², структура ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² / Π‘Π»ΠΎΠ³ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ RUVDS.com / Π₯Π°Π±Ρ€

Π’ этом ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π΅ ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Ρ„Π°ΠΉΠ»Π°Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ ΠΎ структурС React-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

β†’ Π§Π°ΡΡ‚ΡŒ 1: ΠΎΠ±Π·ΠΎΡ€ курса, ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹ популярности React, ReactDOM ΠΈ JSX

β†’ Π§Π°ΡΡ‚ΡŒ 2: Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

β†’ Π§Π°ΡΡ‚ΡŒ 3: Ρ„Π°ΠΉΠ»Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², структура ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 4: Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΈ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

β†’ Π§Π°ΡΡ‚ΡŒ 5: Π½Π°Ρ‡Π°Π»ΠΎ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, основы стилизации

β†’ Π§Π°ΡΡ‚ΡŒ 6: ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… особСнностях курса, JSX ΠΈ JavaScript

β†’ Π§Π°ΡΡ‚ΡŒ 7: встроСнныС стили

β†’ Π§Π°ΡΡ‚ΡŒ 8: ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, знакомство со свойствами ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 9: свойства ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 10: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ со свойствами ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ стилизации

β†’ Π§Π°ΡΡ‚ΡŒ 11: динамичСскоС Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄ массивов map

β†’ Π§Π°ΡΡ‚ΡŒ 12: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ, Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ

β†’ Π§Π°ΡΡ‚ΡŒ 13: ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, основанныС Π½Π° классах

β†’ Π§Π°ΡΡ‚ΡŒ 14: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ ΠΏΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ, основанным Π½Π° классах, состояниС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 15: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌΡ‹ ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с состояниСм ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 16: Ρ‡Π΅Ρ‚Π²Ρ‘Ρ€Ρ‚Ρ‹ΠΉ этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° событий

β†’ Π§Π°ΡΡ‚ΡŒ 17: пятый этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, модификация состояния ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 18: ΡˆΠ΅ΡΡ‚ΠΎΠΉ этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ

β†’ Π§Π°ΡΡ‚ΡŒ 19: ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

β†’ Π§Π°ΡΡ‚ΡŒ 20: ΠΏΠ΅Ρ€Π²ΠΎΠ΅ занятиС ΠΏΠΎ условному Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Ρƒ

β†’ Π§Π°ΡΡ‚ΡŒ 21: Π²Ρ‚ΠΎΡ€ΠΎΠ΅ занятиС ΠΈ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ ΠΏΠΎ условному Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Ρƒ

β†’ Π§Π°ΡΡ‚ΡŒ 22: сСдьмой этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ TODO-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ· Π²Π½Π΅ΡˆΠ½ΠΈΡ… источников

β†’ Π§Π°ΡΡ‚ΡŒ 23: ΠΏΠ΅Ρ€Π²ΠΎΠ΅ занятиС ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ

β†’ Π§Π°ΡΡ‚ΡŒ 24: Π²Ρ‚ΠΎΡ€ΠΎΠ΅ занятиС ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ

β†’ Π§Π°ΡΡ‚ΡŒ 25: ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌ ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ

β†’ Π§Π°ΡΡ‚ΡŒ 26: Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½ Container/Component

β†’ Π§Π°ΡΡ‚ΡŒ 27: курсовой ΠΏΡ€ΠΎΠ΅ΠΊΡ‚

ЗанятиС 8. Π€Π°ΠΉΠ»Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², структура React-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²

β†’ ΠžΡ€ΠΈΠ³ΠΈΠ½Π°Π»

▍Ѐайлы ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

Если ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ выполняли Π·Π°Π΄Π°Π½ΠΈΠ΅ ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ практичСского занятия, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ стандартный ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, созданный create-react-app, Ρ‚ΠΎ сСйчас Π² Π½Ρ‘ΠΌ задСйствован Ρ„Π°ΠΉΠ» index.html ΠΈΠ· ΠΏΠ°ΠΏΠΊΠΈ public, содСрТимоС ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ нас устраиваСт, ΠΈ Ρ„Π°ΠΉΠ» index.js ΠΈΠ· ΠΏΠ°ΠΏΠΊΠΈ src, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΡ‹ пишСм ΠΊΠΎΠ΄. Π’ частности, index.js выглядит сСйчас ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ:

import React from "react"
import ReactDOM from "react-dom"

function MyInfo() {
 Β return (
 Β Β Β <div>
 Β Β Β Β Β <h2>Bob Ziroll</h2>
 Β Β Β Β Β <p>This is a paragraph about me...</p>
 Β Β Β Β Β <ul>
 Β Β Β Β Β Β Β <li>Thailand</li>
 Β Β Β Β Β Β Β <li>Japan</li>
 Β Β Β Β Β Β Β <li>Nordic Countries</li>
 Β Β Β Β Β </ul>
 Β Β Β </div>
 Β )
}

ReactDOM.render(
 Β <MyInfo />, 
 Β document.getElementById("root")
)

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ΄ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° MyInfo содСрТится ΠΈΠΌΠ΅Π½Π½ΠΎ Π² этом Ρ„Π°ΠΉΠ»Π΅. Как Π²Ρ‹ ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, React позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ мноТСство ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Π² этом кроСтся ΠΎΠ΄Π½Π° ΠΈΠ· Π΅Π³ΠΎ ΡΠΈΠ»ΡŒΠ½Ρ‹Ρ… сторон. ΠŸΠΎΠ½ΡΡ‚Π½ΠΎ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ большого количСства ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅, хотя ΠΈ тСхничСски Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠ΅ΠΌΠΎ, Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ большиС нСудобства. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΊΠΎΠ΄ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Π΄Π°ΠΆΠ΅ Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΠΎ ΠΎΠ±ΡŠΡ‘ΠΌΡƒ, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΡŽΡ‚ Π² Π²ΠΈΠ΄Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ². ИмСнно Ρ‚Π°ΠΊΠΎΠΌΡƒ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Ρƒ ΠΈ рСкомСндуСтся ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ React-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

Π€Π°ΠΉΠ»Π°ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π΄Π°ΡŽΡ‚ ΠΈΠΌΠ΅Π½Π°, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ ΠΈΠΌΠ΅Π½Π°ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΠΊΠΎΠ΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… эти Ρ„Π°ΠΉΠ»Ρ‹ хранят. Π Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ ΠΈΡ…, Π² случаС с create-react-app, Π² Ρ‚ΠΎΠΉ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅ src, Π³Π΄Π΅ располоТСн Ρ„Π°ΠΉΠ» index.js. ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ Ρ„Π°ΠΉΠ» с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ MyInfo ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ имя MyInfo.js.

Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Ρ„Π°ΠΉΠ» MyInfo.js ΠΈ пСрСнСсём Π² Π½Π΅Π³ΠΎ ΠΊΠΎΠ΄ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° MyInfo, ΡƒΠ΄Π°Π»ΠΈΠ² Π΅Π³ΠΎ ΠΈΠ· index.js.

На Π΄Π°Π½Π½ΠΎΠΌ этапС Ρ€Π°Π±ΠΎΡ‚Ρ‹ index.js Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

import React from "react"
import ReactDOM from "react-dom"

ReactDOM.render(
 Β <MyInfo />, 
 Β document.getElementById("root")
)

Код MyInfo.js Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ:

function MyInfo() {
 Β Β Β return (
 Β Β Β Β Β <div>
 Β Β Β Β Β Β Β <h2>Bob Ziroll</h2>
 Β Β Β Β Β Β Β <p>This is a paragraph about me...</p>
 Β Β Β Β Β Β Β <ul>
 Β Β Β Β Β Β Β Β Β <li>Thailand</li>
 Β Β Β Β Β Β Β Β Β <li>Japan</li>
 Β Β Β Β Β Β Β Β Β <li>Nordic Countries</li>
 Β Β Β Β Β Β Β </ul>
 Β Β Β Β Β </div>
 Β Β Β )
}

Π’ΠΎΡ‚ ΠΊΠ°ΠΊ всё это выглядит Π² VSCode.
ΠŸΠ΅Ρ€Π΅Π½ΠΎΡ ΠΊΠΎΠ΄Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π² Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ»

Код ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΈΠ· index.js ΠΌΡ‹ пСрСнСсли, Π½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ²ΡˆΠ°ΡΡΡ Ρƒ нас сСйчас структура ΠΏΠΎΠΊΠ° Π΅Ρ‰Ρ‘ нСработоспособна.

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, вспомнитС β€” для Ρ‡Π΅Π³ΠΎ Π² index.js Π½ΡƒΠΆΠ½Π° ΠΊΠΎΠΌΠ°Π½Π΄Π° import React from "react", Π΄Π°ΠΆΠ΅ с ΡƒΡ‡Ρ‘Ρ‚ΠΎΠΌ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ ΠΊ React здСсь Π½Π΅ обращаСмся. ΠŸΡ€ΠΈΡ‡ΠΈΠ½Π° этого Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π±Π΅Π· ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° React Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΡ‹ этой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, Π² частности β€” JSX. ИмСнно благодаря этой ΠΊΠΎΠΌΠ°Π½Π΄Π΅ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ, Π½Π° ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… занятиях, ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρƒ ReactDOM.render() JSX-ΠΊΠΎΠ΄ ΠΈ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒ HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΡƒΡŽ Π½Π° Π΅Π³ΠΎ основС, Π½Π° страницу. Всё это Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ Π² Ρ„Π°ΠΉΠ»Π΅ MyInfo.js Π½Π°ΠΌ Ρ‚ΠΎΠΆΠ΅ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ React. Π­Ρ‚ΠΎ β€” обычная ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ° для Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².

Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ MyInfo ΠΈΠ· Ρ„Π°ΠΉΠ»Π° MyInfo.js ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ„Π°ΠΉΠ»Π°Ρ… прилоТСния. Π•Ρ‘ для этого Π½ΡƒΠΆΠ½ΠΎ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π’ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ возмоТности стандарта ES6. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΎΠ±Π½ΠΎΠ²Π»Ρ‘Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ MyInfo.js ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π²ΠΈΠ΄:

import React from "react"

function MyInfo() {
 Β Β Β return (
 Β Β Β Β Β <div>
 Β Β Β Β Β Β Β <h2>Bob Ziroll</h2>
 Β Β Β Β Β Β Β <p>This is a paragraph about me...</p>
 Β Β Β Β Β Β Β <ul>
 Β Β Β Β Β Β Β Β Β <li>Thailand</li>
 Β Β Β Β Β Β Β Β Β <li>Japan</li>
 Β Β Β Β Β Β Β Β Β <li>Nordic Countries</li>
 Β Β Β Β Β Β Β </ul>
 Β Β Β Β Β </div>
 Β Β Β )
}

export default MyInfo

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠΎΡ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ Π½Π°Π΄ Ρ„Π°ΠΉΠ»ΠΎΠΌ index.js. А ΠΈΠΌΠ΅Π½Π½ΠΎ, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ MyInfo Π±Ρ‹Π» Π±Ρ‹ доступСн Π² этом Ρ„Π°ΠΉΠ»Π΅. Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ доступным Π² index.js ΠΌΠΎΠΆΠ½ΠΎ, ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π² Π΅Π³ΠΎ.

Π§Ρ‚ΠΎ Ссли ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΏΠΎ ΠΎΠ±Ρ€Π°Π·Ρ†Ρƒ ΠΊΠΎΠΌΠ°Π½Π΄ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° react ΠΈ react-dom Π² index.js? НапримСр, внСсём Π² Ρ„Π°ΠΉΠ» Ρ‚Π°ΠΊΡƒΡŽ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π°:

import MyInfo from "MyInfo.js" // Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ

БистСма, ΡƒΠ²ΠΈΠ΄Π΅Π² Ρ‚Π°ΠΊΡƒΡŽ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ, Π² частности, ΠΎΠΏΠΈΡ€Π°ΡΡΡŒ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π² Π½Π΅ΠΉ ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ свСдСния ΠΎΠ± ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΌ ΠΏΡƒΡ‚ΠΈ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΊΠ°Ρ‚ΡŒ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° β€” ΠΌΠΎΠ΄ΡƒΠ»ΡŒ с ΠΈΠΌΠ΅Π½Π΅ΠΌ, Π·Π°Π΄Π°Π½Π½Ρ‹ΠΌ ΠΏΡ€ΠΈ Π²Ρ‹Π·ΠΎΠ²Π΅ этой ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ (Π²ΠΎΡ‚ ΠΊΠ°ΠΊ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ зависимости Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹, созданныС срСдствами create-react-app; эти зависимости ΠΏΠΎΡ‚ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² React-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π±Ρ‹Π»Π° ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° React). Π’Π°ΠΊΠΎΠ³ΠΎ модуля ΠΎΠ½Π° Π½Π΅ Π½Π°ΠΉΠ΄Ρ‘Ρ‚, Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Π° ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° Π½Π΅ сработаСт. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° Ρ„Π°ΠΉΠ»Π° Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΏΠΈΡΠ°Ρ‚ΡŒ с ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ ΠΏΡƒΡ‚ΠΈ ΠΊ Π½Π΅ΠΌΡƒ. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС нас устроит ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ Π½Π° Ρ‚Π΅ΠΊΡƒΡ‰ΡƒΡŽ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΡŽ (./) ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π° ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° ΠΏΡ€ΠΈΠΎΠ±Ρ€Π΅Ρ‚Ρ‘Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π²ΠΈΠ΄:

import MyInfo from "./MyInfo.js" // ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ссли Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Π΅ import, Π²Π°ΠΆΠ½ΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ с Π΅Ρ‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ JavaScript-Ρ„Π°ΠΉΠ»Ρ‹. Π’ΠΎ Π΅ΡΡ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ .js Π²ΠΏΠΎΠ»Π½Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ, ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π° import, приобрСтя Π²ΠΈΠ΄, ΠΏΠΎΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅, Π½Π΅ ΡƒΡ‚Ρ€Π°Ρ‚ΠΈΡ‚ работоспособности.

import MyInfo from "./MyInfo" // ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° JS-Ρ„Π°ΠΉΠ»ΠΎΠ² Π·Π°ΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ.

Π’ΠΎΡ‚ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ Ρ„Π°ΠΉΠ»Π° index.js.

import React from "react"
import ReactDOM from "react-dom"

import MyInfo from "./MyInfo"

ReactDOM.render(
 Β <MyInfo />, 
 Β document.getElementById("root")
)

▍Бтруктура ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°

ΠŸΡ€ΠΈ ростС Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΈ слоТности React-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Π² Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΌ состоянии ΠΈΡ… структуру. Π’ нашСм случаС, хотя наш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ сСйчас ΠΈ Π½Π΅Π²Π΅Π»ΠΈΠΊ, ΠΌΠΎΠΆΠ½ΠΎ, Π² ΠΏΠ°ΠΏΠΊΠ΅ src, ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠ°ΠΏΠΊΡƒ components, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½ΡƒΡŽ для хранСния Ρ„Π°ΠΉΠ»ΠΎΠ² с ΠΊΠΎΠ΄ΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².

Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Ρ‚Π°ΠΊΡƒΡŽ ΠΏΠ°ΠΏΠΊΡƒ ΠΈ пСрСмСстим Π² Π½Π΅Ρ‘ Ρ„Π°ΠΉΠ» MyInfo.js. ПослС этого Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° этого Ρ„Π°ΠΉΠ»Π° Π² index.js.

А ΠΈΠΌΠ΅Π½Π½ΠΎ, сСйчас ΠΏΡƒΡ‚ΡŒ ΠΊ MyInfo.js ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ этот Ρ„Π°ΠΉΠ» находится Ρ‚Π°ΠΌ ΠΆΠ΅, Π³Π΄Π΅ ΠΈ index.js, Π½ΠΎ Π½Π° самом Π΄Π΅Π»Π΅ Ρ„Π°ΠΉΠ» этот Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ находится Π² ΠΏΠ°ΠΏΠΊΠ΅ components, находящСйся Π² Ρ‚ΠΎΠΉ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ index.js. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ ΠΊ Π½Π΅ΠΌΡƒ Π² index.js Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ: ./components/MyInfo. Π’ΠΎΡ‚ ΠΊΠ°ΠΊΠΈΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Π½ΠΎΠ²Π»Ρ‘Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ index.js:

import React from "react"
import ReactDOM from "react-dom"

import MyInfo from "./components/MyInfo"

ReactDOM.render(
 Β <MyInfo />, 
 Β document.getElementById("root")
)

А Π²ΠΎΡ‚ ΠΊΠ°ΠΊ всё это выглядит Π² VSCode.
Папка для хранСния ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ ΠΈΠΌΠΏΠΎΡ€Ρ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΈΠ· этой ΠΏΠ°ΠΏΠΊΠΈ Π² VSCode

На самом Π΄Π΅Π»Π΅, ΠΎΠ΄Π½Π° ΠΏΠ°ΠΏΠΊΠ° components, прСдназначСнная для размСщСния ΠΊΠΎΠ΄Π° всСх ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² β€” это ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‡Ρ€Π΅Π·Π²Ρ‹Ρ‡Π°ΠΉΠ½ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Ρ‘Π½Π½ΠΎΠΉ структуры ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π’ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…, для обСспСчСния удобства Ρ€Π°Π±ΠΎΡ‚Ρ‹ с большим количСством сущностСй, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ слоТныС структуры ΠΏΠ°ΠΏΠΎΠΊ. Π’ΠΎ, ΠΊΠ°ΠΊΠΈΠΌΠΈ ΠΈΠΌΠ΅Π½Π½ΠΎ Π±ΡƒΠ΄ΡƒΡ‚ эти структуры, зависит ΠΎΡ‚ Π½ΡƒΠΆΠ΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈ ΠΎΡ‚ Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠΉ программиста.

РСкомСндуСтся ΠΏΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ со всСм Ρ‚Π΅ΠΌ, ΠΎ Ρ‡Ρ‘ΠΌ Π²Ρ‹ сСгодня ΡƒΠ·Π½Π°Π»ΠΈ. НапримСр, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» MyInfo.js Π² ΠΊΠ°ΠΊΡƒΡŽ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΏΠ°ΠΏΠΊΡƒ ΠΈ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ β€” Ρ‡Ρ‚ΠΎ ΠΈΠ· этого Π²Ρ‹ΠΉΠ΄Π΅Ρ‚, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ, ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Π² Π½Ρ‘ΠΌ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΊΠΎΠ΄. Когда Π² Ρ…ΠΎΠ΄Π΅ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… экспСримСнтов ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Π°Ρ Ρ€Π°Π±ΠΎΡ‚Π° ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Ρ€ΡƒΡˆΠ΅Π½Π° β€” ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ΅ ΠΈ снова привСсти ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π² работоспособноС состояниС.

Π˜Ρ‚ΠΎΠ³ΠΈ

На этом занятии ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ ΠΎΠ± ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠΈ ΠΊΠΎΠ΄Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π² Π²ΠΈΠ΄Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ², ΠΎΠ± экспортС ΠΈ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π΅ ΠΊΠΎΠ΄Π° срСдствами ES6 ΠΈ ΠΎ структурС React-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ². Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π°Π· ΠΌΡ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ Π·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с возмоТностями ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².

Π£Π²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ! ΠŸΡ€ΠΎΡΠΈΠΌ ΠΎΠΏΡ‹Ρ‚Π½Ρ‹Ρ… React-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ с Π½ΠΎΠ²ΠΈΡ‡ΠΊΠ°ΠΌΠΈ идСями ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρƒ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ структуры ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ React — RWieruch

Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ React — Ρ‚Π°ΠΊΠΆΠ΅ извСстныС ΠΊΠ°ΠΊ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ React — это статус-ΠΊΠ²ΠΎ написания соврСмСнных ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ React. Π’ ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΌ сущСствовали Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React, Π½ΠΎ с появлСниСм React Hooks стало Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ ΠΏΠΈΡΠ°Ρ‚ΡŒ всС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π² качСствС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React.

Π­Ρ‚ΠΎ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ руководство ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ‚ Π²Π°ΠΌ всС ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ React — ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² основном ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой просто Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ JavaScript, ΡΠ²Π»ΡΡŽΡ‰ΠΈΡ…ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ React , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΡŽΡ‚ JSX (синтаксис React) — Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ послС прочтСния этого руководства Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Ρ‹ ΠΊ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ с Π½ΠΈΠΌΠΈ соврСмСнныС прилоТСния React.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Π’ React Π΅ΡΡ‚ΡŒ нСсколько синонимов для этого Π²ΠΈΠ΄Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ Π²ΠΈΠ΄Π΅Π»ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Β«Π Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Β» ΠΈΠ»ΠΈ Β«Π Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΊΠ°ΠΊ Π½Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽΒ».

ОглавлСниС

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ React

Π”Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ с простого ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π² React, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ JSX:

 
 

import React from 'react';

function App () {

const welcome = 'ΠŸΡ€ΠΈΠ²Π΅Ρ‚, Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚!';

Π²ΠΎΠ·Π²Ρ€Π°Ρ‚

{привСтствиС}

;

}

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

Π­Ρ‚ΠΎ ΡƒΠΆΠ΅ основной синтаксис ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ React.ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° происходит с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ JavaScript, которая Π΄ΠΎΠ»ΠΆΠ½Π° Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ JSX — синтаксис React для опрСдСлСния сочСтания HTML ΠΈ JavaScript, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ JavaScript ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ с Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹ΠΌΠΈ скобками Π²Π½ΡƒΡ‚Ρ€ΠΈ HTML. Π’ нашСм случаС ΠΌΡ‹ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ с ΠΈΠΌΠ΅Π½Π΅ΠΌ welcome , которая ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π° Π² Ρ‚Π΅Π»Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΈ возвращаСтся ΠΊΠ°ΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ HTML Π² JSX.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Если Π²Ρ‹ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ класса React, Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ — это ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ React Π±Π΅Π· Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°.ВсС, Ρ‡Ρ‚ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ Π² Ρ‚Π΅Π»Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, — это функция Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°, которая Π² ΠΊΠΎΠ½Ρ†Π΅ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ JSX.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ React Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, Π²Ρ‹ опрСдСляСтС Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ Π΅Π³ΠΎ ΠΊΠ°ΠΊ HTML-элСмСнт с JSX Π² Ρ‚Π΅Π»Π΅ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°:

 
 

import React from 'react';

function App () {

return ;

}

function Headline () {

const welcome = 'ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Hello!';

Π²ΠΎΠ·Π²Ρ€Π°Ρ‚

{привСтствиС}

;

}

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

По сути, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ вас Π΅ΡΡ‚ΡŒ функция ΠΊΠ°ΠΊ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚.ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React ΠΈ ΠΈΡ… Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ Π΄Ρ€ΡƒΠ³ Π² Π΄Ρ€ΡƒΠ³Π΅ Π΄Π΅Π»Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ Composition in React. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, Π³Π΄Π΅ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΈ ΠΊΠ°ΠΊ Π΅Π³ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.

Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ React: props

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΡƒΠ·Π½Π°Π΅ΠΌ ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ React с props. Π’ React Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎΡ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ. Если Π²Ρ‹ Π½Π΅ Π·Π½Π°Π΅Ρ‚Π΅ ΠΎ Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Π°Ρ… Π² React, ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΡΡ‚Π°Ρ‚ΡŒΡŽ ΠΏΠΎ ссылкС. По сути, свойства Π² React всСгда ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽΡ‚ΡΡ Π²Π½ΠΈΠ· ΠΏΠΎ Π΄Π΅Ρ€Π΅Π²Ρƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²:

 
 

import React from response;

function App () {

const welcome = 'ΠŸΡ€ΠΈΠ²Π΅Ρ‚, Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚!';

return <Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° = {привСтствиС} />;

}

function Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ (Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Ρ‹) {

return

{props.Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅}

;

}

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

Props — это ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° React Function. Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΌ, ΠΌΡ‹ сами Ρ€Π΅ΡˆΠ°Π΅ΠΌ ΠΈΠ·Π²Π½Π΅, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ (ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ сСбя вСсти). ΠŸΡ€ΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ прилоТСния) Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Ρ‹ ΠΊΠ°ΠΊ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ HTML. Π—Π°Ρ‚Π΅ΠΌ Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ props доступСн ΠΊΠ°ΠΊ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ Π² сигнатурС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ props всСгда поступаСт ΠΊΠ°ΠΊ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, ΠΈ Ρ‡Π°Ρ‰Π΅ всСго Π²Π°ΠΌ всС Ρ€Π°Π²Π½ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ·Π²Π»Π΅ΠΊΠ°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΈΠ· props, дСструктуризация ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° JavaScript пригодится.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² сигнатурС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ для ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° props:

 
 

import React from 'react';

function App () {

const welcome = 'ΠŸΡ€ΠΈΠ²Π΅Ρ‚, Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚!';

return <Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° = {привСтствиС} />;

}

function Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ({Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅}) {

return

{value}

;

}

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Если Π²Ρ‹ Π·Π°Π±Ρ‹Π»ΠΈ ΠΎ дСструктуризации JavaScript ΠΈ просто ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ доступ ΠΊ Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Π°ΠΌ ΠΈΠ· сигнатуры Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ function Headline (value1, value2) {...} , Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ сообщСния «props undefined». Π­Ρ‚ΠΎ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ свойства всСгда доступны ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚Ρ‚ΡƒΠ΄Π° дСструктурированы: function Headline ({value1, value2}) {...} .

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС Ρ‚Ρ€ΡŽΠΊΠΎΠ² ΠΈ совСтов ΠΎ Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Π°Ρ… React, Π΅Ρ‰Π΅ Ρ€Π°Π· ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ со связанной ΡΡ‚Π°Ρ‚ΡŒΠ΅ΠΉ Π² Π½Π°Ρ‡Π°Π»Π΅ этого Ρ€Π°Π·Π΄Π΅Π»Π°. Π’Π°ΠΌ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ ΠΎ случаях, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ€Π°Π·Ρ€ΡƒΡˆΠ°Ρ‚ΡŒ свои свойства ΠΈ просто ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΡ… ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅ΠΌΡƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ с Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ΠΌ…синтаксис, извСстный ΠΊΠ°ΠΊ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ распространСния.

Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ React Arrow

Π‘ появлСниСм JavaScript ES6 Π½ΠΎΠ²Ρ‹Π΅ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ кодирования Π±Ρ‹Π»ΠΈ Π²Π²Π΅Π΄Π΅Π½Ρ‹ Π² JavaScript ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π² React. НапримСр, функция JavaScript ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½Π° ΠΊΠ°ΠΊ лямбда (функция стрСлки). Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈΠ½ΠΎΠ³Π΄Π° Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ стрСлки (ΠΈΠ»ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ лямбда-Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ). Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° наш ΠΏΠ΅Ρ€Π΅Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ React с Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ стрСлки:

 
 

import React from 'react';

const App = () => {

const welcome = 'ΠŸΡ€ΠΈΠ²Π΅Ρ‚, Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚!';

return <Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° = {привСтствиС} />;

};

const Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ = ({Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅}) => {

return

{Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅}

;

};

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

Оба Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° React Arrow Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ‚Π΅Π»ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.Однако Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ Π»Π΅Π³ΠΊΠΈΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΡ€Π°Ρ‚ΠΊΠΎΠ³ΠΎ Ρ‚Π΅Π»Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, Π½Π΅ выполняя Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹Ρ… дСйствий. Если ΡƒΠ±Ρ€Π°Ρ‚ΡŒ Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Π΅ скобки, явный Π²ΠΎΠ·Π²Ρ€Π°Ρ‚ становится нСявным Π²ΠΎΠ·Π²Ρ€Π°Ρ‚ΠΎΠΌ, ΠΈ Π΅Π³ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ:

 
 

import React from 'react';

const App = () => {

const welcome = 'ΠŸΡ€ΠΈΠ²Π΅Ρ‚, Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚!';

return <Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° = {привСтствиС} />;

};

const Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ = ({Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅}) =>

{Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅}

;

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

ΠŸΡ€ΠΈ использовании стрСлочных Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ мСняСтся для свойств.Они ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ доступны ΠΊΠ°ΠΊ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Ρ‹, ΠΊΠ°ΠΊ ΠΈ Ρ€Π°Π½ΡŒΡˆΠ΅. Π­Ρ‚ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ React с функциями ES6, Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ стрСлками, Π° Π½Π΅ функциями ES5, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π±ΠΎΠ»Π΅Π΅ стандартным способом выраТСния Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Π² JS.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Если Π²Ρ‹ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΠ»ΠΈΡΡŒ с ошибкой «НСоТиданный Ρ‚ΠΎΠΊΠ΅Π½ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ стрСлки ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ReactΒ», ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ для вашСго прилоТСния React доступСн JavaScript ES6. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ ΠΏΡ€ΠΈ использовании прилоТСния create-react-app это Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½ΠΎ, Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС, Ссли Π²Ρ‹ настроитС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ, Babel Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ ES6 ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ для вашСго прилоТСния React.

Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ React Π±Π΅Π· сохранСния состояния

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ Π²ΠΈΠ΄Π΅Π»ΠΈ Π΄ΠΎ сих ΠΏΠΎΡ€, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π±Π΅Π· сохранСния состояния. Они просто ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ Π²Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ Π² Π²ΠΈΠ΄Π΅ Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Π° ΠΈ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΡŽΡ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π² Π²ΠΈΠ΄Π΅ JSX: (Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Ρ‹) => JSX . Π’Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли ΠΎΠ½ΠΈ доступны Π² Π²ΠΈΠ΄Π΅ свойств, Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‚ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π²Ρ‹Ρ…ΠΎΠ΄. Π­Ρ‚ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π½Π΅ ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ состояниСм ΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΏΠΎΠ±ΠΎΡ‡Π½Ρ‹Ρ… эффСктов (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, доступа ΠΊ Π»ΠΎΠΊΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°). Π›ΡŽΠ΄ΠΈ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΈΡ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ Π±Π΅Π· состояния, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ состояния ΠΈ Π²Ρ‹Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ.Однако React Hooks ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ» ΠΈΠΌΠ΅Ρ‚ΡŒ состояниС Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ.

React Function Component: состояниС

React Hooks ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ состояниС (ΠΈ ΠΏΠΎΠ±ΠΎΡ‡Π½Ρ‹Π΅ эффСкты) Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ…. НаконСц, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ React с состояниСм! Допустим, ΠΌΡ‹ пСрСмСстили всю Π»ΠΎΠ³ΠΈΠΊΡƒ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ наш Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΈ Π½Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Π»ΠΈ Π΅ΠΌΡƒ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… свойств:

 
 

import React from 'react';

const App = () => {

return <Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ />;

};

const Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ = () => {

const welcome = 'ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Hello!';

Π²ΠΎΠ·Π²Ρ€Π°Ρ‚

{привСтствиС}

;

};

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

Пока Ρ‡Ρ‚ΠΎ Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ этого прилоТСния Π½Π΅Ρ‚ возмоТности Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π½Π΅Ρ‚ возмоТности ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ привСтствия.ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ статичноС ΠΈ совсСм Π½Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅. БостояниС — это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ React ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ; ΠΈ Π·Π°Ρ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‰Π΅. Π’ этом Π½Π°ΠΌ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Ρ…Π²Π°Ρ‚Ρ‡ΠΈΠΊ React:

 
 

import React, {useState} ΠΈΠ· response;

const App = () => {

return <Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ />;

};

const Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ = () => {

const [привСтствиС, setGreeting] = useState (

'ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Hello!'

);

Π²ΠΎΠ·Π²Ρ€Π°Ρ‚

{привСтствиС}

;

};

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

Π›ΠΎΠ²ΡƒΡˆΠΊΠ° useState ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ состояниС Π² качСствС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° ΠΈ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ массив, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ содСрТит Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ состояниС Π² качСствС ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ элСмСнта ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ для измСнСния состояния Π² качСствС Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ элСмСнта.ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π΄Π΅ΡΡ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€ΠΈΠ·Π°Ρ†ΠΈΡŽ массива JavaScript для доступа ΠΊ ΠΎΠ±ΠΎΠΈΠΌ элСмСнтам с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сокращСнного выраТСния. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, дСструктурированиС позволяСт Π½Π°ΠΌ Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒ сами ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅.

Π”Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π° для измСнСния состояния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ setGreeting () :

 
 

import React, {useState} from 'react';

const App = () => {

return <Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ />;

};

const Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ = () => {

const [привСтствиС, setGreeting] = useState (

'ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Hello!'

);

Π²ΠΎΠ·Π²Ρ€Π°Ρ‚ (

{привСтствиС}

type = "text"

Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ = {привСтствиС}

onChange = {event => setGreeting (событиС .target.value)}

/>

);

};

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ событий для поля Π²Π²ΠΎΠ΄Π°, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ с Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π°, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π° мСняСт своС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. Π’ качСствС Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π° ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ синтСтичСскоС событиС React, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ содСрТит Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ поля Π²Π²ΠΎΠ΄Π°. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для установки Π½ΠΎΠ²ΠΎΠ³ΠΎ состояния для Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ встроСнной стрСлочной Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ.ПозТС ΠΌΡ‹ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ, ΠΊΠ°ΠΊ ΠΈΠ·Π²Π»Π΅Ρ‡ΡŒ эту Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΎΡ‚Ρ‚ΡƒΠ΄Π°.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. ПолС Π²Π²ΠΎΠ΄Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ состояния ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ состояниС (Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅) поля Π²Π²ΠΎΠ΄Π° ΠΈ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΌΡƒ ΡΠΎΡΡ‚ΠΎΡΠ½ΠΈΡŽ собствСнного HTML-элСмСнта Π±Ρ€Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ…. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ стал управляСмым.

Как Π²Ρ‹ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΠΏΠ΅Ρ€Π΅Ρ…Π²Π°Ρ‚Ρ‡ΠΈΠΊΠΈ React ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π½Π°ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ состояниС Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ React (стрСлка). Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π²Ρ‹ использовали Π±Ρ‹ ΠΌΠ΅Ρ‚ΠΎΠ΄ setState для записи состояния Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ класса, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π»ΠΎΠ²ΡƒΡˆΠΊΡƒ useState для записи состояния Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ контСкст React Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ…, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с ΠΏΠ΅Ρ€Π΅Ρ…Π²Π°Ρ‚Ρ‡ΠΈΠΊΠΎΠΌ контСкста React ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ useContext для чтСния ΠΈΠ· контСкста React Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅.

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ React: ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ событий

Π’ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ использовали ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ событий onChange для поля Π²Π²ΠΎΠ΄Π°. Π­Ρ‚ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ увСдомлСния ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° измСняСтся Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ поля Π²Π²ΠΎΠ΄Π°. Π’ случаС Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов HTML-Ρ„ΠΎΡ€ΠΌΡ‹ Π² вашСм распоряТСнии Π΅ΡΡ‚ΡŒ нСсколько Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² событий React, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ onClick, onMouseDown ΠΈ onBlur.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ события onChange — это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² элСмСнтов Ρ„ΠΎΡ€ΠΌΡ‹ HTML. НапримСр, ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ события onClick для Ρ€Π΅Π°ΠΊΡ†ΠΈΠΈ Π½Π° события Ρ‰Π΅Π»Ρ‡ΠΊΠ°.

Π”ΠΎ сих ΠΏΠΎΡ€ ΠΌΡ‹ использовали ΡΡ‚Ρ€Π΅Π»ΠΎΡ‡Π½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ событий для Π²Ρ‹Ρ…ΠΎΠ΄Π½ΠΎΠ³ΠΎ поля Π²Π²ΠΎΠ΄Π°. Π§Ρ‚ΠΎ насчСт извлСчСния Π΅Π³ΠΎ ΠΊΠ°ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°? Π’ΠΎΠ³Π΄Π° ΠΎΠ½Π° станСт ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½Π½ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ:

 
 

import React, {useState} ΠΈΠ· response;

const App = () => {

return <Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ />;

};

const Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ = () => {

const [привСтствиС, setGreeting] = useState (

'ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Hello!'

);

const handleChange = event => setGreeting (event.Ρ†Π΅Π»Π΅Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅);

Π²ΠΎΠ·Π²Ρ€Π°Ρ‚ (

{привСтствиС}

);

};

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

ΠœΡ‹ использовали ΡΡ‚Ρ€Π΅Π»ΠΎΡ‡Π½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ для опрСдСлСния Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. Если Π²Ρ‹ Ρ€Π°Π½ΡŒΡˆΠ΅ использовали ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ класса Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ… класса React, этот способ опрСдСлСния Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ React являСтся эквивалСнтом.Π’Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π½Π°Π·Π²Π°Ρ‚ΡŒ это Β«ΠœΠ΅Ρ‚ΠΎΠ΄Π°ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Ρ€Π΅Π°ΠΊΡ†ΠΈΠΈΒ», эквивалСнтными ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ класса. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, сколько Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ дСйствовали ΠΊΠ°ΠΊ явныС ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ событий ΠΈΠ»ΠΈ инкапсулировали Π΄Ρ€ΡƒΠ³ΡƒΡŽ бизнСс-Π»ΠΎΠ³ΠΈΠΊΡƒ.

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ React: функция ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π°

ВсС происходит Π² нашСм ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅ΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ. Π•ΠΌΡƒ Π½Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽΡ‚ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΈΠ΅ Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Ρ‹, хотя Π²Ρ‹ ΡƒΠΆΠ΅ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΠΊΠ°ΠΊ строковая пСрСмСнная для привСтствия ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Π° ΠΈΠ· Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π² Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚.МоТно Π»ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ ΠΊΠ°ΠΊ ΠΎΠΏΠΎΡ€Ρƒ? Каким-Ρ‚ΠΎ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π΄ΠΎΠ»ΠΆΠ½Π° ΡΡƒΡ‰Π΅ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Ρ‹Π·ΠΎΠ²Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΈΠ·Π²Π½Π΅! ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ, ΠΊΠ°ΠΊ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚:

 
 

import React, {useState} ΠΈΠ· response;

const App = () => {

const [привСтствиС, setGreeting] = useState (

'ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Hello!'

);

const handleChange = event => setGreeting (event.target.value);

Π²ΠΎΠ·Π²Ρ€Π°Ρ‚ (

<Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° = {привСтствиС} onChangeHeadline = {handleChange} />

);

};

const Headline = ({headline, onChangeHeadline}) => (

{headline}

);

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

Π’ΠΎΡ‚ ΠΈ всС.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅ΠΌΡƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ происходит Π² Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ срСднСС Π² Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ (ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°) для Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ onChangeHeadline — Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ — Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅Π³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅Π³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΈΠ· Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°.

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим этот ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π° ΠΎΠ΄ΠΈΠ½ шаг дальшС, прСдставив ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Sibling для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Headline.Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ абстрактный ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Input:

 
 

import React, {useState} ΠΈΠ· 'react';

const App = () => {

const [привСтствиС, setGreeting] = useState (

'ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Hello!'

);

const handleChange = event => setGreeting (event.target.value);

return (

​​

Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ привСтствиС:

);

};

const Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ = ({Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ}) =>

{Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ}

;

const Input = ({value, onChangeInput, children}) => (

{children}

);

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

Π― ΡΡ‡ΠΈΡ‚Π°ΡŽ, Ρ‡Ρ‚ΠΎ это ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ, Π½ΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ, ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ Π² качСствС свойств; ΠΈ, Ρ‡Ρ‚ΠΎ Π±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎ, ΠΊΠ°ΠΊ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ.Π£ вас Π΅ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ управляСт Π»ΠΎΠ³ΠΈΠΊΠΎΠΉ, ΠΈ Π΄Π²Π° Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π±Ρ€Π°Ρ‚ΡŒΡΠΌΠΈ ΠΈ сСстрами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Ρ‹. Π­Ρ‚ΠΈ свойства всСгда ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π° для Π²Ρ‹Π·ΠΎΠ²Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅. По сути, Ρ‚Π°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Π² Ρ€Π°Π·Π½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ… Π² React.

ΠŸΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π² React

Π­Ρ‚ΠΎ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΈΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ часто, Π½ΠΎ я ΡΠ»Ρ‹ΡˆΠ°Π», ΠΊΠ°ΠΊ люди Π·Π°Π΄Π°ΡŽΡ‚ ΠΌΠ½Π΅ этот вопрос. Как Π±Ρ‹ Π²Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ»ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°? Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‚ ΠΆΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄, Ρ‡Ρ‚ΠΎ ΠΈ для пСрСопрСдСлСния любого Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Π½ΠΎΠ³ΠΎ свойства ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ, присвоив Π΅ΠΌΡƒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:

 
 

import React from 'react';

const App = () => {

const sayHello = () => console.ΠΆΡƒΡ€Π½Π°Π» ('ΠŸΡ€ΠΈΠ²Π΅Ρ‚');

return

);

};

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π² сигнатурС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ для дСструктуризации:

 
 

import React from 'react';

const App = () => {

const sayHello = () => console.ΠΆΡƒΡ€Π½Π°Π» ('ΠŸΡ€ΠΈΠ²Π΅Ρ‚');

return

);

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ свойства ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ React — это Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π°:

 
 

import React from 'react';

const App = () => {

const sayHello = () => console.ΠΆΡƒΡ€Π½Π°Π» ('ΠŸΡ€ΠΈΠ²Π΅Ρ‚');

return

);

Button.defaultProps = {

handleClick: () => console.log ('По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ'),

};

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

ВсС эти ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для опрСдСлСния свойств ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ (Π² Π΄Π°Π½Π½ΠΎΠΌ случаС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ·ΠΆΠ΅ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΈΡ… ΠΈΠ·Π²Π½Π΅, ΠΏΠ΅Ρ€Π΅Π΄Π°Π² явноС свойство (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€,Π³. функция) ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ.

Асинхронная функция Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ с React

Π”Ρ€ΡƒΠ³ΠΈΠΌ частным случаСм ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ асинхронная функция Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ React. Но Π² этом Π½Π΅Ρ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ особСнного, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ значСния, выполняСтся функция асинхронно ΠΈΠ»ΠΈ Π½Π΅Ρ‚:

 
 

import React from 'react';

const App = () => {

const sayHello = () =>

setTimeout (() => console.log ('Hello'), 1000);

return

);

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

Ѐункция выполняСтся с Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ Π΄Π°Π»ΡŒΠ½Π΅ΠΉΡˆΠΈΡ… инструкций с вашСй стороны Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°.ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ асинхронный Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ Π² случаС измСнСния свойств ΠΈΠ»ΠΈ состояния. Π’ΠΎΠ·ΡŒΠΌΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ Π² качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΌΡ‹ устанавливаСм состояниС с искусствСнной Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ setTimeout :

 
 

import React, {useState} from 'react';

const App = () => {

const [count, setCount] = useState (0);

const handleIncrement = () =>

setTimeout (

() => setCount (currentCount => currentCount + 1),

1000

);

const handleDecrement = () =>

setTimeout (

() => setCount (currentCount => currentCount - 1),

1000

);

return (

{count}

);

};

const Button = ({handleClick, children}) => (

);

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π° Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ состояния setCount для доступа ΠΊ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΌΡƒ ΡΠΎΡΡ‚ΠΎΡΠ½ΠΈΡŽ.ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ установки ΠΈΠ· useState Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ΡΡ асинхронно ΠΏΠΎ своСй ΠΏΡ€ΠΈΡ€ΠΎΠ΄Π΅, Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ выполняСтС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ состояния Π² Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΌ состоянии, Π° Π½Π΅ Π² ΠΊΠ°ΠΊΠΎΠΌ-Π»ΠΈΠ±ΠΎ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠ΅ΠΌ состоянии.

ЭкспСримСнт: Ссли Π²Ρ‹ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π° Π² State Hook, Π° Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ нСпосрСдствСнно Π½Π° ΡΡ‡Π΅Ρ‚Π½ΡƒΡŽ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, setCount (count + 1) ), Π²Ρ‹ Π½Π΅ смоТСтС ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ с ΠžΡ‚ 0 Π΄ΠΎ 2 быстрым Π΄Π²ΠΎΠΉΠ½Ρ‹ΠΌ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ±Π° Ρ€Π°Π·Π° функция Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒΡΡ ΠΏΡ€ΠΈ состоянии счСтчика 0.

Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ React Hooks.

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ React: ΠΆΠΈΠ·Π½Π΅Π½Π½Ρ‹ΠΉ Ρ†ΠΈΠΊΠ»

Если Π²Ρ‹ Ρ€Π°Π½Π΅Π΅ использовали ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ класса React, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π°, ΠΊΠ°ΠΊ componentDidMount, componentWillUnmount ΠΈ shouldComponentUpdate. Π£ вас ΠΈΡ… Π½Π΅Ρ‚ Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ…, поэтому Π΄Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡ… Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

ΠŸΡ€Π΅ΠΆΠ΄Π΅ всСго, Ρƒ вас Π½Π΅Ρ‚ конструктора Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ конструктор использовался Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ класса React для выдСлСния Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ состояния.Как Π²Ρ‹ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΠΎΠ½ Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ΅Π½ Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π²Ρ‹ выдСляСтС Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ состояниС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π»ΠΎΠ²ΡƒΡˆΠΊΠΈ useState ΠΈ настраиваСтС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ для дальнСйшСй бизнСс-Π»ΠΎΠ³ΠΈΠΊΠΈ:

 
 

import React, {useState} from ' Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ';

const App = () => {

const [count, setCount] = useState (0);

const handleIncrement = () =>

setCount (currentCount => currentCount + 1);

const handleDecrement = () =>

setCount (currentCount => currentCount - 1);

Π²ΠΎΠ·Π²Ρ€Π°Ρ‚ (

{count}

);

};

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ React: Mount

Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, сущСствуСт ΠΆΠΈΠ·Π½Π΅Π½Π½Ρ‹ΠΉ Ρ†ΠΈΠΊΠ» монтирования для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Ρ€Π°Π·.Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ React смонтировал , Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π»ΠΎΠ²ΡƒΡˆΠΊΡƒ useEffect:

 
 

import React, {useState, useEffect} from 'react';

const App = () => {

const [count, setCount] = useState (0);

const handleIncrement = () =>

setCount (currentCount => currentCount + 1);

const handleDecrement = () =>

setCount (currentCount => currentCount - 1);

useEffect (() => setCount (currentCount => currentCount + 1), []);

Π²ΠΎΠ·Π²Ρ€Π°Ρ‚ (

{count}

);

};

экспорт прилоТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

Если Π²Ρ‹ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅Ρ‚Π΅ этот ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ счСтчик 0 ΠΈ 1 ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ вскорС Π΄Ρ€ΡƒΠ³ Π·Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ.ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ счСтчик 0 ΠΎΡ‚ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ состояния — Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ монтировался, Effect Hook запустится для установки Π½ΠΎΠ²ΠΎΠ³ΠΎ состояния счСтчика 1.

Π’Π°ΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ пустой массив ΠΊΠ°ΠΊ Π²Ρ‚ΠΎΡ€ΠΎΠΉ. Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ для Effect Hook, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ срабатываниС эффСкта Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° (ΠΌΠΎΠ½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅) ΠΈ Π²Ρ‹Π³Ρ€ΡƒΠ·ΠΊΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° (Ρ€Π°Π·ΠΌΠΎΠ½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅).

ЭкспСримСнт: Ссли Π²Ρ‹ оставитС Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ Π»ΠΎΠ²ΡƒΡˆΠΊΠΈ эффСкта пустым, Π²Ρ‹ ΡΡ‚ΠΎΠ»ΠΊΠ½Π΅Ρ‚Π΅ΡΡŒ с бСсконСчным Ρ†ΠΈΠΊΠ»ΠΎΠΌ увСличСния счСтчика Π½Π° 1, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π»ΠΎΠ²ΡƒΡˆΠΊΠ° эффСкта всСгда запускаСтся послС измСнСния состояния.ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ эффСкта запускаСт Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ состояния, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒΡΡ снова ΠΈ снова для увСличСния счСтчика.

Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ React: ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° входящиС Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Ρ‹ ΠΈΠ»ΠΈ состояниС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ запускаСт ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΡƒΡŽ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ для отобраТСния послСднСго статус-ΠΊΠ²ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ часто получаСтся ΠΈΠ· Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚ΠΎΠ² ΠΈ состояния. Визуализация выполняСт всС, Ρ‡Ρ‚ΠΎ находится Π² Ρ‚Π΅Π»Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Если Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π½Π΅ обновляСтся Π΄ΠΎΠ»ΠΆΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π² вашСм ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, это всСгда Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ пСрвая ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ° ΠΎΡ‚Π»Π°Π΄ΠΊΠΈ для консольного состояния ΠΆΡƒΡ€Π½Π°Π»Π° ΠΈ свойств ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°.Если ΠΎΠ±Π° Π½Π΅ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ, Π½ΠΎΠ²Ρ‹ΠΉ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ Π½Π΅ выполняСтся, ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π²Ρ‹ Π½Π΅ Π²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΊΠΎΠ½ΡΠΎΠ»ΡŒΠ½Ρ‹ΠΉ ΠΆΡƒΡ€Π½Π°Π» Π²Ρ‹Π²ΠΎΠ΄Π°.

 
 

ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ React, {useState, useEffect} ΠΈΠ· Β«Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΒ»;

const App = () => {

console.log ('ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ΡΡ Π»ΠΈ?');

.

reactjs — БтатичСскоС свойство Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° React

ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ стСка

  1. Около
  2. ΠŸΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹

  3. Для ΠΊΠΎΠΌΠ°Π½Π΄
  1. ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ стСка
    ΠžΠ±Ρ‰Π΅ΡΡ‚Π²Π΅Π½Π½Ρ‹Π΅ вопросы ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹

  2. ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ стСка для ΠΊΠΎΠΌΠ°Π½Π΄
    Π“Π΄Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈ дСлятся частными знаниями с ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ

  3. Вакансии
    ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ связанныС с Π½ΠΈΠΌ тСхничСскиС возмоТности ΠΊΠ°Ρ€ΡŒΠ΅Ρ€Π½ΠΎΠ³ΠΎ роста

  4. Π’Π°Π»Π°Π½Ρ‚
    НанимайтС тСхничСских спСциалистов ΠΈ создавайтС свой Π±Ρ€Π΅Π½Π΄ работодатСля

  5. Π Π΅ΠΊΠ»Π°ΠΌΠ°
    ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ΡΡŒ ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΈ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³Π°ΠΌ со всСго ΠΌΠΈΡ€Π°

  6. О компании

.

reactjs — Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ React с использованиСм состояния

ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ стСка

  1. Около
  2. ΠŸΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹

  3. Для ΠΊΠΎΠΌΠ°Π½Π΄
  1. ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ стСка
    ΠžΠ±Ρ‰Π΅ΡΡ‚Π²Π΅Π½Π½Ρ‹Π΅ вопросы ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹

  2. ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ стСка для ΠΊΠΎΠΌΠ°Π½Π΄
    Π“Π΄Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈ дСлятся частными знаниями с ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ

  3. Вакансии
    ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ связанныС с Π½ΠΈΠΌ тСхничСскиС возмоТности ΠΊΠ°Ρ€ΡŒΠ΅Ρ€Π½ΠΎΠ³ΠΎ роста

  4. Π’Π°Π»Π°Π½Ρ‚
    НанимайтС тСхничСских спСциалистов ΠΈ создавайтС свой Π±Ρ€Π΅Π½Π΄ работодатСля

  5. Π Π΅ΠΊΠ»Π°ΠΌΠ°
    ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ΡΡŒ ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΈ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³Π°ΠΌ со всСго ΠΌΠΈΡ€Π°

  6. О компании

.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *