React Tutorial Giuseppe Attardi Università di Pisa

What is React React is a JavaScript library for creating user interfaces React is a JavaScript library for creating user interfaces Simple Simple –React automatically manages all UI updates when underlying data changes Components Components –React reusable components facilitate code reuse, testing, and separation of concerns

Design Features React is not a MVC framework React is not a MVC framework No templates No templates –UI is made of components –React uses a real, full featured programming language to render views Virtual DOM Virtual DOM –lightweight description of the DOM

No MVC, just V In traditional MVC different parts of the UI talk via events, with a controller receiving all the user inputs, manipulating the models if needed and then calling the views and telling them to re-render if necessary. In traditional MVC different parts of the UI talk via events, with a controller receiving all the user inputs, manipulating the models if needed and then calling the views and telling them to re-render if necessary. In React, when a user interaction occurs, everything is re-rendered In React, when a user interaction occurs, everything is re-rendered Separation between code and presentation vanishes (again …) Separation between code and presentation vanishes (again …) Components are single units, they can be instantiated and moved without having to reconnect them to handlers (e.g. in jQuery.readyFunction) Components are single units, they can be instantiated and moved without having to reconnect them to handlers (e.g. in jQuery.readyFunction)

Virtual DOM Pure JS lightweight description of the DOM Pure JS lightweight description of the DOM Components keep a state, avoiding storing the state in the DOM Components keep a state, avoiding storing the state in the DOM Incremental updates Incremental updates –The data returned from render is neither a string nor a DOM node -- it's a virtual DOM representing what the DOM should be –reconciliationreconciliation

Incremental update implementation When a component is first initialized, the render method is called, generating a lightweight representation of the view When a component is first initialized, the render method is called, generating a lightweight representation of the view From that representation, a string of markup is produced, and injected into the document From that representation, a string of markup is produced, and injected into the document When data changes, the render method is called again When data changes, the render method is called again In order to perform updates efficiently, the React engine diff the return value from the previous call to render with the new one, and generates a minimal set of changes to be applied to the DOM In order to perform updates efficiently, the React engine diff the return value from the previous call to render with the new one, and generates a minimal set of changes to be applied to the DOM

React React JSFiddle React JSFiddle React JSFiddle React JSFiddle React Tutorial React Tutorial React Tutorial React Tutorial

JSX Children Text ; Children Text ; React.createElement("div", { className: "red" }, "Children Text"); JSX is a JavaScript syntax extension that looks similar to XML ; ; React.createElement(MyCounter, { count: }); className not class, reserved word in JS

JSX var scores = { player1: 2, player2: 5 }; Scores Scores </Dashboard>; React.createElement(Dashboard, { "data-index": "2" }, { "data-index": "2" }, React.createElement("h1", null, "Scores"), React.createElement("h1", null, "Scores"), React.createElement(Scoreboard, { React.createElement(Scoreboard, { className: "results", scores: scores }) className: "results", scores: scores }));

Transform Test JSX transofrmation to JavaScript at Babel REPL Test JSX transofrmation to JavaScript at Babel REPLBabel REPLBabel REPL

Components var MessageComponent = React.createClass({ render: function() { render: function() { return {this.props.message} ; return {this.props.message} ; }});ReactDOM.render(,, document.body document.body); They must implement the function render

Props When a component is rendered, it can access its attributes using this.props. When a component is rendered, it can access its attributes using this.props. {this.props.message} ; {this.props.message} ;

Excercise var VacancySign = null; ReactDOM.render( Replace me, Replace me, document.getElementById('container') document.getElementById('container')); The component VacancySign should render a div with either the text "Vacancy" or "No Vacancy" depending on the prop hasVacancy. View Solution

Events var BannerAd = React.createClass({ onBannerClick: function(evt) { onBannerClick: function(evt) { // codez to make the moneys // codez to make the moneys }, }, render: function() { render: function() { // Render the div with an onClick prop (value is a function) // Render the div with an onClick prop (value is a function) return Click Me! ; return Click Me! ; }});

Exercise var ChildComponent = React.createClass({ render: function() { render: function() { return return Do Magic // invoke performMagic in parent Do Magic // invoke performMagic in parent ; } ; }}); var ParentComponent = React.createClass({ performMagic: function() { alert('TAADAH!'); }, performMagic: function() { alert('TAADAH!'); }, render: function() { return ; } render: function() { return ; }}); ReactDOM.render(, document.getElementById('container') document.getElementById('container')); View Solution

State A state is internal and controlled by the component itself while props are external and controlled by whatever renders the component. See example. example

Like Button var LikeButton = React.createClass({ getInitialState: function() { return { liked: false }; }, getInitialState: function() { return { liked: false }; }, handleClick: function(event) { this.setState({liked: !this.state.liked}); }, handleClick: function(event) { this.setState({liked: !this.state.liked}); }, render: function() { render: function() { var text = this.state.liked ? 'like' : ‘might like'; var text = this.state.liked ? 'like' : ‘might like'; return ( return ( You {text} this. Click to toggle. You {text} this. Click to toggle. ); ); }});ReactDOM.render(,, document.getElementById('example') document.getElementById('example'));

API getInitialState: function() getInitialState: function() –returns dictionary this.state this.state this.setState this.setState –merges key/values into state

Conclusions React JS unifies behavior and representation in single units called components React JS unifies behavior and representation in single units called components Code generation in JSX is exploited to provide a DSL for expressing elements of the UI Code generation in JSX is exploited to provide a DSL for expressing elements of the UI Pure JavaScript solution, without templating engine Pure JavaScript solution, without templating engine Programmer is in full control of the UI Programmer is in full control of the UI Components will eventually become part of browser capabilities Components will eventually become part of browser capabilities