This video is available to students only
Adding the Button component
Introduce a shared Button component to replace all existing button elements
With the code audit completed and the necessary functionality determined, it's time to build the Button
component.
Keep in mind that implementing this component isn't directly related to ASTs, or doing a code audit. The Button
is being used as the example of how to apply different AST-based tooling to codebase maintenance and refactoring.
In the flash-cards
app, create a new file src/components/Button/Button.js
for the React Button
component.
The following code is a basic implementation for the component, based on the code audit.
1
import classNames from "classnames";
2
3
export const Button = ({
4
children,
5
onClick,
6
block = false,
7
variant = "primary",
8
type = "button",
9
}) => (
10
<button
11
onClick={onClick}
12
type={type}
13
className={classNames("button", `button--${variant}`, {
14
"button--block": block,
15
})}
16
>
17
{children}
18
</button>
19
);
This page is a preview of Practical Abstract Syntax Trees