C#Bot Reusing Components

Components are the most basic building blocks of a user interface in an application. Conceptually, a component can be composable (includes other components) or atomic (a UI element such as a button).

Components, by nature, are reusable throughout the application once they are built. This increases development speed as well as maintainability throughout the codebase as any changes only need to be made in one place — the component itself.

In React, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

In the third generation bots, components are defined in accordance to our standards. These standards define components and their behaviours in generic terms which can be implemented in any framework, which in this case is React.

These components can be found in the following places:

• clientside/src/Views/Components: common components including element components and other container components used throughout the application
• clientside/src/Views/Pages/Admin: page components defined in the UI diagram
• clientside/src/Views/Pages: predefined special page components in React and custom page components you can create here
• clientside/src/Views/Tiles: tiles defined in the UI diagram

When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. These objects are called “props”.

For example, this code renders “Hello, Sara” on the page:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

ReactDOM.render(
  <Welcome name="Sara" />,
  document.getElementById('root')
);

We are using Typescript rather than pure JavaScript to build our React application, so we also use the typed version of JSX syntax. This means all the components are in *.tsx files.

A great component example is the button component, which is found in clientside/src/Views/Components/Button.
The file Button.tsx contains many props options such as icon, sizes, colors, display, etc. By using the component rather than writing it yourself, you ensure that your button also inherits all the same styles as every other button without you needing to write custom styles.

This article will walk you through how to simply reuse the button component in the login page, where it will clear text inside the username and password fields. It serves as a simple example of component reuse.

You will be required to interact with the following files:

LoginPage.tsx

First, we need to create a new button in the HTML file:

1. Locate LoginPage.tsx at clientside/src/Views/Pages.
2. Locate the protected region: // % protected region % [Override contents here] off begin
3. Turn on the protected region by replacing off begin with on begin.

4. Add the following code below the <Password> tag:

    <Button>Clear</Button>
   

5. Add a custom class to the button (if you need):

    <Button 
        className="clear-button"
        >
        Clear
    </Button>
   

6. Add button display style to it:

    <Button
        className="clear-button"
        display={Display.Outline}
        >
        Clear
    </Button>
   

7. Add color style to it:

    <Button 
        className="clear-button"
        display={Display.Outline}
        colors={Colors.Secondary}
        >
        Clear
    </Button>
   

8. Add disabled logic to it:

    <Button
        className="clear-button"
        display={Display.Outline}
        colors={Colors.Secondary}
        disabled={!!this.hasContent}
        >
        Clear
    </Button>
   

9. Add the onClick event handler:

    <Button
        className="clear-button"
        display={Display.Outline}
        colors={Colors.Secondary}
        disabled={!!this.hasContent}  
        onClick={this.onClearClick}
        >
        Clear
    </Button>
   

10. Then you need to create a private member function as the event handler.

     @action
     private onClearClick = (e:  React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
         this.loginState.username = '';
         this.loginState.password = '';
     }
    

Note: Any function changing the state of the component needs to be annotated with @action.

Note: This place doesn’t have a protected region. Getting the bot to rewrite client code will remove all the customised code not in the protected regions. Here you can just create this onClearClick function as an example for testing purpose, but you wouldn’t want to use it in a real application.

Try typing something into the text fields and click Clear. The text will now be cleared.
For more information on how to define your own components, check out the React website.

Component Documentation

To ease development, C#Bot also writes React Styleguidist documentation by default. React Styleguidist exposes components and other classes throughout the application, so you can search for the component that best suits your need.

In order to write React Styleguidist:

1. Open a terminal and navigate to clientside. 2Type in yarn run styleguide:build and run it. It will write static html files into the folder clientside/styleguide. You can then access the docs by opening clientside/styleguide/index.html.

If you only run yarn run styleguide, it will start a server for you to browse the doc by visiting http://localhost:6060.