How to ReactJS

By: Richard Kotze

Have you downloaded the repo? :D

The plan

• How to ReactJS
• Challenge
• Mini Retro

Basics

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

//render component to the page
React.render(
    <Hello />,
    document.body
);

Hello component using JSX

Props

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

React.render(
    <Hello word="React" />,
    document.body
);

Access properties in component

Specs

var Hello = React.createClass({
    getInitialState : function(){ //default state
        return {
            first: 'Hello'
        };
    },
    getDefaultProps : function(){ //default props
        return {
            word: 'World';
        };
    },
    render: function(){
        return (
            <h1>{this.state.first}, {this.props.word}!</h1>
        );
    }
});

State and Props

Life cycle methods

var Hello = React.createClass({
    componentWillMount: function(){
        // Before component renders
    },
    componentDidMount: function(){
        // After component renders. AJAX calls.
    },
    componentWillunmount: function(){
        // Before component is removed from page. 
        // Use to clean up.
    },
    render: function(){
        return (
            <h1>Hello, world!</h1>
        );
    }
});

Different stages of component rendering

Set State

var Hello = React.createClass({
    componentDidMount: function(){
        ajax('url').success(function(data){
            this.setState({
                first: data.first
            });
        }.bind(this));
    },
    render: function(){
        return (
            <h1>{this.state.first}, world!</h1>
        );
    }
});

Set state to rerender

Your methods

var Hello = React.createClass({
    myMethod: function(){
        // TODO: Implement me :D
    },
    render: function(){
        var outputStuff = this.myMethod();
        return (
            <h1>{this.state.first}, {outputStuff}!</h1>
        );
    }
});

You can add your own methods into the react class.

Events

var Hello = React.createClass({
    myHandler: function(){
        this.setState({
            first: 'Clicked'
        });
    },
    render: function(){
        return (
            <div>
                <h1>{this.state.first}, world!</h1>
                <button onClick={this.myHandler}>Click me</button>
            </div>
        );
    }
});

Create a event handler and bind to event.

Nesting

import ComponentX from './component-x'; //ES6
var Hello = React.createClass({
    render: function(){
        return (
            <div>
                <h1>{this.state.first}, world!</h1>
                <ComponentX />
            </div>
        );
    }
});

Add the React class in the JSX

Enforced convention of first letter capital

Modules

import ComponentX from './component-x'; //ES6
var Hello = React.createClass({
    render: function(){
        return (
            <div>
                <h1>{this.state.first}, world!</h1>
                <ComponentX />
            </div>
        );
    }
});

export default Hello; //ES6

Make React class a module and export

ES6

class Hello {
    constructor(){
    }

    myMethod(){
    }
}
export default Hello; //ES6

let myObject = {
    methodA(){

    },
    methodB(){

    }
};
export default myObject;

Unit Testing

import someFunction from './someFunction';
describe('Describe the tests group', () => {
    before(() => { //setup hook before tests run
    });
    after(() => { //clean up after tests run
    });
    it('explain the test case', () => {
        someFunction().should.equal(x);
    });
});

MochaJS testing framework

Using the ShouldJS library to assert

The challenge

Basic hints UI

Birth and death year display feature

<AncestorHints />

<Ancestor />

<HintBox />

<HintBox />

1900 - 1989

Born 1895

Died 1995

The challenge

Basic hints UI

Start with birth-year.spec.js

I've created unit tests with file extensions spec.js 

Each of the components have a spec.js file

All the components are in the "components" folder