Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 959 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Setting up a React Playground Dev Environment

6:07 React lesson by

When exploring a new framework or technology, it is nice to have a seed project or sandbox so you can just get in and start playing. Let's build our React playground using npm, browserify, 6to5, and more within WebStorm!

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

When exploring a new framework or technology, it is nice to have a seed project or sandbox so you can just get in and start playing. Let's build our React playground!

This video shows you how to set up and share your own React playground. John covers a variety of topics and tricks:

  • Using npm
  • Bundling React with Browserify, Watchify, and 6to5ify
  • Sharing projects on github with WebStorm
Avatar
Bron

Great video, thanks! It would be nice to see how to integrate livereload as well. Any suggestions?

In reply to egghead.io
Avatar
Hector

How do I get npm packages installed with --save-dev to run with no prefix in the command line?

When I install the packages and try to run watchify, for example, I get "command not found"

Avatar
John

Your best options:

  1. Install with "-g" so watchify is available globally on the path (as well as locally)

  2. Create a package.json with watchify saved as a script like I do at the end of the video.

Otherwise there's no simple/practical way for your terminal to know that "watchify" refers to your locally installed copy without manually setting up a reference.

In reply to Hector
Avatar
John

My personal favorite is "npm install -g live-server" then "live-server ./dist". It's a zero-configuration server that refreshes any time a file in that directory changes.

https://www.npmjs.com/package/live-server

In reply to Bron
Avatar
Hector

I think I found a third option

export PATH=$(npm bin):$PATH

You can add this to your .bashrc / .zshrc file to always add the local npm bin path to your $PATH.

Following this same pattern, you can do a bundle exec equivalent with an alias.

alias npm-exec='PATH=$(npm bin):$PATH'

so with that, you can do

npm-exec watchify in your local directory.

I personally like the first option better, though.

In reply to John
Avatar
John

How do i use watchify to watch an entire directory versus just app.aspx? Must i use something like gulp?

Great lesson, by the way!

Avatar
John

Browserify (which watchify uses) expects an "entry file" where you require() all of your dependencies. It will transform/compile them all into a single bundle file. So you only watch one file.

There are more examples and docs here:
https://github.com/substack/node-browserify#usage

In reply to John
Avatar
Ishan

Do I use babel now?

Avatar
Bill

I'm using WebStorm 10. After creating a new "react-playground" project and running the initial "npm install..." cmd in the terminal window, I do not see a new "nodemodules" directory in the project. However, the newly-installed modules are in ../../nodemodules/, actually ~/node_modules. I'm new to npm. What's going on here? Thanks for help.

In reply to egghead.io
Avatar
Bill

I was able to solve my problem by uninstalling all the other pre-WebStorm node-related modules from my system and starting from scratch. Then, the list of modules in Preferences->Languages and Frameworks->Node.js and NPM was empty except for npm. Then after following the screencast instructions, I have a node_modules directory inside my project.

In reply to Bill
Avatar
Nicolas

Very great teacher! Was a smooth lesson start to finish.

Avatar
Nicolas

Very great teacher! Was a smooth lesson start to finish.

Avatar
Tony

Any chance we could get this same demo for react-templates? (and maybe updated babel setup?)

In reply to egghead.io
Avatar
Jan

It seems like React isn't loading for me. i'm getting a console error: "React.render is not a function"
Any idea what can cause this?

To set up your own React Playground we'll use npm to install React, Browserify to bundle React, Watchify to bundle every time we see a file change, and 6to5-ify so that it can transform the JSX and ES6 features, which I'll probably want to play with, into ES5 JavaScript. Then we'll just say, "Save div" and let that run.

Once that's done we'll have a bunch of node modules in our project. I'm going to go ahead and create an html file, let's call it index, and create a new file in a source directory called app.jsx and hit OK. With this app.jsx file we can start watching for the file changes and bundling it up and transforming it into the output file that we want.

I'll go ahead and say, "Watchify transform using 6to5-ify," meaning pass all that JSX and ES6 stuff through this transformation using our source/app.jsx file and output to a dist/bundle.js file. I like to say -v for verbose which will log out every time the file changes. I like to see that that's working.

I'll go ahead and hit enter. You'll see that we get our first error, just meaning that the dist folder isn't created. I'll go ahead and do that directory dist. Once I run this again, hit enter, you'll see that it has written a new file which has bundled up some of that basic Browserify code right now.

To see if this is working we'll go ahead and require React. We'll say var React = require React and the React create class, render. I'll use the ES6 syntax for this. You'll see in WebStorm right now since I began typing that there's some red code here and it's throwing some errors.

To fix this you go into your WebStorm preferences and go down to languages, JavaScript, and set it to JSX Harmony. Then those errors will go away because Harmony is four the ES6 stuff and the JSX is for JSX obviously. We'll reformat this, and now we can return an H1 that says, "Hello world."

Once I hit save you'll see that it writes out all the changes to my bundle file. I'll go ahead and create an app from this that we can use to React render app. We'll place that in a document get element by ID. We'll create something called example.

If we switch over to our index file and load our script here, we're going to load the bundle file and then create a div called example. Hit save. You can see that if we open this file in Chrome it will render out hello world for us. We can change this to make sure it's working. It will say, "Hello working." Hit save. The file updated here. Refresh, and it says, "Hello working."

Now because I might want to share this with someone else I'm going to copy this command that we ran. I'm going to say npm emit. This is going to great a package.json file. I'll just accept all the defaults. Once our package.json file is created you can see it has all those dependencies we already installed. I'm going to set up a script called watch.

Now that we have this same command as a npm script this time we can simply say, "npm run watch," hit enter, and it's sitting there and watching for any sort of change. Hit save. You'll see it's writing out the file. Hit refresh, and everything is working.

Now if you want to share your project with someone else, we'll go ahead and create a new readme and say, "npm install and npm run watch". That's all they need to do to get it installed and running. Since we want to keep this dist folder but we don't want to keep this in version control we'll create a file gitignore.

We want to ignore all of the files in this folder, but we don't want to ignore the gitignore file itself. This way it will keep this folder but ignore any files in it. Then we'll create a gitignore file on the root of our project gitignore and ignore hidden folder called idea and node modules.

That should be good enough for our needs because you never want to check in your node modules and you usually don't want to check in this configuration for WebStorm or whatever tool you're using. WebStorm has a built in thing called Share Project on GitHub.

I already configured my account, so I just have to enter my password. We'll just keep the repo name as React-Playground. I'm going to ignore the description, hit share. It will ask me which files I want to commit or basically which I want to do a git-add on.

You can see it's already ignoring the files that I specified, the node modules and everything. This looks right, so I'll just hit OK. Then once I hop over to GitHub and under my account under repositories you can see I have a React-Playground where I could just send someone this link. They could clone it, run npm install, run npm, run watch, and they'd have this Playground up and running for themselves.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?