Beginner's Guide to React.js
Christopher Bloom
Presentation: https://slides.com/illepic/pdxsass-intro-to-react-js
Demo: http://plnkr.co/gkHDuT
Demo (stream): http://plnkr.co/edit/?p=streamer&s=aNjEh1kRgwKGvYu6
/** @jsx React.DOM */
React.renderComponent(
<h1>React is awesome!</h1>,
document.getElementById('bloomPres')
);TL,DR
React let's us build interfaces in ways we're already thinking about.
React is about "composing" apps
- Build reusable UI widgets
- Just the "V" in MVVC
- Can be used with other frameworks (ie Angular, jQuery)
- Components!
- Crazy fast and efficient (Virtual DOM?!)
- Can be part of a more encompassing framework: Flux (Hi, Tirdad!)
Components
Small, specific pieces are composed together to form more complex systems.
ie Pattern Lab
Approach
Old: "The page is a document, jQuery-snipe the DOM."
New: Apps are made up of smaller, functional pieces
Virtual DOM: JSX
If Javascript and XML had a baby but it didn't turn out as evil as that sounds."
If a complex UI widget changes something about itself (ie a dropdown opening, quantities of products updating) instead of re-rendering the entire DOM for that markup (like jQuery and Angular do), React runs a "diffing algorithm" on only what needs updating and changes only that. Requires type="text/jsx" on script tag.
<script type="text/jsx" src="script.js"></script>Components
var WidgetOne = React.createClass({
render: function(){
return (
<h1>Hello, world!</h1>
);
}
});Now to stick it on a page:
React.renderComponent(
<WidgetOne/>,
document.getElementById('widgetOne')
);Props
var WidgetTwo = React.createClass({
render: function(){
return (
<h1>Hello, {this.props.name}!</h1>
);
}
});
React.renderComponent(
<WidgetTwo name="PDXSass" />,
document.getElementById('widgetTwo')
);In an HTML-y sort of way, pass dynamic data to components.
State
var WidgetState = React.createClass({
getInitialState: function(){
return {
count: 5
}
},
render: function(){
return (
<h1>{this.state.count}</h1>
)
}
});
React.renderComponent(
<WidgetState name="PDXSass" />,
document.getElementById('widgetState')
);State is a biggie. Using setState() we trigger data changes and re-rendering of our Component.
Events
var WidgetEvents = React.createClass({
incrementCount: function(){
this.setState({
count: this.state.count + 1
});
},
getInitialState: function(){
return {
count: 0
}
},
render: function(){
return (
<div class="event-demo">
<h3>Count: {this.state.count}</h3>
<button type="button" onClick={this.incrementCount}>Increment</button>
</div>
);
}
});
React.renderComponent(
<WidgetEvents/>,
document.getElementById('widgetEvents')
);Define a function on your component. Bind it with an onClick prop.
"Unidirectional Data Flow"?
Simple: Data flows from the SINGLE PARENT down to its child elements using "state". The various "props" on the child elements pick up this state.
..
render: function(){
return (
<div className="bigParent">
<input type="text" placeholder="Search" onChange={this.changeStuff}/>
<PeopleList people={this.state.people}/>
</div>
);
}
...
var PeopleList= React.createClass({
render: function() {
return (
<ul className="people">
{
this.props.people.map(function(person) {
return <li className="person" key={person}>{person}</li>
})
}
</ul>
)
}
});Flux?
The React.js ARCHITECTURE
https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture
React Dev Tools
View at: http://run.plnkr.co/plunks/gkHDuT/
Chrome plugin that shows data, props, state, components, and all sorts of other React goodies.
Common patterns
Show cart, carousels, product switcher, big ass grid filters
Helpful Resources
- Learning React
https://scotch.io/tutorials/learning-react-getting-started-and-concepts - How can React and Flux help us create better Angular applications?
https://medium.com/@gilbox/how-can-react-and-flux-help-us-create-better-stronger-faster-angular-applications-639247898fb - React style guide patterns I like
https://reactjsnews.com/react-style-guide-patterns-i-like/ - Huge list of React resources:
https://github.com/enaqx/awesome-react - TodoMVC in React (notice the use of Backbone)
http://todomvc.com/examples/react/#/