Figure 1. Component structure from boilerplate
The component has been created having the structure as shown in Fig.1. Inside /src it can have several folders each referring to a different component. This structure has the basics to render and integrate a component with the framework’s structure.
Figure 2. Component’s main file index.js
The component's main file is /src/index.js, as shown in Fig. 2, is where the components created are registered in the API of the framework to be used in the builder and inside other components.
Figure 3. The component created Index.js file.
The file /src/graph-component/index.js (Fig. 3) Is the React component that is rendered on the screen, the component's HTML and implementation. This component must have as superclass the Schema.js class; the Schema class stores the metadata and properties that the component will be receiving inside the builder.
Figure 4. The component created Schema.js file.
The file /src/graph-component/schema.js extends React.Component and has the definition of metadata and properties that the component will receive, the metadata is for setting the behavior of the component within the builder, the properties (propTypes), are the definition of what properties the component will receive. The defaultProps variable is the default value for each property and the variable i18n is the default language that the component will use.
static metadata = {
displayName: 'Graph Component', // name that will appear in builder
container: false, // if component can be a drop area to receive other components inside it
visual: true, //if component render some html, if false the component will not appear in builder
categories: ['General'], // category that component will be in builder
};
static propTypes = {
value: PropTypes.string.isRequired
};To do the type checking and render the components according to type, the PropTypes library is used.
static i18n = {
default : "en-US"
};In variable i18n has the default language value for internationalization, the value of the default variable must have the same name as the json file inside the directory /src/graph-component/i18n/.
Figure 3. Language configuration - i18n.
The internationalization files are in the /src/graph-component/i18n/ (Fig. 3), each JSON file corresponds to a different country language, it is a key-value file, the keys must be the same in all languages files, because in the component the usage of the i18n is through the keys defined in the JSON file. The object with the internationalization strings is added to the props of the component, this.props.translation according to the language defined in schema.js.>