React Boilerplate Generation

Boilerplate generation through the ES7 extension (dsznajder)

PublishedJanuary 21, 2022

•1 min read

Full Stack Developer. I have hands on experience in crafting web applications using TypeScript, Next , React ,TailwindCSS. I have also worked with PostgresDB and AWS S3. I have also developed dAPP based upon ERC 20 , ERC 721 tokens.

Imagine you have an ally to help you generate the boilerplate while writing codes in React.js , so that you could be prevented from commiting petty mistakes such as missing out on tokens, parenthesis etc.

Well there's one extension in Visual Studio Code, ES7+ React/Redux/React-Native snippets. Credits to dsznajder, it's developer.

Let's get started.

To enable the extension. Search for ES7 in the extension search box and install ES7+ React/Redux/React-Native snippets by dsznajder.

Screen Shot 2022-01-21 at 12.41.12 PM.png

Suppose you want to write your codes in webapp.js file.

Screen Shot 2022-01-21 at 12.39.23 PM.png

Type rafce and press enter.

rafce stands for React Arrow Function Export Component.

Screen Shot 2022-01-21 at 12.39.38 PM.png

There you go, you have the React boilerplate code. Now you could breeze through writing functional codes without having to write the repetitive lines.

Screen Shot 2022-01-21 at 12.39.59 PM.png

Thanks for reading.

#reactjs #javascript #100daysofcode

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

How to Dockerize a NextJs application?

Hello there, In this tutorial I would be walking you through "Dockerizing you NextJs application from start to finish. 1. Create a NextJs application npx create-next-app docker_next After installation Let's go ahead and personalize the application ...

Jun 9, 20224 min read

Currying in JavaScript

Assume the captain of a team passing the baton to it's junior. The junior after doing it's part passes onto the baton to their respective junior. This process continues till the mission is accomplished. The function A takes into the starting argumen...

Mar 26, 20221 min read

Functional Programming : Declarative

Declarative programming is pattern which executes the codes without disclosing it's implementation. In layman terms "Doing without doing". Assume the following imperative example : If I were to explain the code to a kid then i would explain it in t...

Mar 23, 20223 min read

React.js : Props

Passing dynamic data through React components using Props.

Mar 16, 20222 min read

Error: Malformed PostCSS Configuration - NextJS

Hi, I faced this error while trying to incorporate "Dark Mode". My project stack included : Next JS, Tailwind CSS. This error could be mitigated in the following ways (atleast it worked for me): Remove the "require" keyword in post.config.js file ...

Feb 21, 20221 min read

Error: Malformed PostCSS Configuration - NextJS

Devkant Swargiary

9 posts

Full Stack Developer

Command Palette

Comments

More from this blog