What are boards?

A board is an isolated environment where components render in different configurations using various property values, states, and environmental settings. Components on boards can be tested and edited along with HTML elements to fully mock where the component will be consumed in your app.
Components render in Codux using the settings described in the board's code. Board files have the file extension .board.tsx. You can create and edit these files using the code editor built into Codux, or using a different IDE. You can also create new boards visually through the UI in Codux. Any changes you make to a board are immediately visible on the stage in Codux and saved to the board's code file.
For a visual introduction to boards and how they are used in projects, check out the video below:
Note:
Boards can contain one, or multiple components or other elements in them. You can create a single board for a component, or mock the same component in many states. To see, interact with, and edit a component visually in Codux, you'll need to add it to at least one board.
Important!
When you import stylesheets in a board file, apply class names, pass through properties, run logic, and so on, all of these are external to the component. This means that when you take the component and use it in your app, it may not look the same as it did while on a board. Differentiations occur between components on boards and components rendered to contextual environments (like a web browser or app) when a board provides context to the component that isn't also given in the app, or vice versa.

Board File Format 

Inside a board file, the first thing you'll see are package imports. Because boards use JSX syntax, you'll need to import the React package. You'll also need our helper package, which is a required dependency for your project.
Board files also contain environment information to describe their size, color, margins, and the paddings of the canvas and window that the components render in. As with all aspects of boards, changes made to these properties through the UI (check out Board Settings) immediately write and save to the board file.
Have a look at the example code file below to see what a complete board file looks like.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// Required for JSX
import React from "react";
// Library for creating React component boards.
import { createBoard } from "@wixc3/react-board";
// The component to render on the board.
import { AppProductItem } from "../../../src/components/app-product-item/app-product-item";
   
// The board object.
export default createBoard({
 // The board's name.
 name: "New Product",
 // Properties to supply the component with.
 Board:() => {
   return (
     <AppProductItem
       productId="grw2as"
imageUrl="https://static.wixstatic.com/media/d759b6_d1773d716a4746d8b70eb7c15112000e~mv2.png"
       productTitle="Swim Swim Swim"
       modelName="Red on Cyan"
       price="$9.00"
       reviewsAverageRating={4}
       reviewsCount={22}
       isAddedToCart={false}
       isNew={true}
     />
   );
 },
 // Environmental settings for the component.
 environmentProps: { 
       windowHeight: 726,
       windowWidth: 1024,
       canvasWidth: 390,
 },
Important!
Remember that all board objects created by Codux use the createBoard function shown in this example.

Board Helper Function 

Codux's helper function serves as an API for creating and manipulating boards programmatically during runtime. It provides Codux with the information it needs for the board without using an actual board file. Use this function to test that you're using proper syntax and type-checking for the board object.
This is how the helper function looks in use:
1
2
3
4
5
export function createBoard<P>(
    componentBoard: IComponentBoard<P>
) : IComponentBoard<P> {
    return componentBoard;
};
Note:
We currently only support visualizing and editing statically analyzable board objects.

Creating Boards Visually 

You can visually create boards from within Codux for any component variation that you want to test. To create a new board, select a component from the component list and click New at the top right of the screen.
Button for creating new boards at the top right side of Codux, beneath the Git toolbar.
In the overlay that appears, you'll be asked if you want to create the board as an empty file, or to copy an existing one as the baseline. Choose an option and set the name and relative path for the new board, and Codux will save the board file (with the extension .board.tsx) accordingly.
Create a new board dialog box.
Note:
As a best practice, give your board a name that indicates what you intended for it to show, and how it may affect the component. For example, Mobile View, Large Pic, or Long Title make for descriptive names that shed some light on the environmental settings, component types, and properties that they may use.
Note:
When you make changes to a component with a state, you can make them freely and see them take effect while the state is preserved. When you make the changes, the affected components are updated on the fly and rendered on the board without the need for a full reload. This doesn't work yet with class components, however. If your component has a state that is described within the scope of that component, it will work, but if your state is defined outside the component scope (for example, in the board's scope), you also won't be able to take advantage of this feature (ie createBoard({… Board: { const [n, setN] = useState(); }…});

Reusing Boards with Components in Other Boards 

A board's components and HTML elements can be reused in their specific permutations of props, states, and styles through the Add Elements panel so that they can be designed once, and then added to any other components. See here for more information.
Note:
If a board in the Add Elements panel shows up as invalid, refer here from troubleshooting information.
IN THIS ARTICLE
Previous article
Next article