Setting up a React Playground Dev Environment

[00:00] 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 625-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.

[00:29] 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.

[00:54] I'll go ahead and say, "Watchify transform using 625-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.

[01:24] 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.

[01:44] 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.

[02:10] 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."

[02:37] 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.

[03:02] 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."

[03:35] 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.

[04:01] 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.

[04:22] 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.

[04:50] 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.

[05:11] 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.

[05:26] 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.

[05:41] 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.