Working with Board Files

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.
Here's an example of a board file:
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
import { createBoard } from '@wixc3/react-board';
import styles from './intro.module.scss';
import Classnames from 'classnames';
import CommonStyles_module from '../../../styles/common-styles.module.scss';  
export default createBoard({
    name: 'Sample',
    Board: () => (
        <div className={styles.container}>
            <p className={styles.myStyle}>
                HELLO
            </p>
            <p className={styles.myParagraph}>
                This is a board.
            </p>
        </div>
    ),
    isSnippet: true,
    tags: ["Sample"],
    environmentProps: {
        windowWidth: 1024,
        windowHeight: 768,
        canvasWidth: 1024,
        canvasHeight: 768,
    },
});

The createBoard Helper Function 

Every board object in Codux is brought to life and adjusted on-the-fly using a special function called createBoard. You give createBoard a board object with the details about the board - like the component it should display and the environmental settings for the component, and createBoard then takes this information and creates the board rendering in Codux.
Here's an example of how you might use the createBoard function:
1
2
3
4
5
export function createBoard<P>(
    componentBoard: IComponentBoard<P>
) : IComponentBoard<P> {
    return componentBoard;
};
One thing to note is that Codux currently only supports board objects that can be statically analyzed. This means Codux needs to be able to understand everything about the board object just by looking at it, without having to actually run any of the code inside it.
This static analysis allows Codux to instantly reflect any changes you make to a component's state on the board, without having to reload the whole thing. However, this instant update feature doesn't work with class components yet, and it also doesn't work if your component's state is defined outside the component itself (like in the board's scope). So for now, you'll need to define your component's state within the component itself to take advantage of this feature.
IN THIS ARTICLE
Previous article