Development Guide

Holy cheese farts, you made it this far? Awesome!


This guide is intended to equip you with enough knowledge to code yourself into a frenzy!

OK, maybe not, but at the very least you should be able to build a component or single page app (SPA).

If you got here by accident, maybe you're looking for the Getting Started Guide?


Create A Component

There are 3 types of components you can create:


Functional Component

Create a Functional Component if your component will not need to worry about application state or events.

$ arcli component --type functional

Functional components accept a single props argument and should be very clear and concise in their make-up.

1
2
3
4
5
6
7
8
9
10
// Functional Component
export default (props) => {
    const { name } = props;

    return (
        <div>
          <h1>Hey {name}!</h1>
        </div>
    );
}

Class Component

Create a Class Component if your component will need the React Life Cycle Methods or internal state management.

$ arcli component --type class
Example Class Component:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// Class Component

import React, { Component } from 'react';

export default class Hello extends Component {
    static defaultProps = {
        name: 'Bob',
    }

    constructor(props) {
        super(props);
        this.state = { name: this.props.name };
    }

    componentDidUpdate() {
        const { name: prevName } = this.state;
        const { name: currName } = this.props;

        if (prevName !== currName) {
            this.setState({ name: currName });
        }
    }

    componentDidMount() {
        console.log("Mounted Hello Component");
    }

    render() {
        const { name } = this.state;

        return (
            <div>
                <h1>Hey {name}!</h1>
            </div>
        );
    }
}

Redux Component

Create a Redux Class Component if your component will need to interact with the application state.

$ arcli component --type class --redux

Redux Class Components work just like Class Components accept you will need to map state to properties and map dispatchers to actions via the react-redux connect() method.

See:Domain Model Guide index.js for more details.