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
92
Boxed: bringing algebraic types to TypeScript
bloodyowl
0
110
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
410
La drôle d'histoire de JavaScript
bloodyowl
0
360
Healthy Code Collaboration
bloodyowl
0
280
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
550
Featured
See All Featured
The Language of Interfaces
destraynor
160
25k
Into the Great Unknown - MozCon
thekraken
40
2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
890
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Facilitating Awesome Meetings
lara
55
6.5k
Producing Creativity
orderedlist
PRO
347
40k
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]