Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
reactjs intro
Search
Matthias Le Brun
December 09, 2014
2
560
reactjs intro
Matthias Le Brun
December 09, 2014
Tweet
Share
More Decks by Matthias Le Brun
See All by Matthias Le Brun
(why the hell did I) build a GraphQL client for the browser
bloodyowl
0
80
Boxed: bringing algebraic types to TypeScript
bloodyowl
0
98
leveraging (algebraic data) types to make your UI rock @ jsheroes
bloodyowl
0
280
Leveraging (algebraic data) types to make your UI rock solid
bloodyowl
0
400
La drôle d'histoire de JavaScript
bloodyowl
0
350
Healthy Code Collaboration
bloodyowl
0
270
Simplify your UI management with (algebraic data) types
bloodyowl
0
800
Simplify your UI management with (algebraic data) types
bloodyowl
1
520
Migrating a large Reason+React codebase to hooks
bloodyowl
0
540
Featured
See All Featured
Practical Orchestrator
shlominoach
188
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
It's Worth the Effort
3n
185
28k
Site-Speed That Sticks
csswizardry
10
660
Adopting Sorbet at Scale
ufuk
77
9.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Unsuck your backbone
ammeep
671
58k
Designing Experiences People Love
moore
142
24k
Transcript
None
REACTJS
COMMENT SIMPLIFIER LA CONCEPTION DE L'UI ?
RAPPELLE TOI AVANT XHR
Client Serveur
Client Serveur
Client Serveur
Client Serveur
DATA RENDER
DATA RENDER DOM STATE DATA-BINDING ENLEVER LES VUES NON-ACTIVES RAJOUTER
LES VUES
DATA RENDER DOM STATE DATA-BINDING ENLEVER LES VUES NON-ACTIVES RAJOUTER
LES VUES
RE-RENDER ALL THE THINGS
render() { return (
<h1>hello {this.props.name}</h1> ) }
render() { return (
<h1>hello {this.props.name}</h1> ) }
DÉCRIRE LE COMPOSANT À TOUT MOMENT
TOUT EST UN COMPOSANT
1 17
1 18 <CommentList />
1 19 <CommentList /> <Comment />
JSX JAVASCRIPT XML
1 21 <div className="wtf"></div>
1 22 React.createElement("div", {className:"wtf"})
BONUS ES6 FLOW
API
ng-repeat="friend in friends | filter:searchText"
WTF
TOUTES LES FEATURES DE JAVASCRIPT DANS LE TEMPLATE
GETTERS : .css(propertyName) .css(propertyNames) SETTERS : .css(propertyName, value) .css(propertyName, func)
.css(properties)
LELNOPE
EXPLICITE >>> *
1 31 React.render(<Component />, node) React.renderToString(<Component />,
node) React.renderToStaticMarkup(<Component />, node)
LIFECYCLE 32 componentWillMount componentDidMount componentWillUnmount
LIFECYCLE 33 shouldComponentUpdate componentWillUpdate componentDidUpdate componentWillReceiveProps
STATE 34 getInitialState() {} setState({}) replaceState({})
DEFAULTS 35 getDefaultProps() {}
COMPOSITION 36 mixins : [ {
componentDidMount() { console.log("foo") } } ]
1 37 var React = require("react/addons") var Comment =
require("components/comment") var CommentList = React.createClass({ propTypes : { comments : React.PropTypes.arrayOf(React.PropTypes.object).isRequired }, render() { return ( <div className="CommentList"> {this.props.comments.map((item) => <Comment item={item} key={item.id}/>)} </div> ) } }) module.exports = CommentList
1 38 var React var Comment
var CommentList propTypes comments }, render() { { ) } }) module React.createClass
1 39 var React var Comment
var CommentList propTypes comments }, render() { { ) } }) module propTypes : { comments : React.PropTypes.arrayOf(React.PropTypes.object).isRequired },
1 40 var React var Comment
var CommentList propTypes comments }, render() { { ) } }) module {this.props.comments.map((item) => <Comment item={item} key={item.id}/>)}
1 41 var React var Comment
var CommentList propTypes comments }, render() { { ) } }) module {this.props.comments.map((item) => <Comment item={item} key={item.id}/>)} var Comment = require("components/comment")
1 42 var React = require("react/addons") var Author =
require("components/author") var Comment = React.createClass({ propTypes : { item : React.PropTypes.shape({ id : React.PropTypes.string.isRequired, message : React.PropTypes.string, author : React.PropTypes.object }) }, render() { return ( <div className="CommentList-‐item Comment"> <Author author={this.props.author} /> <div className="Comment-‐message" dangerouslySetInnerHTML={{__html : this.props.message}}/> </div> ) } }) module.exports = Comment
1 43 var React var Author
var Comment propTypes item id message author }) }, render() { className ) } }) module propTypes : { item : React.PropTypes.shape({ id : React.PropTypes.string.isRequired, message : React.PropTypes.string, author : React.PropTypes.object }) },
1 44 var React var Author
var Comment propTypes item id message author }) }, render() { className ) } }) module <Author author={this.props.author} />
1 45 var React var Author
var Comment propTypes item id message author }) }, render() { className ) } }) module dangerouslySetInnerHTML={{__html : this.props.message}}
DOM EVENTS
1 47 <div onClick={this.methodName} /> <div onClickCapture={this.methodName} />
1 48 <div onClick={this.methodName} /> <div onClickCapture={this.methodName} /> AUTOBINDING!
PERFORMANCE
VIRTUAL DOM
<CommentList /> <Comment /> <Comment /> <Author /> <Author />
<CommentList /> <Comment /> <Comment /> <Author /> <Author />
<CommentList /> <Comment /> <Comment /> <Author /> <Author />
<CommentList /> <Comment /> <Author />
OBJECT POOLING
IMMUTABILITY
1 57 shouldComponentUpdate(nextProps, nextState) { return this.props.id !==
nextProps.id }
FRAMEWORK? BIBLIOTHÈQUE
0 225 450 675 900 ANGULAR COURBE D'APPRENTISSAGE
0 25 50 75 100 REACTJS COURBE D'APPRENTISSAGE
RÉCAP
RE-RENDER ALL THE THINGS COMPONENTS EVERYWHERE API EXPLICITE >>>> *
MERCI Matthias Le Brun lead front-end
[email protected]