Setting up a React Playground Dev Environment

InstructorJohn Lindquist

Share this video with your friends

Send Tweet

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!

Free Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.

Hector
Hector
~ 6 years ago

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"

John Lindquist
John Lindquist(instructor)
~ 6 years ago

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.

Hector
Hector
~ 6 years ago

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.

John
John
~ 6 years ago

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!

John Lindquist
John Lindquist(instructor)
~ 6 years ago

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

Ishan
Ishan
~ 6 years ago

Do I use babel now?

Nicolas
Nicolas
~ 5 years ago

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

Nicolas
Nicolas
~ 5 years ago

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

Jan
Jan
~ 5 years ago

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?