react-split-container

Folder Structure

  - build
  - config
  - node_modules
  - src
  - [reducers]
  - [constants]
  - [actions]
  - [actionCreators]
  .babelrc
  .eslintrc
  .gitignore
  .npmignore
  package.json
  README.md

Folders

• build: Module build.
• config: Module webpack config.
• src: Container sources.

Files

• .babelrc: here is defined the babel configuration about how transpile our code
• .eslintrc / .eslintignore: here are defined the eslint configuration and ignored files
• .npmignore / .gitignore: here are defined the files and foldes that we want to ignore for and npm

Development

• Component must be created in src directory (entry must be index.js).
• Keep watch for building changes.

  npm start

Working with containers

• Containers will be rendered in routes and should have not any style configuration. Instead, containers use Layouts and Components. They can be installed via npm.

  import React from "react";
  import Layout from "some-project-layout";
  import Button from "some-project-component";

  export default class MyContainer extends React.Component {
    render() {
      const MyTitle = <h1>Title</h1>;
      const BoxButton1 = <Button>Button 1</Button>;
      const BoxButton2 = <Button>Button 2</Button>;
      const BoxButton3 = <Button>Button 3</Button>;
      return Layout ? (
        <Layout
          title={MyTitle}
          box1={BoxButton1}
          box2={BoxButton2}
          box3={BoxButton3}
        />
      ) : null;
    }
  }

Test your component

• For testing your component you will need to link it to the project (Inside container folder)

  npm link

(Inside project folder)

  npm link container-name

• Remember unlink component (Inside container folder)

  npm unlink

(Inside project folder)

  npm unlink container-name

Publish your component

(Inside container folder)

  npm publish

Working with redux

To make reducers and actions accesible they must be exported

import * as reducers from 'reducers'
import * as actions from 'actions'
import * as actionCreators from 'actionCreators'
import * as constants from 'constants'

// ...

export {
  reducers,
  actions,
  actionCreators,
  constants,
}