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
84
Boxed: bringing algebraic types to TypeScript
bloodyowl
0
110
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
360
Healthy Code Collaboration
bloodyowl
0
270
Simplify your UI management with (algebraic data) types
bloodyowl
0
810
Simplify your UI management with (algebraic data) types
bloodyowl
1
520
Migrating a large Reason+React codebase to hooks
bloodyowl
0
550
Featured
See All Featured
KATA
mclloyd
30
14k
Agile that works and the tools we love
rasmusluckow
329
21k
Side Projects
sachag
455
42k
Into the Great Unknown - MozCon
thekraken
40
1.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Scaling GitHub
holman
460
140k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
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]