ReactJS Magic

By: @richardkotze

Fundamentals

slides.com/rkotze/react-magic/

The plan

• Learn fundamentals of ReactJS
• Ask questions as we go
• Lunch
• Challenge Photo Slider

Things I'm covering

• Basics of ReactJS
• Basics of ES6
• Build and use components
• Workshop: Similar to style guide project

Stuff I'm not covering

• ReactJS in depth
• Testing
• Redux (flux) - unidirectional data flow

Why ReactJS

• Simple and focused on the view
• Composable components
• Promotes reuse
• JSX - markup in JS
  Not loaded HTML template

Define a component

import React, { Component } from 'react';

class Hello extends Component {
  render() { // Required
    return (
      <div>Hello World!</div> //JSX
    );
  }
}

• ES6/New way
• Render must have a wrapping element
• Note: brackets in return

// JSX converted
React.createElement('div', null, 'Hello world!');

Define a component

var React = require('react');

var Hello = React.createClass({
    render: function(){ // Required
        return (
            <h1>Hello, world!</h1>
        );
    }
});

Classic/old way

Render

// ES6
import { render } from 'react-dom';

// render component to the page
render(<Hello />, 
document.getElementById('element-id'));

Render belongs to 'react-dom' module

JS Bin example

Props

class Hello extends Component {
    render() {
        return (
            <h1>Hello, {this.props.word}!</h1>
        );
    }
};

return (
    <Hello word="React" />
)

Set and access properties in a component

JS Bin example

Default Props

class Hello extends Component {
    render() {
        return (
            <h1>Hello, {this.props.message}!</h1>
        );
    }
};

Hello.defaultProps = {
    message: "World"
};

ClassName

class Hello extends Component {
    render() {
        return (
            <h1 className="add-class-name-here">
                Hello, {this.props.word}!
            </h1>
        );
    }
};

HTML class attr = JSX className attr

State

class Hello extends Component {
  constructor(){
     super();
     this.state = {
	message: "world!"
     }
  }
  
  render() {
    return (
      <div>
        Hello {this.state.message}
      </div>
    );
  }
}

Initial state set in constructor

JS Bin example

Set State

class Hello extends Component {
  componentDidMount() {
     this.setState({
        message: "Mobile"
     });
  }

  render() {
    return (
      <div>
        Hello {this.state.message}
      </div>
    );
  }
}

• Change the state and component is rerendered
• State does merge

Stateless component

// ES6 function
const ActionBox = (props) => (
  <div>
    <p>Are you sure?</p>
    <button data-action-id={props.actionId}>
        {props.children}
    </button>
  </div>
);

• Functional style
• Component has no state

JS Bin example

Show: Destructing props - like pattern matching

Life cycle methods

class Hello extends Component {
  componentWillMount() {
    // run before mount
  }

  componentDidMount() {
    // run after mount
  }

  componentWillUnmount() {
    // run just before unmount
  }
  render() {
    return (
      <div>Hello world</div>
    );
  }
}

Different stages of component rendering

JS Bin example

Events and methods

handleClickMe = () => { // fat arrow function
    this.setState({
      message: 'I was clicked'
    });
}

render() {
    return <button onClick={this.handleClickMe}>Click me</button>;
}

• Kind of classical JS event style
• Not restricted to just React methods
• Define custom methods in class
• No 'this' autobind in ES6

JS Bin example

Composing 

import MobileApp, { HintsByLocation } from 'mobile-app';

render() {
    return (
        <div>
            <MobileApp>
                <HintsByLocation />
            </MobileApp>
        </div>
    );
}

• Import your components
• Put them together in the render method
• Enforced convention of first letter capital

Modules

import ComponentX from './component-x'; //ES6

class HelloComponent ...

export default HelloComponent; //ES6

primeNumbers = () => ...

export { ComponentX, primeNumbers } // list of items to export

Import to get a module

Export default - only one per module

Export objects

The challenge

Photo Slider

Basic components

<PhotoSlider />

<Image />

<Button.L />

<Button.R />

The challenge

Photo slider component

1. Create and develop in React Lib
2. Have a default photo
3. Have buttons to change photo
4. Don't allow user to click button when no more photos to show

https://github.com/rkotze/react-lib

git clone git@github.com:rkotze/react-lib.git

http://lorempixel.com/