egghead-react-flux-es6_1-5.md

Egghead.io React: Flux Architecture (ES6)

Overview and Project Setup

$ npm init
$ npm install react react-dom flux redux react-router@latest --save
$ npm i babel webpack webpack-dev-server -g
$ npm install babel-loader babel-preset-react babel-preset-es2015 --save-dev
$ mkdir dist
$ mkdir src
$ cd src/
$ mkdir js
$ cd js/
$ mkdir action components dispatchers mixins stores
$ touch main.js
$ cd components/
$ touch app.js
$ cd ../../
$ cd dist/
$ touch index.html
$ cd ../

Build Process Using Webpack

$ touch webpackconfig.js

boiler-plate webpack:

webpackconfig.js

module.exports = {
  entry: "./src/js/main.js",
  output: {
    path: './dist',
    filename: "bundle.js",
    publicPath: '/'
  },
  devServer: {
    inline: true,
    contentBase: './dist',
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

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.

We're simply going to run webpack-dev-server and that will automatically pick up on the webpack config file we just created.

package.json

{
  "name": "fluxer",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "flux": "^2.1.1",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-router": "^2.0.0",
    "redux": "^3.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.5.2",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "webpack": "^1.12.13"
  }
}

dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fluxer</title>
  <link rel="stylesheet" media="screen" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
</head>
<body>
  <div id="main"></div>
  <script src="bundle.js"></script>
</body>
</html>

Change the title to Fluxer.
Add 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.
Set up a div with an ID of main. That'll be the target for our application.

src/js/components/app.js

import React from 'react';

export default class App extends React.Component {
  render(){
    return <h1>Flux App</h1>
  }
}

src/js/main.js


import React from 'react'
import ReactDOM from 'react-dom'
import App from  './components/app'

ReactDOM.render(<App />, document.getElementById('main'));

import React & ReactDom
import app from components app
set up our app component
export by default


---

### 2 Dispatcher

We could use the dispatcher directly, but what we're going to do is, create a new file called "AppDispatcher" right here in our dispatcher directory. We're just going to set up a facade around dispatcher. When you're creating your Flux application, it's important to have your distinct AppDispatcher separate from the Flux dispatcher, so that you can inject any logic you might need.

jendiamond/egghead-react-flux-es6_1-5.md

Select an option