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 916 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Flux Architecture: Overview and Project Setup

6:56 React lesson by

In this lesson we'll look at an overview of how Flux works, setup our application structure and tools, and create our first component.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this lesson we'll look at an overview of how Flux works, setup our application structure and tools, and create our first component.

Avatar
n7best

How do you get emmet work inside the return of render function with jsx?

Avatar
David

Great series, what Sublime plugins are you using?

In reply to egghead.io
Avatar
Indrek

What CLI are you using?

In reply to egghead.io
Avatar
Joseph

SidebarEnhancements, Alignment, AutoFileName, Emmet, BracketHighlighter, HTML-CSS-JS Prettify, and of course my own set of React snippets: https://github.com/joemaddalone/ReactSublimeSnippets

In reply to David
Avatar
Indrek

How did you get your CLI look like that? I'm using the iTerm2 also but it doesn't look the same. The green arrow which shows $pwd at all time is really cool. Mind elaborating a little bit?

In reply to Joseph
Avatar
Indrek

Thanks. I downloaded the theme, but still there is no green arrow to indicate my current pwd. I tried googling it but no luck. What's it called so I can google it?

In reply to Joseph
Avatar
Arek Śliwa

When I hit 'npm start' I receive something like this ( this is only a part):

npm ERR! This is most likely a problem with the egg_flux package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server

I was googling and I found that everything I have to do is to change the port from 8080 (https://github.com/webpack/react-starter/issues/34), but I was trying to type in different ports in webpack.config.js and still receive this error.

Avatar
Arek Śliwa

Maybe this part of message will be more helpful:
/eggflux/nodemodules/webpack/lib/NormalModuleFactory.js:72
var elements = request.replace(/^-?!+/, "").replace(/!!+/g, "!").split("!");
^
TypeError: Cannot read property 'replace' of undefined

In reply to Arek Śliwa
Avatar
Arek Śliwa

sorry for these posts - in webpack.config.js I wrote 'input' instead 'entry'...

In reply to Arek Śliwa
Avatar
Joseph

It's not a webpack issue. As far as I can tell it's saying you don't have the start command in your package.json.

"scripts": {
    "start": "webpack-dev-server"
  },

https://github.com/joemaddalone/egghead-flux-architecture/blob/master/package.json

Avatar

Great series i just wrapped up everything! Love this subscription already!

I just have one question for the series, when i see your dev tools, i see that you have your js file source-mapped?

Because when i want to debug my files all i get is the bundle.js witch has been through the babel converter, its not unreadable but its really annoying to read insted of just my source file, how did you do this ?

i've tryed devTools: 'source-map' in the webpack Config it didn work.

Avatar
Joseph

Just add devtool: 'source-map', to the root of the exported object in webpack.config.js

In reply to
Avatar
jason

It is just me, or is this one of the best explanations of Flux? Nice job!

Avatar
Dmytro

I have some troubles with work environment when trying to run the created application. Here is the topic, I created, on stackoverflow: http://stackoverflow.com/questions/36986133/couldnt-find-preset-es2015-relative-to-directory/

Avatar
Lucas

Hello, im trying to start my flux app and always display this error: "you may need an appropriate loader to handle this file type."

Follow my code:
//main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from "./componet/app";
ReactDOM.render(,
document.getElementById('container');
);

//app.js

import React from 'react'

export default class App extends React.Component{

render(){
  return <h1>A Flux Application </h1>
}

}

//webpack.config.js

module.exports = {
entry:"./src/js/main.js",
output:{
path:"./dist",
filename:"bundle.js",
publicPath:"/"

},
devServer:{
inline:true,
contentBase:"./dist"
},
modules:{
loaders:[
{
test: /.jsx?$/,
exclude:/node_modules/,
loader:'babel',
query : {
presets:['es2015','react']
}
}
]
}
};

Could you give me any help? Thanks

Avatar
Joseph

Make sure you have babel-loader, babel-preset-es2015, and babel-preset-react installed.

In reply to Lucas
Avatar
Iván Navarro

changes I had to apply in webpack.config.js:
output:path has to be absolute path -> __dirname + './dist'
loader: 'babel-loader'
missing babel-core, npm install babel-core --save-dev

In a typical React application all of the root component's information and functionality is handed down to nested or children components and those components are represented in our Flex application diagram here in this view panel. Now, the view panel represents everything React. The rest of these guys are not React. They are Flux.

You can see here that the view can send an action to a dispatcher received by a store, which in turn can send that action back to a view. Now, a view can register to listen to particular actions or events within our application.

When it does register and an action is triggered, potentially by another view, we've got this guy, the dispatcher. Now, the dispatcher receives everything that happens in our application as an action and then distributes that information to the correct store.

Now, the store manages all the state in our application. When the store receives an action and something is changed in the state of our application, it then announces that to the rest of our application and any view that was registered to listen for that action is updated as the store basically delivers the state of that view or component.

To get started our Flex application we're going to go ahead and MPM a nit in order to set up our package json. I'll just enter through these guys. We'll clear that out. Now we're going to MPM install Flux, which will get us the open-source dispatcher code available to us from Facebook. Of course we're going to have React, React.DOM, and also React Router, and right now we're going to go ahead and make sure that we get the latest version, which would be 1.0. Go and save that to our dependencies.

Now that those are installed, I'm also going to mention that we're also going to be using Babel as well as Webpack, so you're going to want those installed so that'd be MPM install Babel, Webpack, as well as Webpack Dev Server.

You can just throw a tac G on there in order to install those globally. Assuming you have those installed we're going to go ahead and install a couple other dependencies. These would be our dev dependencies. It's going to be Babel loader and a couple Babel presets. First React, then ES2015. We'll save those to our dev dependencies. Minor typo there.

Now that we've installed all the packages we'll need, let's go ahead and set up some of our application structure.

First thing I'm going to do is create a directory called dist, which is where built application will live. Create a directory called source, which is where our source code will go. CD into that and we're going to create another directory called js, for JavaScript. CD into that, and now we're going to create a handful of directories beginning with actions, then components, constants, dispatchers, mix-ins, and finally stores.

Additionally right here in the JS directory I'm going to go ahead and create a main.js, which will act as our entry point into our application. CD into components and create an app.js, which will be our root component. Finally I'm going to back up to our disk directory and create an index.html file and we can move onto our build process.

Our build process is going to use Webpack, so we're going to create a webpack.config.js, and I'm just going to drop in some boilerplate here. This won't be a series on Webpack but I'll walk you through it really quick.

We are exporting this object. It has a key of entry, which points to the entry file that we created in our source JS. That's the main JS. We've got an output object here that's going to output to this path, which is our dist directory. Our file name is going to be bundle, and we've got this public path, which is a way for the Webpack dev server to generate URLs so it knows where to get this file when we are running a dev server.

We've got some dev server configuration here. Inline true and content base. I'm not really going to go into those, but this is inline versus IFrame and content base is just where our content actually lives. Then down here we've got our loader. We've only got one of them. We're testing for JSX or JS. We're excluding anything in node modules or bower components. Our loader is in fact Babel, and then on the query key here we're loading in our presets of ES2015, as well as React.

Now, in our package json, I'm going to go ahead and create a script called start. We're simply going to run webpack-dev-server and that will automatically pick up on the webpack config file we just created.

Now we're going to jump over to our dist directory and set up our index.hml. Let's call that Flux. We're going to drop in Bootstrap just so our application looks nice. Set our script source to bundle.js, which doesn't exist yet but will be built by Webpack.

We're going to set up a div here with an ID of main. That'll be the target for our application. We're going to jump into our components and here in our app JS, which would be our first component we're going to import React from React and we're going to set up our app component, which we'll export by default.

I'm just going to return NH1 and we'll just say Flux inside that NH1. Save that and we'll jump to our main. Here we're simply going to import React from React. We're also going to import React.DOM from React.DOM, since we're going to be rendering these components to the DOM, and of course we're going to import app from components app. We're just going to react.DOM.render our app component to document.git element by ID main.

We should just be able to go ahead and MPM Start. If we load up the browser and head over to local host 8080, we should see our application up and running. There it is. If we jump back over here to our app component, let's get the browser on the screen and we go ahead and change this to "a Flux app" and save that, we should see it refresh there in the browser, and there it is.


Featured course:

Create an SVG Icon System

Create an SVG Icon System

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