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
570
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
100
Boxed: bringing algebraic types to TypeScript
bloodyowl
0
120
leveraging (algebraic data) types to make your UI rock @ jsheroes
bloodyowl
0
290
Leveraging (algebraic data) types to make your UI rock solid
bloodyowl
0
420
La drôle d'histoire de JavaScript
bloodyowl
0
360
Healthy Code Collaboration
bloodyowl
0
290
Simplify your UI management with (algebraic data) types
bloodyowl
0
810
Simplify your UI management with (algebraic data) types
bloodyowl
1
530
Migrating a large Reason+React codebase to hooks
bloodyowl
0
560
Featured
See All Featured
Writing Fast Ruby
sferik
629
62k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Mobile First: as difficult as doing things right
swwweet
224
10k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Scaling GitHub
holman
463
140k
Agile that works and the tools we love
rasmusluckow
331
21k
Balancing Empowerment & Direction
lara
4
680
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
What's in a price? How to price your products and services
michaelherold
246
12k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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]