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:
File Name | Description |
---|---|
LoginPage.tsx | Where we will create a new button and define a new method which will be called when we click the button to clear our texts. |
LoginPage.tsx
First, we need to create a new button in the HTML file:
- Locate
LoginPage.tsx
atclientside/src/Views/Pages
. - Locate the protected region:
// % protected region % [Override contents here] off begin
- Turn on the protected region by replacing
off begin
withon begin
. -
Add the following code below the
<Password>
tag:<Button>Clear</Button>
-
Add a custom class to the button (if you need):
<Button className="clear-button" > Clear </Button>
-
Add button display style to it:
<Button className="clear-button" display={Display.Outline} > Clear </Button>
-
Add color style to it:
<Button className="clear-button" display={Display.Outline} colors={Colors.Secondary} > Clear </Button>
-
Add
disabled
logic to it:<Button className="clear-button" display={Display.Outline} colors={Colors.Secondary} disabled={!!this.hasContent} > Clear </Button>
-
Add the
onClick
event handler:<Button className="clear-button" display={Display.Outline} colors={Colors.Secondary} disabled={!!this.hasContent} onClick={this.onClearClick} > Clear </Button>
-
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
:
- Open a terminal and navigate to
clientside
. 2Type inyarn run styleguide:build
and run it. It will write static html files into the folderclientside/styleguide
. You can then access the docs by openingclientside/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.
Was this article helpful?