React & Jarnell
React React
ΠŸΡ€ΠΈΠ²Π΅Ρ‚, Π―Ρ€Π½Π΅Π»Π», Π½Π°ΡˆΡ‘Π» ΡΡ‚Π°Ρ€ΡƒΡŽ ΠΊΠΎΠ΄ΠΎΠ²ΡƒΡŽ Π±Π°Π·Ρƒ интСрфСйса, Π΅Ρ‰Ρ‘ с 2010-Π³ΠΎ, ΠΈ ΠΎΠ½Π° Π΄ΠΎ сих ΠΏΠΎΡ€ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚. Как Π΄ΡƒΠΌΠ°Π΅ΡˆΡŒ, ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΏΠΈΡΠ°Ρ‚ΡŒ Π΅Ρ‘ для скорости ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ, ΠΏΡ€ΠΈΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒ Ρ‡Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ соврСмСнноС ΠΈ чистоС?
Jarnell Jarnell
Π—Π²ΡƒΡ‡ΠΈΡ‚ ΠΊΠ°ΠΊ Π½ΠΎΡΡ‚Π°Π»ΡŒΠ³ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ квСст – ΠΏΠΎΡ€Π° Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ со старым Ρ…Π»Π°ΠΌΠΎΠΌ, ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ систСму ΠΈ посмотрим, прСслСдуСт Π»ΠΈ нас ΠΏΡ€ΠΈΠ·Ρ€Π°ΠΊ 2010 Π³ΠΎΠ΄Π° ΠΈΠ»ΠΈ просто растворится Π² Π½ΠΎΠ²ΠΎΠΌ, бСспСрСбойном Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ.
React React
Π’ΠΎΡ‚ ΠΈ ΠΏΠ»Π°Π½ – разбСрёмся с ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, Π·Π°ΠΌΠ΅Π½ΠΈΠΌ Π³Ρ€ΠΎΠΌΠΎΠ·Π΄ΠΊΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π½Π° Π±ΠΎΠ»Π΅Π΅ Π»Ρ‘Π³ΠΊΠΈΠ΅, ΠΈ Π²Π΄ΠΎΡ…Π½Ρ‘ΠΌ Π² этот ΠΊΠΎΠ΄ 2010 Π³ΠΎΠ΄Π° Π½ΠΎΠ²ΡƒΡŽ Тизнь, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π» ΠΊΠ°ΠΊ часы. Π“ΠΎΡ‚ΠΎΠ² Π²Π·ΡΡ‚ΡŒΡΡ Π·Π° Π΄Π΅Π»ΠΎ?
Jarnell Jarnell
Π― за—снимаСм всё лишнСС, добавляСм Ρ‡Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π»Π°ΠΊΠΎΠ½ΠΈΡ‡Π½ΠΎΠ΅ ΠΈ посмотрим, ΠΊΠ°ΠΊ этот старый ΠΊΠΎΠ΄, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, ΠΎΠΆΠΈΠ²Π΅Ρ‚. Π‘ Ρ‡Π΅Π³ΠΎ Π½Π°Ρ‡Π½Ρ‘ΠΌ?
React React
ΠžΡ‚Π»ΠΈΡ‡Π½ΠΎ, Π΄Π°Π²Π°ΠΉ сначала ΠΏΡ€ΠΎΠ²Π΅Π΄Ρ‘ΠΌ статичСский Π°Π½Π°Π»ΠΈΠ·, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ΡΠ²ΠΈΡ‚ΡŒ всС зависимости ΠΈ Π½Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ ΠΈΠΌΠΏΠΎΡ€Ρ‚Ρ‹. ΠŸΠΎΡ‚ΠΎΠΌ смоТСм пСрСнСсти критичСскиС части Π½Π° соврСмСнный Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ – ΠΌΠΎΠΆΠ΅Ρ‚, React 18 с Vite, ΠΈΠ»ΠΈ Svelte, Ссли Π½ΡƒΠΆΠ΅Π½ Π΅Ρ‰Ρ‘ Π±ΠΎΠ»Π΅Π΅ Π»Ρ‘Π³ΠΊΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚. Когда разбСрёмся с лишним Π³Ρ€ΡƒΠ·ΠΎΠΌ, Π·Π°ΠΌΠ΅Π½ΠΈΠΌ тяТёлыС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π½Π° tree-shakable Π°Π½Π°Π»ΠΎΠ³ΠΈ. Π“Π΄Π΅ сСйчас находится Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ процСсс сборки?
Jarnell Jarnell
Π‘Π»ΡƒΡˆΠ°ΠΉ, Π²ΠΎΡ‚ ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅ΠΌ Π΄Π΅Π»Π°Ρ‚ΡŒ. Π‘Π½Π°Ρ‡Π°Π»Π° скачивай Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ, ΠΏΠΎΡ‚ΠΎΠΌ запусти `npm ls --production` ΠΈΠ»ΠΈ `yarn list`, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ всС установлСнныС ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹. ΠŸΠΎΡ‚ΠΎΠΌ запусти Π»ΠΈΠ½Ρ‚Π΅Ρ€, Ρ‚ΠΈΠΏΠ° ESLint ΠΈΠ»ΠΈ компилятор TypeScript с ΠΎΠΏΡ†ΠΈΠ΅ΠΉ `noUnusedLocals`, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ΡΠ²ΠΈΡ‚ΡŒ Π½Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ ΠΈΠΌΠΏΠΎΡ€Ρ‚Ρ‹. Π˜Ρ‰ΠΈ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΠΈ `webpack` ΠΈΠ»ΠΈ `gulp` β€” это основа сборки. Если Π΅ΡΡ‚ΡŒ `package.json` с Ρ€Π°Π·Π΄Π΅Π»ΠΎΠΌ `scripts.build`, Π·Π½Π°Ρ‡ΠΈΡ‚, это тСкущая ΠΏΠ°ΠΉΠΏΠ»Π°ΠΉΠ½. Найди Ρ‚ΠΎΡ‡ΠΊΡƒ Π²Ρ…ΠΎΠ΄Π°, посмотри ΠΊΠ°ΠΊΠΈΠ΅ Ρ„Π»Π°Π³ΠΈ для старого Π±Π°Π½Π΄Π»Π΅Ρ€Π° Ρ‚Π°ΠΌ ΡƒΠΊΠ°Π·Π°Π½Ρ‹, ΠΈ Ρ‚ΠΎΠ³Π΄Π° ΠΌΡ‹ смоТСм ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ большиС куски ΠΏΠ΅Ρ€Π΅Π½ΠΎΡΠΈΡ‚ΡŒ Π½Π° React‑Vite ΠΈΠ»ΠΈ Svelte‑Kit. Π§Ρ‚ΠΎ Ρ‚Π°ΠΌ Π² сСкции скриптов?