誰でもわかる！React入門

先輩に「わかった気になれた」と評されたLTです。

Transcript

1. ୭Ͱ΋Θ͔Δʂ Reactೖ໳ ʙReactͱ͍͏ΑΓ΋Ϟμϯϑϩϯτͷ࿩ͬΆ͘ͳͬͪΌͬͨʙ ͋ͣΒͨ (@azurata09_)
2. લఏ஌ࣝ • HTML͕ॻ͚Δ • JS΋ॻ͚Δͱͳ͓ྑ͠
3. Ϟμϯϑϩϯτ 
 ಋೖฤ
4. JSΛ࢖ͬͯHTMLΛॻ͖ସ͑ͯΈΔ <h1>Hello, HTML!</h1> <script> const h1_element = document.getElementsByTagName("h1")[0] h1_element.innerHTML = "Hello, JS!" </script>
5. DOM͔Βh1λάͷཁૉΛͱ͖ͬͯͯ <h1>Hello, HTML!</h1> <script> const h1_element = document.getElementsByTagName("h1")[0] h1_element.innerHTML = "Hello, JS!" </script>
6. த਎Λॻ͖ସ͑Δ <h1>Hello, HTML!</h1> <script> const h1_element = document.getElementsByTagName("h1")[0] h1_element.innerHTML = "Hello, JS!" </script>
7. ·ͩΘ͔Δ
8. ͪΐͬͱ಺༰૿΍ͯ͠ΈΔ <div> <input type="text" value=“hello!”> <p></p> <p></p> </div> <script> const input = document.getElementsByTagName("input")[0] const p1 = document.getElementsByTagName("p")[0] const p2 = document.getElementsByTagName("p")[1] function inputHandler() { p1.innerHTML = input.value p2.innerHTML = input.value.toUpperCase() } input.addEventListener("input", inputHandler) inputHandler() </script>
9. DOM͔ΒͦΕͧΕཁૉΛ͖࣋ͬͯͯ <div> <input type="text" value=“hello!”> <p></p> <p></p> </div> <script> const input = document.getElementsByTagName("input")[0] const p1 = document.getElementsByTagName("p")[0] const p2 = document.getElementsByTagName("p")[1] function inputHandler() { p1.innerHTML = input.value p2.innerHTML = input.value.toUpperCase() } input.addEventListener("input", inputHandler) inputHandler() </script>
10. Πϕϯτϋϯυϥ࡞Δ <div> <input type="text" value=“hello!”> <p></p> <p></p> </div> <script> const input = document.getElementsByTagName("input")[0] const p1 = document.getElementsByTagName("p")[0] const p2 = document.getElementsByTagName("p")[1] function inputHandler() { p1.innerHTML = input.value p2.innerHTML = input.value.toUpperCase() } input.addEventListener("input", inputHandler) inputHandler() </script>
11. ΪϦΘ͔Δ
12. Ͱ΋͜Ε͕Կඦߦʹ౉͍ͬͯΔͱ…
13. Vanilla JSͷ໰୊఺ • දࣔ(HTML)ͱϩδοΫ(JS)͕ผͷ৔ॴʹ͋Δ • ϩδοΫ໋͕ྩతͰHTMLͱ૬ޓʹඥ෇͔ͳ͍ • (HTMLΛ͔·͢ͱ)಺༰ͷ࠶ར༻͕؆୯ʹͰ͖ͳ͍
14. ౰વੜ͡Δ͓ؾ࣋ͪ • HTMLڬΉͱ໘౗͔ͩΒJS͚ͩͰϑϩϯτ΍Γ͍ͨʂ
15. ͍ͩͿલʹ஌Γ߹͍͕LTͯͨ͠
16. ಺༰ཁ໿ • JS͚ͩͰWebαΠτ 
 ࡞Γ·ͨ͠ʂ
17. ։͍ͯΈΔ • https://ryu1-1uyr.github.io/html_oasobi/ phase_6.html • https://github.com/ryu1-1uyr/html_oasobi/blob/ master/phase_6.html
18. ίʔυΛݟΔͱ… 100ߦҎ্ͷίʔυͰ 
 ࣮૷͞ΕͯΔ
19. Ͱ͸… • ͋ͳͨ͸͜ΕΛ࣮૷͍ͨ͠ͱࢥ͍·͔͢ʁ • ๻͸ݏͰ͢
20. HTMLͷ͍͍ͱ͜Ζ • ໦ߏ଄ͳͷͰߏ଄͕Θ͔Γ΍͍͢ • DOMͰݕࡧ • ίʔυ͚ͩͰݟͨ໨͕૝૾Ͱ͖Δ
21. ڪΒ͘։ൃऀ͸͜͏ߟ͑ͨ • Ͳ͏ʹ͔දࣔͱϩδοΫΛҰॹʹͰ͖ͳ͍ͩΖ͏͔ • ͋ΘΑ͘͹࠶ར༻Մೳʹ͍ͨ͠…
22. ڪΒ͘։ൃऀ͸͜͏ߟ͑ͨ • Ͳ͏ʹ͔දࣔͱϩδοΫΛҰॹʹͰ͖ͳ͍ͩΖ͏͔ • ͋ΘΑ͘͹࠶ར༻Մೳʹ͍ͨ͠… 㱺 ϝλϓϩάϥϛϯάͰղܾ͢Δ
23. ReactͰ։ൃऀ͕΍Δ͜ͱ • ίϯϙʔωϯτͱ͍͏୯ҐͰϓϩάϥϜΛॻ͘ • ίϯϙʔωϯτΛ૊Έ߹Θͤͯ΋ίϯϙʔωϯτ Λ࡞੒Ͱ͖Δ • ίϯϙʔωϯτΛ૊Έ߹ΘͤΔ͜ͱͰDOMಉ༷ͷ 
 "໦"Λ࡞੒͢Δ
24. React͕΍ͬͯ͘ΕΔ͜ͱ • ίϯϙʔωϯτΛಡΈࠐΜͰHTML+JSʹॻ͖ى͜͢ • ͭ·ΓʮϓϩάϥϜͰϓϩάϥϜΛੜ੒͢Δʯ • ͜Ε͕ϝλϓϩάϥϛϯά
25. ͔ͩΒReactެࣜνϡʔτϦΞϧͰ 
 ͜Μͳίʔυ͕ग़Δ return React.createElement('div', {className: 'shopping-list'}, React.createElement('h1', /* ... h1 children ... */), React.createElement('ul', /* ... ul children ... */) );
26. Reactೖ໳ฤ
27. Reactͷجຊ • ؔ਺ΦϒδΣΫτͰίϯϙʔωϯτΛهड़͍ͯ͘͠ • ؔ਺ίϯϙʔωϯτͱ͍͏
28. جຊܗ import React from "react" function App() { return( <> <h1>Hello, React!</h1> </> ) } export default App
29. Ξϩʔؔ਺Ͱఆٛͨ͠ํ͕ݎ࿚ (constʹ͢Δ͜ͱͰॻ͖׵͑ΒΕͳ͘ͳΔ) import React from "react" const App = () => { return( <> <h1>Hello, React!</h1> </> ) } export default App
30. TSͳΒܕ΋໌ࣔ (͜Ε͸ͳͯ͘΋ಈ͔͘΋) import React from "react" const App = (): JSX.Element => { return( <> <h1>Hello, React!</h1> </> ) } export default App
31. ଞͷίϯϙʔωϯτ΋࢖ͬͯΈΔ import React from "react" import { OtherComponent } from "./OtherComponent.jsx" const App = (): JSX.Element => { return( <> <h1>Hello, React!</h1> <OtherComponent /> </> ) } export default App
32. React Hooksͱ͸ʁ • ؔ਺ίϯϙʔωϯτ୯ମͩͱͰ͖Δ͜ͱ͕গͳ͍ • ࠷ॳ͸දࣔʹؔ͢Δ͜ͱ͔͠ॻ͚ͳ͔ͬͨ • ΫϥείϯϙʔωϯτͷػೳΛؔ਺ίϯϙʔωϯτ Ͱ΋هड़Ͱ͖ΔΑ͏ʹͨ͠ͷ͕React Hooks
33. Hooksͬͯ200छྨ ͋ΜͶΜ(ͳ͍) ͳΜ͔͍ͬͺ͍͋Δ ͳͷͰྲྀੴʹجຊͷ΍ͭͰ צห
34. useState • Reactͷؔ਺ίϯϙʔωϯτͰ͸ɺී௨ͷม਺ʹ஋Λ ୅ೖͯ͠΋࠶Ϩϯμʔ͞Εͳ͍ • ͦͷͨΊɺߋ৽+࠶ϨϯμʔΛ͢Δػߏ͕ඞཁ • ͦΕ͕useState
35. useStateͷྫ import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> {/* ΫϦοΫ͢Δ͝ͱʹ1૿͑Δ */} Click me </button> </div> ); }
36. useE ff ect • ෭࡞༻ϑοΫͱ΋ݺ͹ΕΔ • ୈ2Ҿ਺͸ґଘ͢Δ஋(͍͍ͨͯState)ͷ഑ྻΛ౉͢ • ୈ2Ҿ਺ͷதʹ͋Δ஋͕มߋ͞ΕΔ౓ʹ࣮ߦ͞ΕΔ • ۭ഑ྻΛ౉͢͜ͱͰ࠷ॳͷҰ౓ͷΈ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ • ٯʹԿ΋͚ͭͳ͍ͱશͯͷ஋͕ߋ৽͞ΕΔ౓ʹ࣮ߦ͞ΕΔ
37. useE ff ectͷྫ import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; // ࠶Ϩϯμʔ͞ΕΔ౓ʹݺ͹ΕΔ }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }
38. useE ff ectͷྫ import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; // Ұ౓͔͠ݺ͹Εͳ͍ }, []); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }
39. useContext • ࢖ͬͨ͜ͱ͕ͳ͍ 🤯 • ωετ͞Εͨࢠίϯϙʔωϯτʹରͯ͠௚઀σʔλ ΛϒνࠐΊΔΒ͍͠ • όέπϦϨʔ͠ͳͯ͘Α͍ʂ • Α͘Θ͔Μͳ͍ͷͰྫ͸লུͤͯ͞΄͍͠
40. ·ͱΊ • ϞμϯϑϩϯτͰJavaScriptϑϨʔϜϫʔΫ͕ 
 ࢖ΘΕΔཧ༝͸࠶ར༻ՄೳͳίʔυΛੜΈग़ͤΔ͔Β • ࠷ۙͷReactͰ͸ؔ਺ܕίϯϙʔωϯτͰίϯϙʔωϯτΛ 
 هड़͍͖ͯ͠ɺReactͷػೳΛReact HooksͰར༻͢Δ
41. ࢀߟจݙ • https://qiita.com/Yametaro/items/ 3c27305072464e1d6230 • https://speakerdeck.com/s17001/huremuwakufalseqi- chi-tininaritakatuta • https://github.com/ryu1-1uyr/html_oasobi • https://ja.reactjs.org/docs/hooks-overview.html