React

Just about React, with examples

Transcript

1. React @arturparkhisenko 2016
2. React is a: JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES (View layer, Template) React isn’t a: REACTIVE PROGRAMMING, RxJS
3. React VS Angular ? Gangs of New York
4. 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)
5. React example html: <header> <div class="name"> Not Logged In </div> </header> javascript: $.post('/login', credentials, function( user ) { // Modify the DOM here $('header .name').text( user.name ); }); javascript: render: function() { return <header> { this.state.name ? this.state.name : <span>Not Logged In</span> } </header>; } Usual: React:
6. 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.
7. Feature: Virtual DOM https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/
8. 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.
9. JSX example var Nav; // Input (JSX): var app = <Nav color="blue" />; // Output (JS): var app = React.createElement( Nav, {color:"blue"} );
10. JSX example <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script>
11. 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.
12. Feature: 1 way Data flow Dependency hell
13. 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
14. 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). <script src="https://npmcdn.com/react@15.3.0/dist/react.min.js"></script> <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js"></script> 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 <script src="https://npmcdn.com/react@15.3.0/dist/react-with-addons.min.js"></script> <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js"></script> $ bower install --save react
15. 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';
16. Examples html: <div id="container"> <!-- This element's contents will be replaced with your component. --> </div> javascript: var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); ReactDOM.render( <Hello name="Dimka" />, document.getElementById('container') );
17. 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 ( <div className='container'> <h1>{this.state.textWelcome}</h1> </div> ) } }
18. Examples const MyComponent = React.createClass({ render: function() { return <div className={this.props.className}/>; } }); class MyComponent extends React.Component { render() { return <div className={this.props.className}/>; } } const MyComponent = props => ( <div className={props.className}/> );
19. 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
20. React hype
21. Angular2 hype https://universal.angular.io/ Server-side Rendering for Angular 2 apps Angular2 + reactNative Angular2 + NativeScript
22. 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/
23. React additional http://andrewhfarmer.com/starter-project/
24. 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
25. 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
26. 2016 https://arturparkhisenko.github.io/ Thanks!