React @arturparkhisenko 2016 

React is a: JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES (View layer, Template) React isn’t a: REACTIVE PROGRAMMING, RxJS 

React VS Angular ? Gangs of New York 

React benefits - React is all about building reusable components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy. - You can always tell how your component will render by looking at one source file (JSX) - You can render React on the server (Stack overflow is a good example of server-side rendering) - Learn Once, Write Anywhere (*isn’t perfect, but it’s a fact) 

React example html: javascript: $.post('/login', credentials, function( user ) { // Modify the DOM here $('header .name').text( user.name ); }); javascript: render: function() { return { this.state.name ? this.state.name : Not Logged In } ; } Usual: React: 

Feature: Virtual DOM React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser's displayed DOM efficiently. This allows the programmer to write code as if the entire page was rendered on each change while the React libraries only render subcomponents that actually change. 

Feature: Virtual DOM https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/ 

Feature: JSX React components are typically written in JSX (XML-like syntax), a JavaScript extension syntax that allows quoting of HTML and using HTML tag syntax to render subcomponents. HTML syntax is processed into JavaScript calls of the React library. Developers may also write in pure JavaScript. JSX is similar to another syntax extension created by Facebook for PHP, XHP. 

JSX example var Nav; // Input (JSX): var app = ; // Output (JS): var app = React.createElement( Nav, {color:"blue"} ); 

JSX example ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); 

Feature: 1 way Data flow Properties, a set of immutable values, are passed to a component's renderer like properties in its HTML tag. A component cannot directly modify any properties passed to it, but callback functions that modify values can be passed. This mechanism's promise is expressed as "properties flow down; actions flow up". For example, a shopping cart component might include multiple product line components. Rendering a product line uses only the properties passed to it and cannot affect the shopping cart's total due. However, the product line could be passed to a callback function as a property which would be called when a 'delete this product' button was pressed and that callback function could affect the total due. 

Feature: 1 way Data flow Dependency hell 

How-to Using boilerplates Official starter-kit (aka release) https://github.com/facebook/react/releases Official boilerplate, zero config (create-react-app) https://github.com/facebookincubator/create-react-app/ And others: https://github.com/enaqx/awesome-react#boilerplates 

How-to Or you can use CDN or npm with Browserify or Webpack or just use bower https://facebook.github.io/react/docs/package-management.html React 15.3.0 (production) The compressed, production version of react.js and react-dom.js (you need both). React with Add-Ons 15.3.0 (production) The compressed, production version of React with optional add-ons. https://facebook.github.io/react/docs/addons.html $ bower install --save react 

How-to About dependencies in JS: var React = require('react'); //all stuff var ReactDOM = require('react-dom'); //render // or import React, { Component } from 'react'; import { render } from 'react-dom'; 

Examples html: javascript: var Hello = React.createClass({ render: function() { return ; } }); ReactDOM.render( , document.getElementById('container') ); 

Examples https://btholt.github.io/complete-intro-to-react/ class Search extends React.Component { constructor (props) { super(props) this.state = { textWelcome: 'Dimka yo!' } } render () { return ( ) } } 

Examples const MyComponent = React.createClass({ render: function() { return

React stats Github: 46,978 stars ⭐ (6th place in top) NPM: 75,986 downloads last day 441,250 downloads last week 1,795,982 downloads last month 

React hype 

Angular2 hype https://universal.angular.io/ Server-side Rendering for Angular 2 apps Angular2 + reactNative Angular2 + NativeScript 

React additional - Use JSX, ES6, Babel, Webpack, and NPM - Use Redux (http://redux.js.org/) Redux is a predictable state container for JavaScript apps. - React Router https://css-tricks.com/learning-react-router/ https://maxfarseer.gitbooks.io/react-router-course-ru/content/ - React Native https://facebook.github.io/react-native/ https://github.com/necolas/react-native-web - Reactive programming http://cycle.js.org/ https://github.com/acdlite/redux-rx - Awesomeness https://github.com/enaqx/awesome-react - New cool HYPE terminal builded on react https://hyperterm.org/ 

React additional http://andrewhfarmer.com/starter-project/ 

Sites using React https://clashofclans.com/ https://flipboard.com/ https://ru.hexlet.io/ https://www.instagram.com/ https://meduza.io/ https://www.netflix.com/ https://www.periscope.tv/ https://www.paypal-engineering.com/2015/04/27 /isomorphic-react-apps-with-react-engine/ https://www.yahoo.com/ https://vivaldi.com/ https://www.reddit.com/ https://www.tesla.com/careers/ https://mobile.twitter.com/home https://web.whatsapp.com/ http://blog.wolfram.com/2016/01/19/announcing- wolfram-programming-lab/ https://github.com/Automattic/wp-calypso 

Urls: REACT: ● Url: https://facebook.github.io/react/ ● License https://spdx.org/licenses/BSD-3-Clause OTHER: ● http://blog.andrewray.me/reactjs-for-stupid-people/ ● https://github.com/reactjs/react-router ● https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree ● https://habrahabr.ru/post/259349/ ● http://jsraccoon.ru/react-intro ● https://camjackson.net/post/9-things-every-reactjs-beginner-should-know ● https://github.com/team-gryff/react-monocle ● http://krasimirtsonev.com/blog/article/react-js-in-design-patterns 

2016 https://arturparkhisenko.github.io/ Thanks!