Ý w react - codewindscodewinds.com/assets/jsconf-2015-react.pdfreact native app. react native p2....
TRANSCRIPT
![Page 1: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/1.jpg)
React.jsIntroduction / Getting Started
Jeff Barczewski
codewinds.com
CodeWindsTraining
![Page 2: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/2.jpg)
React.js WorkshopInstall Node.js clone or download/extract zip from
If using windows, use instead
cd into new dir and npm install
http://nodejs.org
http://codewinds.com/jsconf-react
http://codewinds.com/jsconf-react-win
![Page 4: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/4.jpg)
Who am I?@jeffbski [email protected] yrs professional developerLast 3+ yrs fulltime JavaScript / Node.jsCreated CodeWinds to publish video trainingcourses
![Page 5: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/5.jpg)
![Page 6: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/6.jpg)
Question for youWhat are your greatest difficulties or challenges
that you face when building web apps?
codewinds.com CodeWinds
![Page 7: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/7.jpg)
GoalsLearn why React.js is specialCore conceptsImplement features in React.js
codewinds.com CodeWinds
![Page 8: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/8.jpg)
What makes React.js special?Simple to learnComposable ComponentsDeclarativeEasy to use with existing projects
codewinds.com CodeWinds
![Page 9: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/9.jpg)
Quick demosReact.jsReact Native
codewinds.com CodeWinds
![Page 10: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/10.jpg)
React.js core conceptsJust the viewVirtual DOMComponentsTop down data flow
codewinds.com CodeWinds
![Page 11: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/11.jpg)
Just the viewclass Greeting extends React.Component {
render() { // the heart of React.js
// pass in any type of js objects, methods, or fns
return <div>{ this.props.user.name }</div>;
}
}
codewinds.com CodeWinds
![Page 12: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/12.jpg)
Virtual DOMVirtual DOM Actual DOM
=>
Render virtual treeFast diffAdapters to DOM, ...
codewinds.com CodeWinds
![Page 13: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/13.jpg)
Componentsclass Name ... // can be in another file
class Greeting extends React.Component {
render() { // focus on my props
return (
<div>
Hello
<Name value={this.props.name} />
</div>
);
}
}
![Page 14: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/14.jpg)
Top down data flow// from main.js
<App name={appName} items={items} />
// elsewhere in App's render()
return (<div>
<MainTitle title={this.props.name} />
<PagingList collection={this.props.items} />
</div>);
// elsewhere in MainTitle's render()
![Page 15: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/15.jpg)
React.js API - JSXreturn ( // JSX is optional but really give it a try
<div>
<h1>{this.props.title}</h1>
<MyDate val={this.props.date} />
</div>
);
// transforms into
return React.createElement('div', {}, [
React.createElement('h1', {}, this.props.title),
React.createElement(MyDate, { val: this.props.date }, [])
]);
![Page 16: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/16.jpg)
React.js API - render, propsvar mainDiv = document.querySelector('#mainDiv');
React.render(<App title={myTitle} items={myItems} />,
mainDiv); // apply here
// elsewhere in App's render()
return (
<div>
<h1>{this.props.title}</h1>
<ul>{this.props.items.map(i =>
<li key={i.id}>{i.name}</li>)}
</ul>
...
![Page 18: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/18.jpg)
Survey Projecthttp://survey.codewinds.com/http://survey.codewinds.com/admin.htmlhttp://survey.codewinds.com/polls
![Page 19: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/19.jpg)
First stepsFetch /polls with axiosDisplay all the questions in a listShuffle the polls with shuffle-arrayDisplay the first shuffled poll w/choices
![Page 20: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/20.jpg)
React.js API - JSX p2const errorStyle = {
color: 'red',
marginRight: '10px'
};
const html = marked('The quick brown fox...');
return (
<div className="foo bar" data-baz="a"> { /* comment */ }
<span style={errorStyle}>{this.props.msg}</span>
<input autoFocus="true" onClick={this.myfn.bind(this)} />
<div dangerouslySetInnerHTML={{ __html: html }} />
</div> );
![Page 21: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/21.jpg)
React.js API - state, eventsclass MyComp extends React.Component {
constructor(...args) {
super(...args);
this.state = { count: 0 };
}
render() { return (
<button onClick={this.clicked.bind(this)} >
{this.state.count} </button> );
}
clicked(e) { this.setState({ count: this.state.count + 1 }); }
}
![Page 22: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/22.jpg)
React.js API - forms// uncontrolled comps, set orig value, can watch w/events
return (<div>
<input name="first" defaultValue={this.props.first}
onChange={this.firstChanged.bind(this)} />
<textarea name="foo" defaultValue={this.props.foo} />
</div>); // <select> also works similarly
// controlled comp, force value w/state, this.state = {}
return (<div><input name="first" value={this.state.first}
onChange={this.firstChgd.bind(this)} /></div>);
...
firstChgd(e) { this.setState({ first: e.target.value }); }
![Page 23: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/23.jpg)
React.js API - refsreturn (<form onSubmit={this.sendData.bind(this)}>
<input name="foo"/>
<button ref="submitButton">Send</button>
</form>);
sendData(e) {
e.preventDefault();
var submitButton = React.findDOMNode(this.refs.submitButton);
submitButton.disabled = true; // re-enable after post completes
// send data, then submitButton.disabled = false;
}
![Page 24: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/24.jpg)
React.js API - Lifecycle
componentWillMount()componentDidMount()
componentWillReceiveProps(nextProps)shouldComponentUpdate(nextProps, nextState)componentWillUpdate(nextProps, nextState)componentDidUpdate(prevProps, prevState)
componentWillUnmount()
Mount
Unmount
Updates
React Component Lifecycle
![Page 25: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/25.jpg)
Survey Part 2Display poll as formPost { YOUR_ID: IDX } to /polls/${id}that returns poll result, display poll resultUse PieChart from react-d3-components todisplay
![Page 26: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/26.jpg)
Survey Part 3Use state to display first pollUse state to hold shuffled pollsAdd next survey button which shifts pollsetState trigger update to show new poll
![Page 27: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/27.jpg)
Survey Part 4Add admin.htmlAdd conditional logic location.pathname ='/admin.html'
fetch /admin/polls, display allAdd question form
post { question: 'What', choices: [ 'Foo', 'Bar'] }to /polls
![Page 28: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/28.jpg)
React.js API - prop validationMyComponent.propTypes = {
foo: React.PropTypes.object, // any object
bar: React.PropTypes.shape({ f: React.PropTypes.string }),
baz: React.PropTypes.array, // also arrayOf(propType...)
cat: React.PropTypes.func.isRequired, // fn + required
dog: React.PropTypes.node, // number, string, array, element
egg: React.PropTypes.any.isRequired, // anything + required
fig: React.PropTypes.instanceOf(Message),
gib: React.PropTypes.oneOf(['optionA', 'optionB']), // enum
hib: function (props, propName, compName) { // custom
if (...) { return new Error('my validation error'); } }};
![Page 29: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/29.jpg)
React.js API - default props// cached and used as the defaults
MyComponent.defaultProps = {
foo: 'default value',
bar: 1
};
![Page 30: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/30.jpg)
React.js API - perf tuningreturn (
<ul>
{ items.map(i => <li key={i.id}>{i.name}</li>) }
</ul>
);
import PureComponent from 'react-pure-render/component';
class Foo extends PureComponent {
// implements shouldComponentUpdate with shallow compare
// works for primatives and immutable objects
}
![Page 31: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/31.jpg)
React.js API - render string// can render to string on server
const str = React.renderToString(<App items={myItems} />);
// alternatively if not using React in browser,
// renderToStaticMarkup also renders to string, but
// doesn't include the React attributes (id's and checksums)
// needed for reconciliation
const str = React.renderToStaticMarkup(<App items={myItems} />);
![Page 32: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/32.jpg)
React.js familyreact-routerFluxReact Native
codewinds.com CodeWinds
![Page 33: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/33.jpg)
react-routerconst routes = (<Route handler={App} path="/">
<DefaultRoute handler={Home} />
<Route name="about" handler={About} />
</Route>);
Router.run(routes, Router.HistoryLocation, (Handler, props) =>
// can fetch data for props.routes here
React.render(<Handler />, document.querySelector('#appDiv'));
});
return (<div><h1>App<h1> { /* in App render() */ }
<RouteHandler />
</div>);
![Page 34: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/34.jpg)
Flux
![Page 35: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/35.jpg)
React Native
ImageListViewMapViewNavigatorScrollViewTextTextInputViewWebView...
Native IOS/Android
render: function() { return ( <View style={styles.container}> <Text>{movie.title}</Text> <Text>{movie.year}</Text> <Image source={{uri: movie.img}} /> </View> ); }
JS using React Native
React Native App
![Page 36: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/36.jpg)
React Native p2
![Page 37: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/37.jpg)
FutureFalcorJSRelay/GraphQL
{
user(id: 3500401) {
id,
name,
isViewerFriend,
profilePicture(size: 50) {
uri,
width,
height
![Page 38: Ý w React - CodeWindscodewinds.com/assets/jsconf-2015-react.pdfReact Native App. React Native p2. Future Relay/GraphQL FalcorJS {user(id: 3500401) {id, name, isViewerFriend, profilePicture(size:](https://reader030.vdocuments.site/reader030/viewer/2022040411/5ed790b967b53e06555d24ad/html5/thumbnails/38.jpg)
SummaryReact.js is a game changerUse it in your projects todayEnjoy coding in a new way!
React.js video training - summer 2015@jeffbski [email protected]
http://codewinds.com/jsconf