Quick Start Full Stack Web Development/

...

/

Buttons, Forms, and Panels

Buttons, Forms, and Panels

Let's get started with designing buttons, forms, and panels.

We'll cover the following...

In reality, creating components can be a lot of trial and error to make sure it looks right. For the sake of brevity, we’ll just look at how they are when they’re done enough. As with many design tasks, there is always room for improvement. Rather than done, a project is “done enough”.

Setting up files

First, we’ll create a new file that will hold the new lowest-level components. We’ll call it buttons.js and store it in the langman/client/src directory, which is where the App.js resides as well. In this file, we start by making placeholders so that we can get Storybook going.

Press + to interact
import React, { Component } from 'react';
class LetterButton extends Component {
    render() {
        return <div>Letter Button</div>;
    }
}
class ButtonPanel extends Component {
    render() {
        return <div>Button Panel</div>;
    }
}
class StartForm extends Component {
    render() {
        return <div>Start Form</div>;
    }
}
class PlayAgainPanel extends Component {
    render() {
        return <div>Play Again Panel</div>;
    }
}
export { LetterButton, ButtonPanel, StartForm, PlayAgainPanel };

We next create a Storybook file, all.stories.js, to show these placeholder components. This file goes in the Storybook directory, langman/src/stories. The two default story files should be deleted.

Try it yourself

Click “Run” and open the “Output” tab in the widget below once the server has ...