#VJMEJOH"QQTXJUI3FBDUKT'MVY ୈճ)5.-ͱ͔ษڧձ LPCB

LPCB w 8FC"QQMJDBUJPO&OHJOFFS w IUUQLPCBDPN w Ұਓ3FBDUKT"EWFOU$BMFOEBS w IUUQRJJUBDPNBEWFOUDBMFOEBSSFBDUKT

No content

3FBDUKT w GBDFCPPL͕࡞ͬͨ+BWB4DSJQUͷ6*ϥΠϒϥϦ w +6455)&6* w 7*356"-%0. w %"5"'-08

6TJOH3FBDUKT w 'BDFCPPL w GBDFCPPLDPN NFTTFOHFSDPN JOTUBHSBNDPN w /FUqJY w ##$ w "UMBTTJBO w ʜ

8IZ3FBDUKT w ෳࡶͳϢʔβʔΠϯλʔϑΣΠεΛߏங͢ΔͨΊʹ w ։ൃޮ཰ͷ޲্Ͱ͸ͳͯ͘3FMJBCJMJUZ ৴པੑ Λ֬อ ͢Δ͜ͱ͕໨త

)FMMP import React from ‘react’; class Hello extends React.Component { render() { return ; } } React.render( , document.getElementById(‘app’) ); //

)FMMP import React from ‘react’; class Hello extends React.Component { render() { return ; } } React.render( , document.getElementById(‘app’) ); // ʂʂʂʁʁʁ

+49 w 4ZOUBYTVHBSPG3FBDUDSFBUF&MFNFOU w +BWB4DSJQUͷදݱੑͱ5FNQMBUFͷΘ͔Γ΍͢͞ w 4FQBSBUJPOPGDPODFSOT ! React.createElement(“div”, {className: “foo”}, “Hello”) W͔Β ࠷దԽ΋

$PNQPOFOU w දࣔཁૉΛͦΕͧΕ$PNQPOFOUͱͯ͠෼ׂͦ͠ͷத ʹৼΔ෣͍ͱݟͨ໨Λ·ͱΊΔ w $PIFTJPO ڽू౓ ˢɺ$PVQMJOH ݁߹౓ ˣ

4UBUFMFTT w ֤$PNQPOFOUʹঢ়ଶΛ࣋ͨͤΔͷͰ͸ͳ͘ɺ਌ $PNQPOFOU͕ঢ়ଶΛ؅ཧ͢Δ w .VUBCMF มߋՄೳ ͳ஋͸ෳࡶੑΛੜΉ

-JLF4FSWFSTJEFSFOEFSJOH w ঢ়ଶ͕มΘͬͨΒ਌ͷ$PNQPOFOU͔Βશͯͷ $PNQPOFOUΛ࠶౓࡞Γ௚͢ w 1FSGPSNBODF ˠࠩ෼͚ͩΛ%0.ʹ൓ө

ᶃUSJHHFS ᶄFWFOU ᶅVQEBUF ᶆEBUB ᶇVQEBUF%0.

%PPNFOHJOF IUUQXXXTMJEFTIBSFOFUqPZEPQIPOFSFBDUQSFTPW

1SPQ4UBUF

1SPQ4UBUF w 1SPQ w $PNQPOFOUͷ*OUFSGBDF w *NNVUBCMF w 4UBUF w $PNQPOFOU͕0XOFSTIJQΛ࣋ͭ஋ w ࢠʹ1SPQͱͯ͠౉͢

1SPQ EBUB 1SPQ EBUB 1SPQ FWFOU ᶃUSJHHFS ᶅVQEBUF4UBUF 1SPQ FWFOU

ਆࢿྉ IUUQTTQFBLFSEFDLDPNIPLBDDIBJOUSPEVDUJPOUPSFBDU

-FU`TTUBSU

No content

$PNQPOFOU

App InputFilter HNStory HNStories

$PNQPOFOU*'

class App extends React.Component { constructor(props) { super(props); this.state = { stories: [], filterText: ‘’}; } static get propTypes() { return { count: React.PropTypes.number } } static getDefaultProps() { return { count: 50 } } handleFilter(input) {} render() { return ( ); } } QBTTBTQSPQT IBTBTUBUF SFDFJWFQSPQT

class InputFilter extends React.Component { static get propTypes() { return { handleFilter: React.PropTypes.func.isRequired } } onInput(e) { this.props.handleFilter(e.target.value); } render() { return ( ) } } MJTUFOUIFDIBOHFFWFOU EFMFHBUFUIFFWFOU

class HNStories extends React.Component { static get propTypes() { return { stories: React.PropTypes.arrayOf(React.PropTypes.object).isRequired } } render() { return ( ); } } QBTTBTQSPQT

class HNStory extends React.Component { static get propTypes() { return { story: React.PropTypes.object.isRequired } } render() { const {rank, url, title, by, kids} = this.props.story; const commentCount = kids ? kids.length : 0; return ( ); } }

React.render(, document.getElementById('app'));

6QEBUF4UBUF

class App extends React.Component { : componentDidMount() { fetch(HN_TOP_STORY_URL) .then(res => res.json()) .then(ids => { ids.slice(0, this.props.count).forEach((id, index) => { fetch(`${HN_STORY_URL}/${id}.json`) .then(res => res.json()) .then(story => { story.rank = index + 1; this.setState({ stories: this.state.stories.concat([story]).sort((a,b) => a.rank - b.rank) }); }) }) }); } }

class App extends React.Component { : handleFilter(input) { this.setState({filterText: input}); } filterStories() { const filterText = this.state.filterText.toLowerCase(); return this.state.stories.filter(story => { return !filterText || story.title.toLowerCase().indexOf(filterText) !== -1 || story.by.toLowerCase().indexOf(filterText) !== -1 ; }); } render() { return ( ); } }

class InputFilter extends React.Component { static get propTypes() { return { handleFilter: React.PropTypes.func.isRequired } } onInput(e) { this.props.handleFilter(e.target.value); } render() { return ( ) } }

HJUIVCDPNLPCBSFBDUIBDLFSOFXTTUPSJFT

$PNQMFY"QQMJDBUJPO

No content

IUUQTUXJUUFSDPNU@XBEBTUBUVT

'MVY IUUQTHJUIVCDPNGBDFCPPLqVY

'MVY w "SDIJUFDUVSF w 6OJEJSFDUJPOBM%BUBqPX w $PNQPOFOU"DUJPO$SFBUPS%JTQBUDIFS 4UPSF$PNQPOFOU

$PNQPOFOU "DUJPO$SFBUPST "DUJPO$SFBUPST %JTQBUDIFS 4UPSF 4UPSF $PNQPOFOU $PNQPOFOU 0UIFST )551ʜ .FUIPE "DUJPO "DUJPO &WFOU EBUB

App InputFilter HNStory HNStories

-FU`THPUPBqVYUSJQ

$PNQPOFOU

class App extends React.Component { constructor(props) { super(props); this.state = {stories: HNStoriesStore.filteredStrories()}; this._onChange = this._onChange.bind(this); } static get propTypes() { return { count: React.PropTypes.number}} static getDefaultProps() { return {count: 50} } componentDidMount() { HNStoriesStore.addChangeListener(this._onChange); AppHNStoriesActionCreators.fetch(this.props.count); } componentWillUnmount() { HNStoriesStore.removeChangeListener(this._onChange); } _onChange() { this.setState({ stories: HNStoriesStore.filteredStrories()}); } render() { return ( ) } } "DUJPO$SFBUPSΛݺͿ

class InputFilter extends React.Component { onInput(e) { AppHNStoriesActionCreators.filter(e.target.value); } render() { return ( ) } } "DUJPO$SFBUPSΛݺͿ

"DUJPO$SFBUPST

const Action = { fetch(count) { fetch(HN_TOP_STORY_URL) .then(res => res.json()) .then(ids => { ids.slice(0, count).forEach((id, index) => { fetch(`${HN_STORY_URL}/${id}.json`) .then(res => res.json()) .then(story => { story.rank = index + 1; AppDispatcher.dispatch({ type: ActionTypes.RECEIVE_STORY, story: story }); }) }) }); }, filter(text) { AppDispatcher.dispatch({ type: ActionTypes.RECEIVE_FILTER_TEXT, text: text }); } }; "DUJPOΛൃߦͯ͠ %JTQBUDIFS΁

%JTQBUDIFS

import {Dispatcher} from 'flux'; const AppDispatcher = new Dispatcher(); શͯͷ"DUJPOΛड͚ͯ શͯͷ4UPSF΁ XBJU'PSͰॱ൪ͷ੍ޚ΋

4UPSF

const HNStories = assign({}, EventEmitter.prototype, { : }); HNStories.dispatchToken = AppDispatcher.register(action => { switch (action.type) { case ActionTypes.RECEIVE_STORY: stories = stories.concat([action.story]); HNStories.emitChange(); break; case ActionTypes.RECEIVE_FILTER_TEXT: filterText = action.text.toLowerCase(); HNStories.emitChange(); break; } }); શͯͷ"DUJPOΛड͚ͯ ඞཁͳ΋ͷ͚ͩॲཧ͢Δ

let stories = []; let filterText = ''; const HNStories = assign({}, EventEmitter.prototype, { emitChange() { this.emit(CHANGE_EVENT); }, addChangeListener(callback) { this.on(CHANGE_EVENT, callback); }, removeChangeListener(callback) { this.removeListener(CHANGE_EVENT, callback); }, filteredStrories() { return stories.filter(story => { return !filterText || story.title.toLowerCase().indexOf(filterText) !== -1 || story.by.toLowerCase().indexOf(filterText) !== -1 ; }); } }); : : $PNQPOFOUʹର͢Δ &WFOUͱHFUUFS

$PNQPOFOU

class App extends React.Component { constructor(props) { super(props); this.state = {stories: HNStoriesStore.filteredStrories()}; this._onChange = this._onChange.bind(this); } static get propTypes() { return { count: React.PropTypes.number}} static getDefaultProps() { return {count: 50} } componentDidMount() { HNStoriesStore.addChangeListener(this._onChange); AppHNStoriesActionCreators.fetch(this.props.count); } componentWillUnmount() { HNStoriesStore.removeChangeListener(this._onChange); } _onChange() { this.setState({ stories: HNStoriesStore.filteredStrories()}); } render() { return ( ) } } 4UPSF͔ΒσʔλΛड͚औΓ &WFOUΛड͚ͯߋ৽

"DUJPO$SFBUPST %JTQBUDIFS 4UPSF $PNQPOFOU $PNQPOFOU FNJU FNJU MJTUFO MJTUFO EBUB EBUB

HJUIVCDPNLPCBSFBDUIBDLFSOFXTTUPSJFTUSFFqVY

'MVYDPNQBSJTPO w IUUQTHJUIVCDPNWPSPOJBOTLJqVYDPNQBSJTPO w 'BDFCPPL'MVY w 'MVYJCMFCZ:BIPP w 'MVNNPY w .BUFSJBM'MVY w 'MVYYPS

$PODMVTJPO w $PNQPOFOUʹΑΔΧϓηϧԽ w ਌͔Βࢠ΁ͷ໌֬ͳσʔλͷྲྀΕ w ෳࡶͳϢʔβʔΠϯλʔϑΣΠεͷ୯७Խ

5IBOLZPV TQFBLFSEFDLDPNLPCB