khaos-react-component

Boilerplate template for developing React components.

Installation

This module is a khaos template. If you don't have khaos installed yet, first install it globally with:

npm install -g khaos

Now create a new component module <mycomponent> based on this template with:

khaos create mongodb-js/khaos-react-component ./<mycomponent>

You are prompted to fill out some template variables:

• name: short name of the component, e.g. button-row, or view-switcher (do not use spaces!)
• description: a one sentence description of the component.

Once the component module is created, install the dependencies with:

cd <mycomponent>
npm install

You're now ready to implement your React component.

Features

Storybook

Develop and prototype your component with react-storybook in a standalone browser view, with linked stories and hot reloading.

To run storybook mode, type npm run storybook, then open http://localhost:9001 in a browser. You can now edit the source code and hit save, and changes will immediately show in the browser, while maintaining the state of the component(s).

Electron

Validate and test your component in an Electron window, styles included. The source automatically compiles and the window content reloads when any file under ./src changes.

To start Electron and render your component, type npm start.

If you edit the source code and hit save, the source will rebuild and the window reload automatically. State is not maintained throughout reloads (to maintain application state, use storybook instead).

Enzyme

The test environment is configured to test components with Enzyme (including full mount mode through jsdom) and enzyme-chai. See the test folder for examples. Run npm test to execute the test suite.

Developing

Almost all of your development will happen in the ./src directory.

Directory Structure

For completeness, below is a list of directories present in this module:

• .storybook react-storybook and webpack configuration. You usually don't need to touch this.
• electron code to start electron, open a browser window and load the source. You don't usually need to touch this, unless you want to render something other than the main component in Electron.
• lib compiled version of your components (plain javascript instead of jsx) and styles (css instead of less). Never change anything here as this entire folder gets automatically created and overwritten.
• src source code of your component(s), as well as style files. This is the place to implement your own components. npm run compile will use ./src as input and create ./lib.
• stories stories for react-storybook. You can add as many story files as you like, they are automatically added to storybook.
• test implement your tests here, and name the files *.test.js.

License

Apache 2.0