The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Setting up a React Playground Dev Environment

Setting up a React Playground Dev Environment

6:07
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!
Watch this lesson now
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?

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