veams-bp-react-container

Veams Blueprint - React Container

With this blueprint you can scaffold a react container component with multiple options:

1. Which methods should be added? (componentWillMount(), componentDidMount(), componentWillReceiveProps())
2. Do you want to check your prop types?
3. Do you want to add a static loadData() function? (SSR)

Setup

1. First of all be sure you have installed veams-cli.
2. After that be sure your project contains a veams-cli.json.
3. Make sure you have updated veams-cli.json to fit the needs of your project.
4. Install the package with npm i veams-bp-react-container --save-dev.
5. Reference the package in veams-cli.json by adding container to the blueprint object like so:

{
    "blueprints": {
        "container": {
            "skipImports": true,
            "prompts": "node_modules/veams-bp-react-container/prompts",
            "templates": "node_modules/veams-bp-react-container/templates"
        }
    }
}

Usage

Now you can use this blueprint with veams by executing:

veams add container modules/articles/containers/article

The output in your file system will be:

└── articles
    └── containers
        └── article
            └── article.js

The blueprint content looks like that (depends on your answers):

// Generic libraries
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { boolean } from 'prop-types';
 
// Containers, Components, Store & More
import * as fromData from '../../store/article.actions';
 
/**
 * Get slice out of current state by using selector functions.
 *
 * @param {object} state - Current state of the whole store.
 */
function mapStateToProps(state) {
    return {
        // isInitialized: getUiInitializedState(state)
    }
}
 
/**
 * @class
 * @classdesc Container component to render a view and
 * decorate that with the selected store slice.
 */
@connect(mapStateToProps)
class Article extends Component {
    /**
     * Internal state of component.
     */
    state = {
        // isInitialized: this.props.isInitialized
    };
 
    /**
     * Static property check.
     */
    static propTypes = {
        // isInitialized: boolean.isRequired
    };
 
    /**
     * Load the data by using a separate function.
     * This method can later be used on server side to get an initial state as well.
     *
     * @param {Object} store - store singleton.
     */
    static loadData(store) {
        return store.dispatch(fromData.fetchArticle());
    }
 
    /**
     * Lifecycle hook before component is mounted.
     */
    componentWillMount() {}
 
    /**
     * Lifecycle hook after component is mounted.
     */
    componentDidMount() {}
 
    /**
     * Get new props and set a new state
     * if necessary.
     *
     * @param {Object} nextProps - updated property objects.
     */
    componentWillReceiveProps(nextProps) {}
 
    /**
     * Render component
     */
    render() {
        return (
            <div>
                <p>Article is working!</p>
            </div>
        );
    }
}
 
export default Article;

Have fun!