Tweet
Tweet

Slide 1

Slide 1 text

React.js: An introduction Chan Myae San Hlaing
 Developer
 Toptal

Slide 2

Slide 2 text

What is this talk about? • Not about why React?! • But what and how

Slide 3

Slide 3 text

• A library by Facebook (now becoming an ecosystem) • Mainly for View (i.e, UI and interaction, not logic)

Slide 4

Slide 4 text

State of JS Survey Result

Slide 5

Slide 5 text

Let’s start learning img: http://www.fluentu.com/japanese/blog/wp-content/uploads/sites/6/2014/05/learning-japanese-anime2.jpg

Slide 6

Slide 6 text

Overwhelming tooling around React
 https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.w3pho0yys

Slide 7

Slide 7 text

img: http://www.litmos.com/wp-content/uploads/ 2013/04/I-want-to-learn-something.png

Slide 8

Slide 8 text

The React Way img: https://cdn-images-1.medium.com/max/800/1*pb7ijuhPjfaoCevsvzTqbQ.png

Slide 9

Slide 9 text

Components img: https://static.dezeen.com/uploads/2015/11/Arckit-competition_dezeen_936_2.jpg

Slide 10

Slide 10 text

UI = Components The whole application is just a single component which is a composition of various sub-components.

Slide 11

Slide 11 text

Components • Each component can has a set of properties. • Each component can has it’s own encapsulated state. • Encapsulated state is only concerned with the component itself. Parent components don’t need to know. • Eg. clock component’s current time

Slide 12

Slide 12 text

Inter-component Communication ParentComponent ChildComponent ChildComponent Props(data+functions) Props(data+functions)

Slide 13

Slide 13 text

One way data flow List ListItem numbers = [1,2,3] number=1 ListItem number=2 ListItem number=3

Slide 14

Slide 14 text

Container Components (Smart Components) img: http://www.bgood-container.com/wp-content/uploads/2014/02/container_blue1.jpg

Slide 15

Slide 15 text

Child Components(Dumb Components) img: https://cdn.datafloq.com/blog_pictures/Approach-Big-Data-Analytics-Like-A-Lego-Kit.jpg

Slide 16

Slide 16 text

Getting Dynamic

Slide 17

Slide 17 text

When interactions happen, React components reflect the changes by completely re-rendering themselves.

Slide 18

Slide 18 text

Benefits • Declarative UI (Your UI is a direct representation of your state, no manual wiring) • Data In - Data Out

Slide 19

Slide 19 text

Simplicity is the ultimate sophistication. 
 - Leonardo Da Vinci

Slide 20

Slide 20 text

Does it even work?

Slide 21

Slide 21 text

Virtual DOM • An abstraction between the (real) DOM and React components. • It’s a light weight version of DOM which represents a React component tree. • Whenever there is change, React components render themselves as a Virtual DOM.

Slide 22

Slide 22 text

Virtual DOM ListContainer Coffee Tea Milk ul li li li DOM VDOM

Slide 23

Slide 23 text

Virtual DOM ListContainer Coffee Tea VDOM ListContainer Coffee Tea VDOM Water Milk

Slide 24

Slide 24 text

Virtual DOM ul li li DOM Water Diff li

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Why is Virtual DOM so fast? • Lightweight • Highly optimised diff algorithm • Batching Updates

Slide 27

Slide 27 text

Virtual DOM rendering

Slide 28

Slide 28 text

https://www.youtube.com/watch? v=-DX3vJiqxm4 Pete Hunt

Slide 29

Slide 29 text

Summary • Composition of components • Declarative Rendering • One way data flow • Complete re-rendering on Updates (Virtual DOM approach)

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

var HelloWorld = React.createClass({ render: function() { return

Hello World!!

; } }); ReactDOM.render( , document.getElementByTagName('body') ); Hello World

Slide 32

Slide 32 text

JSX • A speical syntax for react (imitated from HTML, not actual HTML) • `

Hello World!

` is transformed into `React.createElement( "h1", null, ” Hello World ");` • Why? Because HTML syntax is familiar and easy to read when nested. • Of course, you can choose not to use JSX. Up to you!

Slide 33

Slide 33 text

var InvoiceTable = React.createClass({ render: function() { return ( Name Price Beef 2500 Ks Pork 2000 Ks ); } }); React.createElement( "table", null, React.createElement( "thead", null, React.createElement( "tr", null, React.createElement( "th", null, " Name " ), React.createElement( "th", null, " Price " ) ) ), React.createElement( "tbody", null, React.createElement( "tr", null, React.createElement( "td", null, "Beef" ), React.createElement( "td", null, "2500 Ks" ) ), React.createElement( "tr", null, React.createElement( "td", null, "Pork" ), React.createElement( "td", null, "2000 Ks" ) ) ) ); JSX vs Standard JS Objects

Slide 34

Slide 34 text

Built-in Components • React gives you built-in components which generate normal html components. • `

` is a built-in component. In fact, you can use any valid html tag as a built-in component.

Slide 35

Slide 35 text

Custom Components • Your application components are built as custom component using built-in components. • Re-use them as if they were built-in components.

Slide 36

Slide 36 text

// Using react-bootstrap component libraries // from https://react-bootstrap.github.io/components.html#jumbotron var HeroUnit = React.createClass({ render: function() { return (

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

); } }); ReactDOM.render( , document.getElementByTagName('body') );

Slide 37

Slide 37 text

var HeroUnit = React.createClass({ render: function() { return (

{ this.props.heading }

{ this.props.description }

Learn more

); } }); var propsDescription = "You can use props to pass any information down the component hierarchy. You can use any js types as props." ReactDOM.render( , document.getElementByTagName('body') ); Props in Action

Slide 38

Slide 38 text

var HeroUnit = React.createClass({ render: function() { return (

{ this.props.heading }

{ this.props.description }

Learn more

); } }); HeroUnit.propTypes = { heading: React.PropTypes.string, description: React.PropTypes.string }; var propsDescription = "You can use props to pass any information down the component hierarchy. You can use any js types as props." ReactDOM.render( , document.getElementByTagName('body') ); Defining PropTypes

Slide 39

Slide 39 text

Every component is defined in Javascript. • Remember!? JSX is just javascript and we used JS expression for props. • So, you can use any javascript code to manipulate components. • This means: variables, loops, conditionals, functions can be used inside render function.

Slide 40

Slide 40 text

var InvoiceTable = React.createClass({ render: function() { return ( { items.map(function(item){ return ( ); }) } Name Price {item.name} {item.price} ); } }); InvoiceTable.propTypes = { items: React.PropTypes.array } var items = [ { name: "Beef", price: 3000 }, { name: "Pork", price: 2000 } ] ReactDOM.render(, document.getElementById('app')); Loops

Slide 41

Slide 41 text

var Profile = React.createClass({ render: function () { var isLoggedIn = this.props.isLoggedIn; var button = null; if (isLoggedIn) { button = ; } else { button = ; } return (
{button}
); } }); ReactDOM.render( , document.getElementById('app') ); Conditionals

Slide 42

Slide 42 text

States img: http://gameprogrammingpatterns.com/images/state-flowchart.png

Slide 43

Slide 43 text

Components can have their own internal states. • Props are passed from parents. States are managed by the component itself. • State should not be concerned with external data. It should only be concerned with the component itself and nothing else. • Changing state causes re-rendering of the component. • State is created by defining getInitialState() and changed by using `this.setState()` within component.

Slide 44

Slide 44 text

var Counter = React.createClass({ getInitialState: function() { return { count: 0 } }, render: function() { return (

{ this.state.count }

); } }); ReactDOM.render( , document.getElementById('app') );

Slide 45

Slide 45 text

Props Vs State • Props: data passed into the component or defaulted. Immutable from the component's perspective. • State: data that changes with user input, time, or server responses. State is mutable via this.setState. • Try to keep components stateless by using props whenever possible. • Push state to the top and pass state to child components as props. http://ad2games.github.io/presentations/reactjs.html#15

Slide 46

Slide 46 text

Events img: http://culttt.com/wp-content/uploads/2012/11/jQuery-Mouse-Events.jpg

Slide 47

Slide 47 text

Synthetic Event System • In react, DOM events are abstracted as a single event system by React, namely Synthetic Event System. • React defines a list of events on its own which wraps on top of DOM events. • Only Built-in components can listen to Synthetic Events.

Slide 48

Slide 48 text

var ClickMe = React.createClass({ getInitialState: function() { return { clickedCount: 0 }; }, handleClick: function() { //Event handler for click event this.setState({clickedCount: this.state.clickedCount + 1}) console.log("Clicked!", this.state.clickedCount); }, render: function() { return (
Click me

You clicked me { this.state.clickedCount } times

); } }); State and Event Working Together

Slide 49

Slide 49 text

How to listen event on Custom Components?? • Accept a prop for event handler • Attach it to the underlying built-in component • Parent components can control child components behaviour that way.

Slide 50

Slide 50 text

var CatList = React.createClass({ getInitialState: function() { return {cats: [{id: 1, name: “Garfield”}, {id: 2, name: “Ji Ji”}], currentCat: 0}; }, _onClick: function(index) { console.log("Clicked on", index); this.setState({currentCat: index}); }, render: function() { return (
    { this.state.cats.map( function(cat, index) { return ( ); }.bind(this)) }
); } }); var CatListItem = React.createClass({ render: function() { return (
  • {this.props.cat.name}
    • ); } }); Event Handling on Custom Components

    Slide 51

    Slide 51 text

    var NameForm = React.createClass({ getInitialState: function() { return {value: ‘’}; }, handleChange: function (event) { this.setState({value: event.target.value}); }, handleSubmit: function (event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); }, render: function () { return ( Name: ); } }); Working with forms and inputs

    Slide 52

    Slide 52 text

    Interaction with Server img: http://sv2109.com/sites/default/files/field/image/8a5da52ed126447d359e70c05721a8aa.png

    Slide 53

    Slide 53 text

    Plug anything img: http://core0.staticworld.net/images/article/2013/05/belkin_thunderbolt_dock_02-100035345-orig.jpg

    Slide 54

    Slide 54 text

    Current Trends • Flux • Redux • Mobx

    Slide 55

    Slide 55 text

    Simple Ajax Requests • Data is managed as the state of container components. • Ajax calls are made within component lifecycle hooks.

    Slide 56

    Slide 56 text

    Lifecycle Hooks • Hook methods to override • Each method is invoked at each stage of react component lifecycle from virtual DOM creation/ update/destruction to actual rendering to the real DOM creation/update/destruction. • Convenient helpers for leaky abstraction

    Slide 57

    Slide 57 text

    Component Lifecycle

    Slide 58

    Slide 58 text

    var App = React.createClass({ getInitialState: function() { return { collection: [], currentIndex: 0 }; }, componentDidMount() { $.get(‘https://someapi.com‘).done(function(data) { this.setState({collection: data.items}); }.bind(this)); }, handleItemClick: function(index, e) { this.setState({currentCatIndex: index}); }, render: function() { var content = null; if (this.state.collection.length > 0) { content =
    ; } else { content = ; } return content; } }); External Ajax calls within lifecycle hook

    Slide 59

    Slide 59 text

    Leaky Abstractions • Working inside the react flow is wonderful. • But real world is harsh. There will always be time you need to dig under the floor. • Lifecycle hooks are there to help you with that.

    Slide 60

    Slide 60 text

    Let’s get real • A build system (Webpack) • ES6 transpiler (Babel) • A client-side router (react-router) • State Management (Redux) You are gonna need:

    Slide 61

    Slide 61 text

    Learn More img: http://image.slidesharecdn.com/2015-150409045423-conversion-gate01/95/react-tech-salon-42-638.jpg? cb=1428560032

    Slide 62

    Slide 62 text

    Learn More img: http://image.slidesharecdn.com/2015-150409045423-conversion-gate01/95/react-tech-salon-42-638.jpg? cb=1428560032 An overview of react ecosystem - Rami Sayar (https:// www.youtube.com/watch?v=8yTb3J6_Hak) A collection of react resources 
 ( https://github.com/enaqx/awesome-react )

    Slide 63

    Slide 63 text

    Thank You