05-email-view

Step 5 - Email View

Setup

Install webpack-dev-server & react-hot-loader:

npm install --save-dev webpack-dev-server react-hot-loader

Update webpack.config.js to update entry, output & loaders:

var webpack = require('webpack'),
    path = require('path');

module.exports = {
    entry: [
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        './src/index'
    ],
    output: {
        path: path.join(__dirname, 'src/dist'),
        publicPath: '/dist/',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                loaders: ['react-hot', 'babel'],
                include: path.join(__dirname, 'src')
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
        })
    ]
};

Add start:server script to package.json:

{
  "scripts": {
    "build": "webpack --progress --colors --devtool source-map",
    "build:watch": "webpack --watch --progress --colors --devtool source-map",
    "eslint": "eslint .",
    "lint": "npm run eslint",
    "start:api": "node api-server.js",
    "start:server": "webpack-dev-server --content-base src/ --hot --inline --open",
    "test": "npm run lint"
  }
}

Tasks

• Clicking an EmailListItem displays the corresponding email information in EmailView, which now doesn't show unless there is a selected email item
• Add a close button to EmailView which hides EmailView and deselects the selected EmailListItem

Next

Go to Step 6 - Email Form.

Resources

• webpack dev server
• React Hot Loader Getting Started
• Event System
• Dangerously Set innerHTML