Scaffolding React Components

We can increase our development speed by creating many components with scaffolding in React.

I am using the Scaffs Extension for creating my components from a template.

Here are the steps.

1. Install

Scaffs Extension by clicking the link provided or you can search the name of the extension in the VS Code Extension marketplace.

2. Create Scaffold

You can create a folder in your project and define the scaffold in that folder. You can see the example below.

As you can see there are __name__ placeholders on the file names. These placeholders will be replaced with our provided component name.

You can see the component root file here.

import React from 'react';
import { I<%= name %>Props } from './<%= name %>.types';
import { use<%= name %> } from './<%= name %>.hook';
import { <%= name %>Styled } from './<%= name %>.styled';

const <%= name %>: React.FC<I<%= name %>Props> = (props) => {
  const { someValue } = use<%= name %>(props);

  return <<%= name %>Styled>{someValue}</<%= name %>Styled>;
};

export default <%= name %>;

As you can see there are <%= name %> placeholders in the file. This placeholder will be replaced with our provided component name.

You will also see .scaffold.json in the folder. This file holds the variable name and description.

3. Configure

We also need the extension to know the scaffolds that we created. So we need to create a file called .scaffs-config.json in the project root folder.

4. Create your component

You will need to right-click on a component that you want to create your component and then choose Scaffs in the context menu

A prompt box will be shown after clicking in the menu and first, it will ask which scaffold will be used.

After that, the directory name will be asked

After entering the directory name, the component name will also be asked. (I used the same name)

After all, you will see the component is created in the selected directory.

You can find the scaffold files below.