Upgrade to Pro — share decks privately, control downloads, hide ads and more …

初めてのReact

E654ce93d23159c059fa5cf1b1347bfa?s=47 Kono Junya
August 04, 2017

 初めてのReact

React.jsを初めて勉強する人向けのスライドです!

E654ce93d23159c059fa5cf1b1347bfa?s=128

Kono Junya

August 04, 2017
Tweet

More Decks by Kono Junya

Other Decks in Technology

Transcript

  1. ॳΊͯͷReact 㽈

  2. ·ͣ͸clone ͦͯ͠npm install https://github.com/konojunya/react-starter-kit

  3. Reactͱ͸

  4. Reactͱ͸ React.js͸UIͷύʔπʢߏ੒෦඼ʣΛ࡞ΔͨΊͷϥΠϒϥϦͰ͢ɻ Facebook͕OSSͱͯ͠ެ։͍ͯ͠·͢ɻ

  5. ReactΛಋೖ͢ΔϝϦοτ • Ծ૝DOMʹΑͬͯύϑΥʔϚϯε͕޲্͢Δʂ • ίϯϙʔωϯτࢥߟʂ • ࠶ར༻ੑ͕͋Δ • গ͠લ૽͍ͰͨAtomic Designͱ૬ੑ͕ྑ͔ͬͨΓ

  6. ReactΛಋೖ͢ΔσϝϦοτ • Reactͷ։ൃ؀ڥΛ࡞ΔͷΊΜͲ͍͘͞ • ES6(ES2015)Λ֮͑Δඞཁ͕͋Δ ֶशίετ͕ߴ͍ʂ

  7. ReactΛ࠾༻͍ͯ͠ΔαʔϏεɾاۀ

  8. ಋೖ͢Δ࠷ॳͷҰา

  9. ಋೖ͢Δ࠷ॳͷҰา ࠓճ͸webpackͱ͍͏ٕज़Λ࢖͍·͢ɻ webpack͸ͱͯ΋ڧྗͰ͕͢ɺ஍ຯʹઃఆΊΜͲ͍͘͞ͷͰ ࡞͓͖ͬͯ·ͨ͠ɻ

  10. ॳΊͯͷJSX JSX͸XMLͳͷͰ਺ݸ஫ҙ͢Δ΂͖఺͕͋Γ·͢ɻ • class͸classNameʹͳΓ·͢ɻ • ด͡λά͕ඞཁͰ͢ɻ <img src=“hoge.jpg”> <img src=“hoge.jpg”

    /> ❌ ⭕ <div class=“hoge”>Hoge</div> <div className=“hoge”>Hoge</div> ❌ ⭕
  11. JSXͰʮHello Worldʯ͠Α͏ʂ

  12. src/components/Hello.jsx import React from “react”; const Hello = () =>

    ( <h1>Hello World</h1> ) export default Hello;
  13. src/app.js import React from “react”; import { render } from

    “react-dom”; // componentΛimport͢Δ import Hello from “./components/Hello.jsx”; render( <Hello/>, document.getElementById(“app”) );
  14. $ npm run build:watch

  15. CSSΛ͚͍ͭͨ(´∀ʆ*)

  16. src/components/Hello.jsx import React from “react”; const style = { color:

    “red” } const Hello = () => ( <h1 style={style}>Hello World</h1> ) export default Hello;
  17. src/components/Hello.jsx import React from “react”; const Hello = () =>

    ( <h1 className=“red”>Hello World</h1> ) export default Hello;
  18. ม਺Ͱ֎෦͔Β౉͍ͨ͠(´∀ʆ*)

  19. src/components/Hello.jsx import React from “react”; const Hello = ({ color

    }) => ( <h1 style={{ color }}>Hello World</h1> ) export default Hello;
  20. src/components/App.jsx import React from “react”; import Hello from “./Hello.jsx” const

    App = () => ( <div> <Hello color=“red” /> </div> ) export default App;
  21. src/app.js import React from “react”; import { render } from

    “react-dom”; // componentΛimport͢Δ import App from “./components/App.jsx”; render( <App/>, document.getElementById(“app”) );
  22. ͨ͘͞Μ࡞Γ͍ͨ(´∀ʆ*)

  23. src/components/App.jsx import React from “react”; import Hello from “./Hello.jsx” const

    colors = [“red”,”blue”] const App = () => ( <div> { colors.map(color => ( <Hello color={color} /> )) } </div> ) export default App;
  24. src/components/App.jsx import React from “react”; import Hello from “./Hello.jsx” const

    items = [ { id: 1, color: “red” }, { id: 2, color: “blue” } ] const App = () => ( <div> { items.map(item => { <Hello color={item.color} key={item.id} /> }) } </div> ) export default App;
  25. ϘλϯΛϙνʙ͍ͨ͠(´∀ʆ*)

  26. src/components/ MyButton.jsx import React from “react”; const MyButton = ()

    => ( <button onClick={() => alert(“ϙνʙ”)}>push me!</button> ) export default MyButton;
  27. src/components/App.jsx import React from “react”; import MyButton from “./MyButton.jsx” const

    App = () => ( <div> <MyButton /> </div> ) export default App;
  28. src/components/ MyButton.jsx import React from “react”; export default class MyButton

    extends React.Component { render(){ return( <button onClick={this.onClickHandler}>push me!</button> ) } onClickHandler(){ let pochi = “ϙνʙ”; alert(pochi); } }
  29. จࣈͷೖྗ͕͍ͨ͠(´∀ʆ*)

  30. src/components/MyInput.jsx import React from “react”; export default class MyInput extends

    React.Component { render(){ return( <div> <input/> </div> ) } }
  31. src/components/MyInput.jsx import React from “react”; import MyButton from “./MyButton.jsx” export

    default class MyInput extends React.Component { render(){ return( <div> <input/> <MyButton onClick={this.onClickHandler}/> </div> ) } onClickHandler(){ alert(“ϙνʙ”) } }
  32. src/components/ MyButton.jsx import React from “react”; export default class MyButton

    extends React.Component { constructor(props){ super(props) } render(){ return( <button onClick={this.props.onClick}>push me!</button> ) } }
  33. import React from “react”; import MyButton from “./MyButton.jsx” export default

    class MyInput extends React.Component { constructor(){ super() this.state = { value: “” } } render(){ return( <div> <input value={this.state.value} onChange={this.setTextData} /> <MyButton onClick={this.onClickHandler}/> </div> ) } setTextData(e){ let text = e.target.value this.setState({ value: text }) } onClickHandler(){ alert(“ϙνʙ”) } }
  34. ࠷ޙʹ

  35. ࠷ॳʹݴͬͨίϨ • Reactͷ։ൃ؀ڥΛ࡞ΔͷΊΜͲ͍͘͞

  36. https://github.com/facebookincubator/create-react-app create-react-app

  37. UI͸ʁ

  38. http://www.material-ui.com/#/ Material UI

  39. buttonͳͲ͕σβΠϯ͞ΕͯίϯϙʔωϯτʹͳͬͯΔʂ

  40. ͜͏ݴ͏ͷΛΈΔͱࣗ෼Ͱ࡞Δͱ͖΋ propsʹ͸Կ͕͋Ε͹͍͍͔Θ͔Γ΍͍͔͢΋ʂ

  41. ྑ͖ReactϥΠϑΛ͓ա͍ͩ͘͝͠͞