HOWTO: Add a react component

Development
1

Hello,
Here’s a quick guide, how to add a react component to foreman

Component Folder Structure

Create a folder under /webpack/assets/javascripts/react_app/components/
with the following structure (filenames should be upper CamelCase):

webpack/assets/javascripts/react_app/components/<Compoment-name>
├── <Compoment-name>Actions.js
├── <Compoment-name>Reducer.js
├── <Compoment-name>.fixtures.js 
├── <Compoment-name>.scss.js // if needed
├── <Compoment-name>.js
├── index.js // the redux connected file 
└── __tests__
    ├── <Compoment-name>Actions.test.js
    ├── <Compoment-name>Reducer.test.js
    ├── <Compoment-name>.test.js
    ├── integration.test.js
    └── __snapshots__
        ├── All snapshot files (created automatlicy by `npm test -- -u`)

Register

in /webpack/assets/javascripts/react_app/components/componentRegistry.js file
Import the new component:

import <Component-Name> from '<component-path>';

under coreComponets array, add this item:

  { name: '<Compoment-registered-name>', type: <component-name> },

Mount

Create a mounter in a specific erb.html file

<%= mount_react_component(`<Compoment-registered-name>`, `<elemnt id which wrapps the component>`, <component data>.to_json) %>

where the component data goes to component’s props as data prop (this.props.data)

1 Like
2

thanks for the info, two questions:

  1. where should you put storybook entries?
  2. can you link an example to code in foreman repository?
3
  1. storybook entries should be in the main component folder: <Compoment-name>.stories.js
  2. an example for this you can find on the new BreadcrumbsBar component:
    a storybook file for BreadcrumbsBar has just added in this PR
4

maybe edit the original post to include it?

5

We have a handbook and I’m wondering if we should link here or include it there.

6

I think that you can only edit couple of minutes after publish a post.

7

+1 for including it there

8

I’m wondering if we need a HOWTO category where all posts are wiki entries by default … ? (also see my musings on Libvirt with TLS …). Could be too many categories though?

9

It would be great to have a place for more practical how-to’s for Developers and Users.

1 Like