$30 off During Our Annual Pro Sale. View Details »

誰でもわかる!React入門

azurata
November 24, 2022

 誰でもわかる!React入門

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

azurata

November 24, 2022
Tweet

More Decks by azurata

Other Decks in Technology

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