初めてのReact

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

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ϥΠϑΛ͓ա͍ͩ͘͝͠͞