DO YOU EVEN REACT?
MANTAS KAVECKAS / @kaveckas
What is react.js?
Not just another pretty buzzword
2007 2009 2011 2013 2015
Not just another Devs agencie
Also not a...
framework
Templating engine
Potato
...but certainly a
Concepts & principles
methodology
Set of best practises
though
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
Implements
The view part of mv*
heavily focused on
Javascript features
Small api
Component-driven development...
Declarative Components
Components
Components == Elements
Component Composition
Inbox View
Title
Task List
Item One
Item Two
Item Three
Component Composition
var items = this.props.itemsData.map((item) => {
return <Item name={item.name} />;
}
<InboxView>
<Title/>
<TaskList>
{items}
</TaskList>
</InboxView>
Components
A component is just a function that has single responsibility
A simple component
var HelloComponent = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
A simpler component / es2015
class HelloComponent extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
JSX
Jsx
XML-like syntax extension to ECMAScript
Jsx
var helloMessage = (
<div>
<h1>Hello {this.props.name}</h1>
<button>Click me!</button>
{this.props.children}
</div>
);
Jsx
Transpiles to javascript - virtual dom...
Virtual dom
Virtual dom
Dom is slow. Javascript is fast. Any argument is invalid.
Props
PROPS
immutable parameters passed down by parent components
PROPS example
class HelloComponent extends React.Component {
render() {
return (
<div>
<h1>Hello {this.props.name.toUpperCase()}</h1>
{this.props.children}
</div>
);
}
}
React.render(<HelloComponent name="John" />, document.body);
PROPs types
class HelloComponent extends React.Component {
propTypes: {
children: React.PropTypes.element.isRequired
},
render() {
return (
<div>
<h1>Hello {this.props.name.toUpperCase()}</h1>
{this.props.children}
</div>
);
}
}
React.render(<HelloComponent name="John" />, document.body);
CSS as props
class HelloComponent extends React.Component {
render() {
return (
<div>
<h1
className="Epic__Class--is-epic"
style={{"color": "#chucknorris", "position": "absolute"}}
>
Hello {this.props.name.toUpperCase()}
</h1>
</div>
);
}
}
React.render(<HelloComponent name="John" />, document.body);
Events
EVENTS
fake and gay.
synthetic events
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onTouchCancel onTouchEnd onTouchMove onTouchStart onScroll onWheel onChange onInput onSubmit onFocus onBlur onKeyDown onKeyPress onKeyUp onCopy onCut onPaste...
events example
class ButtonComponent extends React.Component {
handleClickEvent(message) {
alert(message);
},
render() {
return (
<button onClick={this.handleClickEvent.bind(this, this.props.buttonMessage)}>
{this.props.buttonMessage}
</button>
);
}
}
React.render(<ButtonComponent buttonMessage="Click me!" />, document.body);
state
State
represents the component state
State
WHEN state changes, THE COMPONENT IS RE-RENDERED
State
class ButtonComponent extends React.Component {
getInitialState() {
return {
buttonClicked: false
};
},
handleClickEvent() {
this.setState({ buttonClicked: !buttonClicked });
},
render() {
if (this.state.buttonClicked)
return null;
return (
<button>
{this.props.buttonMessage}
</div>
);
}
}
React.render(<ButtonComponent buttonMessage="Click me!" />, document.body);
TOOLS
Let the force be with you
The good
helpful error messages
top-level api
React.createClass
React.render
React.PropTypes
React.Children
React.unmountComponentAtNode
React.renderToString
React.renderToStaticMarkup
React.initializeTouchEvents
React.isValidElement
React.createElement
React.createFactory
React.DOM
With jsx
React.createClass
React.render
React.PropTypes
React.Children
React.unmountComponentAtNode
React.renderToString
React.renderToStaticMarkup
React.initializeTouchEvents
React.isValidElement
React.createElement
React.createFactory
React.DOM
common practical use
React.createClass
React.render
React.PropTypes
React.Children
React.unmountComponentAtNode React.renderToString React.renderToStaticMarkup React.initializeTouchEvents React.isValidElementReact.createElement React.createFactory React.DOM
Component requirements
class HelloComponent extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
Component specs
class HelloComponent extends React.Component {
mixins: [],
propTypes: {
name: React.PropTypes.string.isRequired
},
getDefaultProps() {
return {
name: "John"
};
},
getInitialState() {
return null;
},
render() {
return <div>Hello {this.props.name}</div>;
}
}
Component lifecycle
class HelloComponent extends React.Component {
componentWillMount() {},
componentDidMount() {},
componentWillReceiveProps(object nextProps) {},
shouldComponentUpdate(nextProps, nextState) {},
componentWillUpdate(nextProps, nextState) {},
componentDidUpdate(prevProps, prevState) {},
componentWillUnmount() {},
render() {
return <div>Hello {this.props.name}</div>;
}
}
Dom manipulation
React.render(<App />, document.body);
There's even more...
Fast, immutable, REUSABLE, ease of
debugging, easy to integrate, es2015 -
friendly, isomorphic - universal...
The bad
Or the ugly?
The hardest part of react is javascript.
This is it, folks!
MANTAS KAVECKAS / @kaveckas
Do you even React?
By Mantas Kaveckas
Do you even React?
- 1,807