Scaffolding React Components
Tags: react, scaffollding, scaffs, webdev
Published: 2023-09-10 14:48:15

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

I am using the [Scaffs Extension](https://marketplace.visualstudio.com/items?itemName=itslennysfault.scaffs-vscode) for creating my components from a template.

Here are the steps.



### 1. Install 
[Scaffs Extension](https://marketplace.visualstudio.com/items?itemName=itslennysfault.scaffs-vscode) by clicking the link provided or you can search the name of the extension in the VS Code Extension marketplace.


![Scaffs in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ryexbpvf3qjmv8khtrx.png)



### 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.

![Scaffold project structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9usic508cvr64a9rs86x.png)

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.

![scaffold.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/og96769y013xayrftkjh.png)



### 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.


![.scaffs-config.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omve9xml6o552q4kx89n.png)

![.scaffs-config.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/700zup1rilvcwv87gf5x.png)


### 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

![Scaffs Context Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75p03iyqghf59rog7yyk.png)

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


![Scaffold selection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xytclpl9pqz43df4hvdj.png)

After that, the directory name will be asked


![Directory Name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ag9uino3zye77jsljpam.png)

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.


![Components in the directory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a00opgri1ez807ejzblp.png)



![Created component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ilamfhf41jfgh1akil9q.png)


You can find the scaffold files below.


{% embed https://gist.github.com/mehmetyilmaz001/05624a0fc8691bba89c1d7c858fda215 %}