Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React

Artur
August 12, 2016

 React

Just about React, with examples

Artur

August 12, 2016
Tweet

More Decks by Artur

Other Decks in Programming

Transcript

  1. React is a: JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES (View

    layer, Template) React isn’t a: REACTIVE PROGRAMMING, RxJS
  2. 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)
  3. 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:
  4. 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.
  5. 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.
  6. JSX example var Nav; // Input (JSX): var app =

    <Nav color="blue" />; // Output (JS): var app = React.createElement( Nav, {color:"blue"} );
  7. 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.
  8. 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
  9. 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/[email protected]/dist/react.min.js"></script> <script src="https://npmcdn.com/[email protected]/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/[email protected]/dist/react-with-addons.min.js"></script> <script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script> $ bower install --save react
  10. 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';
  11. 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') );
  12. 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> ) } }
  13. 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}/> );
  14. 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
  15. 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/
  16. 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
  17. 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