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
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Fireside Chat
paigeccino
37
3.5k
Side Projects
sachag
455
42k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Bash Introduction
62gerente
614
210k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Making Projects Easy
brettharned
116
6.3k
Automating Front-end Workflow
addyosmani
1370
200k
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]