React速習会@Wantedly

Transcript

1. React଎शձ@Wantedly 2016/02/04

2. ୭ʁ • Kento Moriwaki • 2015೥य़ɺ৽ଔೖࣾ • ϑϩϯτΤϯυ޷͖ • Angular৮ͬͯͨ

3. ࠓ೔΍Δ͜ͱ • React৮ͬͯΈΔ • Flux(Redux)ͯ͠ΈΔ • αʔόʔαΠυͰϨϯμϦϯάͯ͠ΈΔ • ଞͷ৘ใ

4. ४උ git clone git@github.com:KentoMoriwaki/react_sokushu.git cd react_sokushu npm install npm install

   -g webpack • Node͸ݹ͗͢Δͱಈ͔ͳ͍͔΋ • v5.3.0Ͱ֬ೝ

5. ४උ • Chrome dev toolͰReactͷσόοά͕ग़དྷΔ https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

6. Reactͱ͸(Α͘ฉ͘࿩) • Facebook͕։ൃ • UIͷͨΊͷϥΠϒϥϦ • ϑϨʔϜϫʔΫͰ͸ͳ͍ • Ծ૝DOM •

   JSX

7. ͱΓ͋͑ͣಈ͔͢ git checkout component npm start webpack —watch • http://localhost:3000ʹΞΫηε

   • ೖྗͰ͖ͳ͍ϑΥʔϜ͕දࣔ͞ΕΔ

8. components/App.js import React, { Component } from 'react' export default

   class App extends Component { constructor(props) { super(props) this.state = { title: '', description: '' } } render() { return ( <form> <fieldset> <legend>Create Issue</legend> <input type="text" value={this.state.title} placeholder="Input title" /> <textarea value={this.state.description} placeholder="Input description" /> <button>Save</button> </fieldset> </form> ) } }

9. Component • Reactͷओ໾ • View + Controller • View͸JSXͰɺrenderϝιουʹهड़͢Δ •

   this.stateʹঢ়ଶΛอ࣋͢Δ

10. One-way data binding • ೖྗͯ͠΋σʔλ͸มΘΒͳ͍ • ࣗ෼Ͱ໌ࣔతʹมߋ͠ͳ͍ͱɺϏϡʔ͸ม ΘΒͳ͍ • σʔλ͕มΘΔͱϏϡʔ͕ࣗಈతʹมΘΔ

    • this.setState(newState)Ͱมߋ

11. One-way data binding • onChange={} ʹϋϯυϥΛॻ͍ͯঢ়ଶΛมߋ͢Δ onChangeTitle(e) { this.setState({ title:

    e.target.value }) } onChangeDescription(e) { this.setState({ description: e.target.value }) } render() { return ( <form> <fieldset> <legend>Create Issue</legend> <input type="text" value={this.state.title} onChange={this.onChangeTitle.bind(this)} /> <textarea value={this.state.description} onChange={this.onChangeDescription.bind(this)} /> <button>Save</button> </fieldset> </form> ) }

12. One-way data binding • σʔλ͕Ұํ޲ʹ͔͠ྲྀΕͳ͍ • ߟ͑Δ͜ͱ͕γϯϓϧʹͳΔ • σʔλ͔ΒͲ͏΍ͬͯϏϡʔΛ࡞Δ͔ •

    σʔλΛͲ͏มߋ͢Δ͔

13. ෳ਺ίϯϙʔωϯτ • ೖྗͨ͠σʔλΛϦετͰද͍ࣔͨ͠ • git checkout list • ͖ͬ͞ͷAppΛIssueFormʹ •

    ৽͘͠IssueListίϯϙʔωϯτΛ࡞੒

14. ෳ਺ίϯϙʔωϯτ

15. components/App.js • IssueFormͰ࡞ΒΕͨΦϒδΣΫτΛIssueList ʹ౉͍ͨ͠ import React, { Component } from

    'react' import IssueList from './IssueList' import IssueForm from './IssueForm' export default class App extends Component { render() { return ( <div> <IssueList /> <IssueForm /> </div> ) } }

16. Property • ίϯϙʔωϯτ͸ϓϩύςΟΛ࣋ͭ • JSXͷଐੑͱͯ͠ड͚औΕΔ • <IssueList issues={this.state.issues} /> •

    ܕͷఆٛͳͲ͕ߦ͑Δ • PropTypesͱݺ͹ΕɺͲ͏͍͏ଐੑ໊ͰͲ͏͍͏ܕ ͷσʔλΛड͚औΔ͔ఆٛͰ͖Δ

17. components/App.js • IssueList͕issuesϓϩύςΟΛड͚औΔ export default class App extends Component {

    constructor(props) { super(props) this.state = { issues: [ { id: 1, title: 'First Issue', description: 'foobarbaz' }, { id: 2, title: 'Incident', description: 'OMG' } ] } } render() { return ( <div> <IssueList issues={this.state.issues} /> <IssueForm /> </div> ) } }

18. components/App.js • IssueForm͕onSubmitϓϩύςΟΛड͚औΔ export default class App extends Component {

    onSubmit(issue) { let issues = this.state.issues issue.id = issues.length + 1 this.setState({ issues: issues.concat(issue) }) } render() { return ( <div> <IssueList issues={this.state.issues} /> <IssueForm onSubmit={this.onSubmit.bind(this)} /> </div> ) } }

19. components/IssueList.js • this.props Ͱ౉͞Εͨଐੑ஋ΛࢀরͰ͖Δ export default class IssueList extends Component

    { render() { return ( <table> { this.props.issues.map((issue) => { return ( <tr key={issue.id}> <td>{issue.id}</td> <td>{issue.title}</td> <td>{issue.description}</td> </tr> ) }) } </table> ) } }

20. components/IssueList.js • this.props Ͱ౉͞Εͨଐੑ஋ΛࢀরͰ͖Δ export default class IssueList extends Component

    { constructor(props) { super(props) this.state = { title: '', description: '' } } onSubmit(e) { e.preventDefault() this.props.onSubmit(this.state) } render() { return ( <form onSubmit={this.onSubmit.bind(this)}> <fieldset> <legend>Create Issue</legend> <input type="text" value={this.state.title} …/> <textarea value={this.state.description} … /> <button>Save</button> </fieldset> </form> ) } }

21. StateͱProperty • State͸Mutable • Property͸Immutable • StateΛࢠComponentͷPropertyͱͯ͠౉͢ • ࢠComponent͔ΒState͕มߋ͞ΕΔ͜ͱ͸ͳ͍ •

    มߋ͸ίʔϧόοΫͰ

22. Flux

23. Fluxͱ͸ • Facebook͕ఏএͨ͠ΞʔΩςΫνϟ • ΞϓϦέʔγϣϯͱͯ͠σʔλϑϩʔ͸Ұํ ޲͚ͩʹྲྀΕΔ

24. MVC • Model͕ViewΛ࡞ΓɺView͕ModelΛมߋ͠ɺ͞Βʹ View͕มߋ͞ΕΔ

25. Flux • Action͕StoreΛมߋ͠ɺStore͕ViewΛͭ͘ΓɺView͕ ActionΛൃߦ͢Δ

26. ΢ΣϒαΠτͱࣅͯΔ • యܕతͳ΢ΣϒαΠτ • αʔόʔ͕ϦΫΤετΛड͚औΓɺ DBͷσʔλΛߋ৽͢Δ • ৽͍͠σʔλΛݩʹϖʔδΛҰ͔ΒϨϯμϦϯά͢Δ • Flux

    • Dispatcher͕ActionΛड͚औΓɺStoreΛߋ৽͢Δ • ৽͍͠StoreΛݩʹϖʔδΛҰ͔ΒϨϯμϦϯά͢Δ • ຊ౰͸React্͕ख͍͜ͱඞཁͳ෦෼͚ͩϨϯμϦϯάͯ͘͠ΕΔ

27. Flux࣮૷ • ΞʔΩςΫνϟͳͷͰ࣮૷͸͍Ζ͍Ζ • MVCϑϨʔϜϫʔΫ͕͍ͬͺ͍ଘࡏ͢ΔΈ ͍ͨʹ • ࠷ۙਓؾͷReduxΛ৮ͬͯΈΔ

28. Redux • Flux࣮૷ͷ̍ͭ • ಛ௃ • ΞϓϦέʔγϣϯͷঢ়ଶΛ̍ͭͰѻ͏ • ঢ়ଶ͸read-only •

    มߋ͸७ਮͳؔ਺Ͱॻ͚Δ • git checkout flux

29. Action • ΞΫγϣϯ໊ͱҾ਺Λ·ͱΊͨΦϒδΣΫτ • ActionCreator • ActionΛฦؔ͢਺ export const ADD

    = 'ADD_ISSUE' export const REFRESH = 'REFRESH_ISSUES' export function addIssue(issue) { return { type: ADD, issue: issue } } export function refreshIssues(issues) { return { type: REFRESH, issues: issues } }

30. Reducer • Actionͱݱࡏͷঢ়ଶΛड͚ͯɺ৽͍͠ঢ়ଶΛฦؔ͢਺ const initialState = [ { id: 1,

    title: 'First issue', author: {id: 1}, assignee: {id: 1} } ] export default function issues(state, action) { if (typeof state == 'undefined') { return initialState } switch (action.type) { case ADD: let issue = action.issue return [ ...state, { id: state.length + 1, title: issue.title, description: issue.description } ] case REFRESH: return action.issues } return state }

31. Container • ಛผͳComponent • ReduxͱReactΛܨ͛Δଘࡏ • ҎԼͷ΋ͷΛpropertyͱͯ͠ड͚औΕΔΑ͏ʹͳΔ • ReducerʹΑͬͯ࡞ΒΕΔঢ়ଶ(store) •

    ActionΛൃߦ͢ΔͨΊͷdispatchؔ਺

32. Container import React, { Component } from 'react' import {

    bindActionCreators } from 'redux' import { addIssue, loadIssues } from '../actions/issues' class App extends Component { onAdd(issue) { this.props.dispatch(addIssue(issue)) } render() { const { dispatch, issues } = this.props return ( <div> <IssueList issues={issues} onAdd={this.onAdd.bind(this)} /> </div> ) } } function mapStateToProps(state) { return { issues: state.issues } } export default connect(mapStateToProps)(App)

33. Container issuesͱdispatch͕౉͞Ε͍ͯΔ

34. Fluxͯ͠ΈΔ • git checkout flux • saveͯ͠΋௥Ճ͞Εͳ͍ϑΥʔϜ͕͋Δ • TODO •

    reducers/issues.js • containers/App.js

35. reducers/issues.js • ΞΫγϣϯ͕ൃߦ͞Εͨͱ͖ʹstate͕Ͳ͏ม ΘΔ͔ͷؔ਺͕͋Δ͚ͩ import { ADD, REFRESH } from

    '../actions/issues' const initialState = [ { id: 1, title: 'First issue', author: {id: 1}, assignee: {id: 1} } ] export default function issues(state, action) { if (typeof state == 'undefined') { return initialState } switch (action.type) { case ADD: //TODO: Add new issue } return state }

36. reducers/issues.js • ADDΞΫγϣϯͰɺstateʹissueΛ௥Ճͨ͠৽ ͍͠stateΛฦͤ͹͍͍ import { ADD, REFRESH } from

    '../actions/issues' const initialState = [ { id: 1, title: 'First issue', author: {id: 1}, assignee: {id: 1} } ] export default function issues(state, action) { if (typeof state == 'undefined') { return initialState } switch (action.type) { case ADD: //TODO: Add new issue } return state }

37. reducers/issues.js • ৽͍͠഑ྻΛฦ͢ • stateʹ୅ೖͯ͠͸͍͚ͳ͍ case ADD: let issue =

    action.issue return [ ...state, { id: state.length + 1, title: issue.title, description: issue.description } ]

38. containers/App.js • ϑΥʔϜͷίʔϧόοΫͰɺActionΛൃߦ͠ ͍ͨ import React, { Component } from

    'react' import { connect } from 'react-redux' import IssueList from '../components/IssueList' import { addIssue } from '../actions/issues' class App extends Component { onAdd(issue) { //TODO: Dispatch addIssue action! } render() { return ( <div> <IssueList issues={this.props.issues} onAdd={this.onAdd.bind(this)} /> </div> ) } }

39. containers/App.js • addIssueؔ਺Ͱฦ͞ΕΔΞΫγϣϯΛɺ
 this.props.dispatchʹ౉͢ import IssueList from '../components/IssueList' import {

    addIssue } from '../actions/issues' class App extends Component { onAdd(issue) { this.props.dispatch(addIssue(issue)) } render() { return ( <div> <IssueList issues={this.props.issues} onAdd={this.onAdd.bind(this)} /> </div> ) } }

40. Ajax • αʔόʔ͔ΒσʔλΛऔಘ͍ͨ͠ • ActionͰ΍Δͷ͕Ұൠత • redux-thunk ͱ͍͏middlewareΛ࢖͏ • git

    checkout ajax

41. Ajax • ActionCreatorͰdispatchΛड͚Δؔ਺Λฦ͢ export const ADD = 'ADD_ISSUE' export const

    LOAD = 'LOAD_ISSUES' export const REFRESH = 'REFRESH_ISSUES' export function addIssue(issue) { return { type: ADD, issue: issue } } export function refreshIssues(issues) { return { type: REFRESH, issues: issues } } export function loadIssues() { return dispatch => { fetch('/api/issues') .then(res => res.json()) .then(json => { dispatch(refreshIssues(json)) }) } }

42. Ajax • ड͚औͬͨdispatchΛඇಉظͰ࣮ߦ͢Δ export const ADD = 'ADD_ISSUE' export const

    LOAD = 'LOAD_ISSUES' export const REFRESH = 'REFRESH_ISSUES' export function addIssue(issue) { return { type: ADD, issue: issue } } export function refreshIssues(issues) { return { type: REFRESH, issues: issues } } export function loadIssues() { return dispatch => { fetch('/api/issues') .then(res => res.json()) .then(json => { dispatch(refreshIssues(json)) }) } }

43. Ajax • Reducer import { ADD, REFRESH } from '../actions/issues'

    export default function issues(state, action) { if (typeof state == 'undefined') { return initialState } switch (action.type) { case ADD: let issue = action.issue return [ ...state, { id: state.length + 1, title: issue.title, description: issue.description } ] case REFRESH: return action.issues } return state }

44. αʔόʔͰϨϯμϦϯάͯ͠ ΈΔ

45. αʔόʔαΠυϨϯμϦϯά • SEOͷ؍఺ • Ϋϩʔϥʔ͕Ͳ͜·ͰJavaScriptΛ্ख͘ѻ͍͑ͯΔ͔ෆ҆ • ੩తͳϖʔδΛฦ͍ͨ͠ • Ϣʔβʔମݧ •

    ϖʔδʹΞΫηε͔ͯ͠ΒɺReactͷ࣮ߦΛ଴ͬͯɺAPIϦ ΫΤετૹͬͯɺඳը͞ΕΔͷ͕ɺ஗͍

46. ࢓૊Έ • DOM৮ͬͯͳ͍ͷͰɺαʔόʔଆͰ΋࣮ߦͰ͖ΔJS ʹͳ͍ͬͯΔ • ΞϓϦέʔγϣϯͷঢ়ଶ͕ܾ·Ε͹ɺϏϡʔ͸ܾ· Δ • DOMͱͯ͠Ͱ͸ͳ͘ɺจࣈྻͱͯ͠Ϩϯμʔ͢Δ •

    ͦͷঢ়ଶͷΦϒδΣΫτΛಉ࣌ʹฦ͢

47. ΍ͬͯΈΔ • git checkout ssr • npm start ͷ࠶ىಈ

48. server.js • client.jsͱେମಉ͡ • renderToStringͰHTMLจࣈ ྻ͕࡞ΒΕΔ //TODO: Interpolate html and

    initialState function renderFullPage(html, initialState) { return … } function handler(req, res) { const store = createStore(issueApp) //TOOD: Set initial data const html = renderToString( <Provider store={store}> <App /> </Provider> ) const initialState = store.getState() res.send(renderFullPage(html, initialState)) } app.use(Express.static('static')) app.use('/api/issues', issuesHandler) app.use(handler) app.listen(port)

49. server.js • renderFullPageͰrenderToString͞ΕͨHTML ͱɺॳظstateΛςϯϓϨʔτʹૠೖ͢Δ͚ͩ //TODO: Interpolate html and initialState function

    renderFullPage(html, initialState) { return ` <!doctype html> <html> <head> <title>React Sokushu</title> </head> <body> <div id="root"></div> <script src="/dist/bundle.js"></script> </body> </html> ` }

50. server.js • renderFullPageͰrenderToString͞ΕͨHTML ͱɺॳظstateΛςϯϓϨʔτʹૠೖ͢Δ͚ͩ function renderFullPage(html, initialState) { return `

    <!doctype html> <html> <head> <title>React Sokushu</title> </head> <body> <div id="root">${html}</div> <script> window.__INITIAL_STATE__ = ${JSON.stringify(initialState)} </script> <script src="/dist/bundle.js"></script> </body> </html> ` }

51. view-source

52. client.js • ঢ়ଶ͕Viewͱҧ͏ͱαΠϨϯμʔ͞ΕΔͷ Ͱɺॳظstate͔ΒstoreΛͭ͘ΔΑ͏ʹ͢Δ const store = createStore( issueApp, window.__INITIAL_STATE__,

    applyMiddleware(thunk) ) render( <Provider store={store}> <App /> </Provider>, document.getElementById("root") )

53. CSS in React

54. CSS in React • CSSͷ໰୊఺ • ໊લͷিಥ • Ϋϥε໊Λ͍ͬͺ͍ߟ͑ͳ͍ͱ •

    ࢖ΘΕͳ͘ͳͬͨίʔυ͕ফͤͳ͍ • ංେԽ͢Δcss • JSXͰϏϡʔΛ.jsͰॻ͘Α͏ʹͳͬͨͷͰɺελΠϧ΋Ұॹʹॻ͖ ͍ͨ

55. CSS in React • ΫϥεΛ෇͚Δ୅ΘΓʹinlineͰॻ͘ • style={this.styles.base} Έ͍ͨʹ • ܧঝͱ͔ਏ͍

    • :hoverͱ͔͔͚ͳ͍

56. Radium • coreͰ͸෺଍Γͳ͍ػೳΛ௥Ճ • https://github.com/FormidableLabs/radium • :hoverͰ͖Δ • ܧঝͰ͖Δ

57. ॻ͍ͯΈΔ • git checkout css • IssueForm͕ͪΐͬͱ͚ͩ៉ྷʹ

58. components/IssueForm.js import React, { Component } from 'react' import Radium

    from 'radium' import color from 'color' class IssueForm extends Component { render() { return ( <div> <form onSubmit={this.onSubmit.bind(this)}> <fieldset> <legend>Create Issue</legend> <input style={styles.input} type="text" value={this.state.title} …/> <textarea style={styles.input} value={this.state.description} … /> <button style={styles.button}>Save</button> </fieldset> </form> </div> ) } } const styles = { input: { display: 'block', width: '200px', padding: '6px 10px', margin: '10px 0', border: '1px solid #ccc' }, button: { backgroundColor: '#00A4BB', border: 'none', padding: '6px 15px', color: 'white', cursor: 'pointer', } } export default Radium(IssueForm)

59. components/IssueForm.js class IssueForm extends Component { render() { return (

    <div> <form onSubmit={this.onSubmit.bind(this)}> <fieldset> <legend>Create Issue</legend> <input style={styles.input} type="text" value={this.state.title} …/> <textarea style={styles.input} value={this.state.description} … /> <button style={styles.button}>Save</button> </fieldset> </form> </div> ) } } inlineͰ౰͍ͯͯ͘ ద౰ͳΫϥε໊ߟ͑ΔΑΓ؆୯

60. components/IssueForm.js const styles = { input: { display: 'block', width:

    '200px', padding: '6px 10px', margin: '10px 0', border: '1px solid #ccc' }, button: { backgroundColor: '#00A4BB', border: 'none', padding: '6px 15px', color: 'white', cursor: 'pointer', } } ΦϒδΣΫτͰهड़

61. ΍ͬͯΈΔ • :hoverͰϘλϯͷ৭Λม͑Δ • textareaͷߴ͞Λม͑Δ

62. components/IssueForm.js import React, { Component } from 'react' import Radium

    from 'radium' import color from 'color' const styles = { input: { display: 'block', width: '200px', padding: '6px 10px', margin: '10px 0', border: '1px solid #ccc' }, textarea: { height: '100px' }, button: { backgroundColor: '#00A4BB', border: 'none', padding: '6px 15px', color: 'white', cursor: 'pointer', ':hover': { backgroundColor: color('#00A4BB').darken(0.2).hexString(), } } }

63. components/IssueForm.js • mouseenter, mouseleaveͰؤுͬͯ෇͚ସ͑ ͯ͘Δ const styles = { button:

    { backgroundColor: '#00A4BB', border: 'none', padding: '6px 15px', color: 'white', cursor: 'pointer', ':hover': { backgroundColor: color('#00A4BB').darken(0.2).hexString(), } } }

64. components/IssueForm.js • ഑ྻͰࢦఆ͢Δͱɺoverrideͯ͘͠ΕΔ • style={[styles.input, styles.textarea]} class IssueForm extends Component

    { render() { return ( <div> <form onSubmit={this.onSubmit.bind(this)}> <fieldset> <legend>Create Issue</legend> <input style={[styles.input]} type="text" value={this.state.title} … /> <textarea style={[styles.input, styles.textarea]} value={this.state.description} … /> <button style={[styles.button]}>Save</button> </fieldset> </form> </div> ) } }

65. components/IssueForm.js • ഑ྻͰࢦఆ͢Δͱɺoverrideͯ͘͠ΕΔ • style={[styles.input, styles.textarea]} class IssueForm extends Component

    { render() { return ( <div> <form onSubmit={this.onSubmit.bind(this)}> <fieldset> <legend>Create Issue</legend> <input style={[styles.input]} type="text" value={this.state.title} … /> <textarea style={[styles.input, styles.textarea]} value={this.state.description} … /> <button style={[styles.button]}>Save</button> </fieldset> </form> </div> ) } }

66. ·ͱΊ • ΫϥΠΞϯταΠυͷॻ͖ํ͕େ͖͘มΘΔ • Ϗϡʔ΋CSS΋jsʹೖΕΔ • ίϯϙʔωϯτͷڍಈ͸͚ͦͩ͜ΈΕ͹શ ͯ෼͔Δʂ • αʔόʔαΠυϨϯμϦϯά؆୯