ReactJS Magic

Fundamentals

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

Props

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

Set and access properties in a component

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

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

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

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
git clone git@github.com:rkotze/react-lib.git
Made with Slides.com