Create React component

You can add or create any React component to the project manually. You should place the source code of the component into the src/usr (learn more in Source code structure) directory then Webcodesk automatically parses the source code of the component, and if its syntax is recognizable, the component will be available in the project's workspace.

If you want to use third-party components in the project from the npm module, you should wrap components with the source code manually.

There are a few rules to declare components in the code by which Webcodesk recognizes them as the React components and adds to the available components list.

• A functional component with the name equal to the file name, and with the default export in the file (thus, one file - one component)
• A class declaration with the name equal to the file name, and with the default export (one file - one component)
• Add properties with PropTypes.element type to the component declaration if you want to combine components in the page editor.
• Declare output properties (events) with PropTypes.func type.
• Finally, add properties with any other PropTypes to make a component with inputs on the diagram.

Examples

A component with the event property:

import React from 'react';
import PropTypes from 'prop-types';
/*
  Input form for the user name
 */
class Form extends React.Component {
  static propTypes = {
    // send the entered name
    onClick: PropTypes.func,
  };
  static defaultProps = {
    onClick: () => {
      // is not set
    },
  };
  handleClick = (e) => {
    if (e) {
      e.stopPropagation();
      e.preventDefault();
    }
    this.props.onClick(this.inputElement.value);
  };
  render () {
    return (
      <form onSubmit={this.handleClick}>
        <div style={rootStyle}>
          <div style={{ margin: '1em 0 1em 0' }}>
            <input
              ref={me => this.inputElement = me}
              type="text"
              placeholder="Enter your name"
              style={inputStyle}
            />
          </div>
          <div>
            <button
              type="submit"
              onClick={this.handleClick}
              style={buttonStyle}
            >
              Click
            </button>
          </div>
        </div>
      </form>
    );
  }
}
export default Form;

Please find onClick property in the class. This property is used as the output of the Form component on the flow diagram.

If you want to declare component with the property that receives data (aka input property), take a look at the next example.

import React from 'react';
import PropTypes from 'prop-types';
/*
  Panel with title
 */
class TitlePanel extends React.Component {
  static propTypes = {
    // simple title text
    title: PropTypes.string,
  };
  render () {
    const { title } = this.props;
    return (
      <h1 style={{ textAlign: 'center' }}>
        {title || 'Empty Title'}
      </h1>
    );
  }
}
export default TitlePanel;

Where title property is considered by Webcodesk as an input property in flow.

Scaffolding components

If you feel that writing the first file structure is a bit boring, Webcodesk has a convenient feature for components source code scaffolding. Find the icon-button with the plus sign in the Components section of the tree-view, and click on it.

Once you clicked on one of the variants, it will take a few seconds for Webcodesk to create a file and add it to the resources tree in the workspace. Look for the new file in the specified folder in the src/usr directory.