I just learned that not only can you create boilerplate HTML in VS Code, but you can also create boilerplate React code inside of a React component with the help of a VS Code extension called ES7+ React/Redux/React-Native/JS snippets by dsznajder.

Once I installed this extension, all I had to do was type "rafce" inside the component file and hit return. For example, if I did this in a file called Header.js inside my components folder, the following was generated:

import React from 'react'

const Header = () => {
	return <div>Header</div>
}

export default Header

Isn’t that a beautiful thing?

Happy Reacting (with Next.js)!

Related Resources

• ES7+ React/Redux/React-Native snippets