Presentation from the 2nd STX Next Summit 2016 by Radosław Jankiewicz presenting an overview of ReactJS - a great javascript library for building user interfaces. https://stxnext.com

1. TIME TO REACT!TIME TO REACT!
Radosław Jankiewicz / /@radek_j radekj

2. WHO AM IWHO AM I
Programming since 2007
Web applications
Python (mostly)

3. AGENDAAGENDA
What is React?1.
How do you use it?2.
Why should you give it a chance?3.
Are there any weaknesses of React?4.

4. WHAT IS REACT?WHAT IS REACT?

5. A JAVASCRIPT LIBRARY FORA JAVASCRIPT LIBRARY FOR
BUILDING USER INTERFACESBUILDING USER INTERFACES

6. 1ST PUBLIC RELEASE - MAY 20131ST PUBLIC RELEASE - MAY 2013

7. JUST THE UIJUST THE UI
Lots of people use React as the V in MVC.
Since React makes no assumptions about
the rest of your technology stack, it's easy
to try it out on a small feature in an existing
project.
https://facebook.github.io/react/

8. VIRTUAL DOMVIRTUAL DOM
React abstracts away the DOM from you,
giving a simpler programming model and
better performance.
https://facebook.github.io/react/

9. DATA FLOWDATA FLOW
React implements one-way reactive data
flow which reduces boilerplate and is easier
to reason about than traditional data
binding.
https://facebook.github.io/react/

10. HOW DO YOU USE REACT?HOW DO YOU USE REACT?

11. COMPONENTSCOMPONENTS
var SimpleComponent = React.createClass({
render: function() {
return (
<div>
It is time to react {this.props.today.toTimeString()} !!!
</div>
);
}
});
ReactDOM.render(
<SimpleComponent today={new Date()}/>,
document.getElementById('example')
);
It is time to react 20:24:59 GMT+0100 (CET) !!!

12. JSXJSX
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
render: function() {
return (
<div id="transform">transform text</div>
);
}
render: function() {
return (
React.DOM.div({id: "transform"}, "transform text")
);
}

13. NESTED COMPONENTSNESTED COMPONENTS
var books = [
{author:'John Smith', title:'Lorem Ipsum'},
{author:'Jane Doe', title:'Dolor sit amet'}
];
var ListOfBooks = React.createClass({
render: function() {
return (
<ul>
{this.props.books.map(function(book, index) {
return <Book key={index} bookItem={book} />;
})}
</ul>
);
}
});
var Book = React.createClass({
render: function() {
var bookItem = this.props.bookItem;
return <li>{bookItem.title} - {bookItem.author}</li>
}
});

14. NESTED COMPONENTSNESTED COMPONENTS
<ul data-reactid=".0">
<li data-reactid=".0.$0">John Smith - Lorem Ipsum</li>
<li data-reactid=".0.$1">Jane Doe - Dolor sit amet</li>
</ul>

15. COMPONENT STATECOMPONENT STATE
var Counter = React.createClass({
getInitialState: function() {
return {count: 1};
},
handleClick: function() {
this.setState({count: this.state.count + 1});
},
render: function() {
return (
<input type="button"
onClick={this.handleClick}
value={this.state.count} />
)
}
});
1

16. VIRTUAL DOMVIRTUAL DOM

17. REACT APIREACT API
COMPONENT SPECIFICATIONSCOMPONENT SPECIFICATIONS
render
getInitialState
getDefaultProps
setState

18. REACT APIREACT API
LIFECYCLE METHODSLIFECYCLE METHODS
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount

19. LIFECYCLE METHODSLIFECYCLE METHODS
componentWillReceiveProps: function(nextProps) {
this.setState({
// set something
});
}
shouldComponentUpdate: function(nextProps, nextState){
// return a boolean value
return false;
}

20. FLUXFLUX
MVC model might be too complex
https://facebook.github.io/flux

21. FLUXFLUX
Unidirectional data flow
https://facebook.github.io/flux

22. WHY SHOULD YOU GIVE IT AWHY SHOULD YOU GIVE IT A
CHANCE?CHANCE?

23. BECAUSE IT'S ...BECAUSE IT'S ...
Fast
Simple to learn and easy to use
Clean and consice
Integrates easily with other solutions

24. ARE THERE ANY CONS OF REACT?ARE THERE ANY CONS OF REACT?
HTML templates in js files
May be initially hard to switch to for jQuery people

25. QUESTIONS TIMEQUESTIONS TIME

26. SOURCESSOURCES
https://facebook.github.io/react
https://facebook.github.io/flux