Cheatsheet: setting up React.js playgrounds in Codepen and JSFiddle

Curious about React.js but not quite ready to commit to building a full web app? Try using React in two popular playgrounds, Codepen and JSFiddle. These platforms give you speedy setups to jump into experimenting with React outside the context of a full web app.

If you’re familiar with these platforms, skip the explanation and go directly to the setup instructions in the second half of this post.

Codepen vs JSFiddle: what’s the difference?

Both platforms offer versatile playgrounds for frontend projects in HTML/CSS/JS and support a variety of preprocessors. Making either a pen or fiddle offers a quick, light-weight environment for testing ideas and then showcasing your code samples as part of your portfolio.

Of course, each platform has its own strengths. Let’s take a look.

Want a community? Try Codepen.

Developers flock to Codepen for its community network. It allows you to Love individual pens (adding them to your Profile under ‘Loved’) as well as Follow noteworthy developers and amassing your own followers.

Forking pens by other developers does not depend on whether or not you follow them. You can organize original and forked pens into collections.

Codepen also supports a kind of lightweight blogging via Posts. Use Markdown to write a post with embedded pens, even customizing the CSS to create a unique look for your posts.

Looking for work? Make a resume in Codepen using Posts with embedded pens that highlight your coding strengths and design style.

Just need code? Cut to the chase with JSFiddle

You don’t Follow other developers as in Codepen — you fork individual fiddles and they become your own when you edit their titles. The lack of social network feels like a real drawback to using JSFiddle and I wish they supported Github-like social features.

The Facebook team behind React.js created a number of helpful fiddles to aid your exploration of React as well as base fiddles for you to fork. They demonstrate core concepts or specific functionalities. Most significantly, they get updated promptly as the framework evolves.

I haven’t seen a company put out official, maintained pens on Codepen. (Got an example? Tell me in the comments!) This feature recommends JSFiddle as a good place for those looking to learn and stay up-to-date with best practices.

Anecdotal evidence suggest that it is less buggy than Codepen which, if true, might makes it a better choice for embedding in blogs or using as live demos.

If you maintain your a website for yourself or a team, both support embedding pens/fiddles in a post with attractive albeit generic styling. And remember, nothing stops you from copy-pasting your code to both platforms if that best serves your ambitions.

Made your decision? Set up your accounts and profiles? Fantastic! Now let’s set up those base projects.

Codepen: Add React and Babel to a Template Pen

First, create a New Pen. You’ll find a button on your Profile page. Otherwise, click your Profile image in the top-right corner of any view to bring up the dropdown menu.

Create a New Pen from the Profile page (left) or from the drop-down menu under your Profile image

Configuring your new Pen to understand React.js means identifying Babel as the compiler and then linking to the React framework itself. Accomplish this under the Settings for the JS section of your new Pen.

You want the small gear directly to the left of ‘JS’ for the settings of this individual Pen.

Now you will select Babel as your compiler — a.k.a. “Javascript Preprocessor” — and link to the React.js library as an external script. Add a name and description that identifies this Pen as a base or starter for other React projects for convenience, if you like.

Link to the .min versions of the library. You can add other external libraries like Fabric.js as needed later.

Lastly, add some tags and check the box marked ‘Template?’ to mark this Pen as a base or starter pen before you Save & Close.

Codepen is pretty darn helpful this way.

Or, skip all this and fork my starter pen.

JSFiddle: Fork the React Base Fiddle with JSX

I recommend forking the React Base Fiddle with JSX because including with JSX (an XML preprocessor) makes React about a million times easier. It may take a minute to adjust your eyes, true. Consider it part of the learning curve.

Hit ‘Fork’ on the React Base Fiddle w/JSX to keep it handy.

Find your forked fiddles in your Profile under ‘All your fiddles’

This base fiddle includes some boilerplate that you might find annoying after your umpteenth fiddle. It’s easy to start from scratch by creating a new fiddle with the right JS settings.

Gear icon ftw!

The drop-down menu under ‘Frameworks & Extensions’ reveals a dazzling array of options. Scroll down-down-down to React and select a version (probably not 0.14.3, tbh!).

Note that the same JS settings window allows you to include external scripts by linking to them under ‘Framework <script> Attribute’.

Pretty easy, right? JSFiddle definitely demonstrates the power of simplicity.

That’s it! You’re ready to tinker with React.js even before your idea for an awesome web app crawls forth from the creative abyss. When it does, you’ll want to set up your local environment in order to develop richer, standalone apps.

Can’t wait to see what you make, thanks for reading!