React Flux: Development Environment Setup

React Flux: Overview and Dispatchers

React Flux: Actions

React Flux: Stores

React Flux: Components/Views

React Flux: Project Organization

React Flux: Routing with react-router-component

React Flux: Remove Duplicate Code with Mixins

React Flux: Wrapping Up

React: Flux Architecture (ES5)

Our build process during this series will utilize both gulp and browserify.  In this lesson we will take a moment to setup our environment and all of the tooling required to begin developing our Flux Application.  We've kept the build process very simple so porting it to grunt should be a breeze, but this also serves as a simple primer for those who may not be familiar with gulp.

https://app.egghead.io/api/v1/lessons/react-react-flux-development-environment-setup/subtitles

[00:01] Hey guys, in this video, we are going to begin building our React application, based on the flux application architecture.

[00:08] To get us started for our build process, we're going to be using Gulp, Browserify, something called "Reactify," Vinyl Source Stream. Of course, we're going to be using React, and later, we're going to use something called "React Router Component."

[00:20] I'm going to go ahead and get those guys installed, and then, we'll begin setting up our directory structure, and a few initial files to get our project up off the ground. The first thing I'm going to do here, touch a Gulp file.js. That's going to work a lot like a Grunt file, if you've used Grunt at all.

[00:39] I'm also going to create a directory here called "source," and inside of that, I'm going to touch index.html. Shoot, I did not move there, let's move there. We'll delete that in a second. Touch index.html. I'm going to create another directory here inside of source called "JS," going to CD into that, and we're going to touch main.js.

[01:05] Here, we're also going to create a handful of directories for our application. We're going to have actions, components, constants, dispatchers, and stores. Let's take a look at that really quick, make sure we've got everything in place. Cool.

[01:27] I'm also going to create, right here in source...let me see, back to that. I'm going to create another directory called "assets." We won't use that right away, but I just want it to be there. We're going to jump over to our Gulp file, and we're going to start building up our Gulp build process.

[01:45] The first thing we're going to need is Gulp, and then, we're also going to need Browserify, and we're going to need Reactify. Reactify is to convert our JSX over to JavaScript. We're also going to need this guy, and I'll try to explain that as we go. This is Vinyl Source Stream.

[02:08] What that does is, when we use Browserify with Gulp, Gulp requires that the input that's being piped over is a stream, whereas, Browserify ends up outputting strings. We use Vinyl Source Stream to convert a string to a stream. Again, don't worry too much about it.

[02:26] If you're new to Gulp, this is a great chance to learn a little bit about it, but our build process is going to be super simple. We are going to create our first Gulp task. That's going to be Browserify.

[02:39] We have function, what we're going to do here is we're going to call Browserify, we're going to give that our source, or our entry point to our application, which is going to be the main.js that we created.

[02:52] We'll obviously need to build that up. I'm going to attack on a transform here, and our transform is going to be Reactify. It's going to take our JSX, and convert it to JavaScript. The output of that is going to happen here where we call bundle.

[03:08] Now, we're going to take that, we're going to pipe it to our source, which is that Vinyl Stream Source, and we're just going to say we want that to be main.js. Now, we've got a stream, rather than a string, and then, we can finally pipe that to our Gulp destination, oops, which is going to be dist/js. I think that looks good.

[03:32] I'm going to create one more task here called "copy," and this is just so we can copy over a handful of files. There are plug-ins to do this, but this is going to work just fine. Our source is going to be source/index.html, and we just need to pipe that to our Gulp destination, there we go, which is going to be our dist directory.

[04:00] Then, even though we're not going to have anything in it right away, we're going to use this exact same pattern to copy over our assets directory, and that will go into dist/assets. Now, we're just going to set up our default task, so default. Here, we're going to run Browserify and copy.

[04:28] Then on the callback of that, we're going to return Gulp.watch, we're going to start our watch here immediately. We're going to say, "source/anything," go ahead and rerun Browserify and copy. I think we're looking pretty good there. Let's go ahead and create our index.html file.

[04:55] We're just going to drop in a really quick HTML file here. We're bringing in some bootstrap. We've got a div with a ID of main. That's going to be the target for our application. Then, we are just bringing in our main.js, which has been reactified by Browserify.

[05:10] We're going to go ahead and save that guy, and we're going to jump over here to our main.js, and we're going to need to create a component. But right here, all we're going to do is output that component.

[05:21] I'm going to say I've got a component called, "app," going to require that. It's going to be a component, it's in the components directory, and it's going to be called app.js.

[05:35] Then of course, we're going to need to require React. We're going to create a quick little render here. It's going to render our app component to document.getelementbyIPmain. That's looking good. Save that, and we'll jump over to our component. You know what? I'm going to rename this guy, "components."

[06:00] Here, we're going to create a new file. It's going to be called app.js. To get us started, we're just going to require React. We're going to create our component, called "app," and the skies just going to return an H1, with my app as its inner HTML. Then, we'll export our component.

[06:23] I think we're looking pretty good here, let's go ahead and try our build process. Here, we should just run Gulp, and what we're expecting to happen is to see a new directory here called "dist," and it'll contain our main.js, our index.html, and it should carry over our assets folder, as well. Cool.

[06:43] There's our dist directory. We've got our index.html, and we should be able to load this guy up in the browser. To do that, we are going to open up a new tab here, and I'm just going to be using something called "HTTPSTER." Let me get to my directory.

[07:06] We've got it loaded up on port 333. Cool, we can see my app. I'm going to move that off to the side here and this up a little more. If we want to jump over to our app component, I'm going to make this my flux app.

[07:28] Save that guy, and we should see our Gulp watch process has run again. We'll reload this guy over here, and now, we've got my flux app. Our build process is looking good. Our directory structure is looking good. We're ready to move on to building our flux application.

React Flux: Development Environment Setup

Share this video with your friends

Course

React: Flux Architecture (ES5)