Mario Duarte
3 supporters
React App template for CodePen

React App template for CodePen

Feb 07, 2021

Want to play around with react on CodePen but not sure where to start, I have created a simple template that anyone can use!

React Function Component Template

This template will let you jump in and start writing code with no setup required from the comfort of your browser, which makes it perfect for someone who is learning on the go, on your laptop, desktop, or even tablet!

You will find that this template already has React (17.0.1 at the time of writing), ReactDOM (17.0.1 at the time of writing), and StyledComponents (5.2.1), but you can very easily add more packages.

Click on the JS settings and find the Add Packages box

Just search for the package you would like to add to the Pen and they will be added at the top of your JS tab.

Please note that this is a Pen and not a project and that this template is meant for beginners and people who want to play around in a single component.

Of course, you can add multiple components here just y creating multiple functions, but it will get very confusing very quickly and CodePen has you covered on that with their CodePen Projects.

Also, have in mind that as you are working in a single JS file you will not need to export your functions, so if you want to use a component on your ReactDom.render() you just have to declare your component as a function, as in the template.

Here is the full JS code:

import React from 'https://cdn.skypack.dev/react@~17.0.1';
import ReactDom from 'https://cdn.skypack.dev/react-dom@~17.0.1';
import Styled from "https://cdn.skypack.dev/[email protected]";

function App({title}) {
return( <h1>{title}</h1> );
}

const el = document.querySelector("#root");
ReactDom.render(
<React.StrictMode>
<App title="Hello World!" />
</React.StrictMode>,
document.querySelector("#root") );

You will also need to ensure that you have a div with the id of root on your HTML tab as follows, so that ReactDom can render your component to:

<div id="root"></div>

Happy Coding and don't forget to share your creations with me on Twitter!

Enjoy this post?

Buy Mario Duarte a coffee

1 comment

More from Mario Duarte