nicolashery

var merge = require('react/lib/merge');
var m = require('mori');

var toArray = function (val) {
  if (!Array.isArray(val)) {
    val = [val];
  }
  return val;
};

nicolashery

Using env variables with Webpack and Divshot

This shows a way to have "environment variables" working for both the webpack-dev-server (local development) and the Divshot server (to test a build locally).

Problem:

• Divshot server expects a .env.json file in the project directory, and uses it to serve a __/env.js file
• Webpack dev server can serve static files from the project directory, but we need to create the __/env.js file ourselves

A solution:

nicolashery

var gulp = require('gulp');
var react = require('gulp-react');
var jshint = require('gulp-jshint');
var cache = require('gulp-cached');

var jsFiles = [
  'src/**/*.js',
  'test/**/*.js',
  '*.js'
];

nicolashery

// Playing around with TypeScript
// Inspiration: https://github.com/abdullin/omni

// core.event
interface DomainEventType {
  name: string;
}

interface DomainEvent {
  _type: DomainEventType;

nicolashery

// Exploring using "expose React component tree as data" @swannodette
// (https://www.youtube.com/watch?v=5hGHdETNteE#t=1559)
// for routing and fetching data ("react-router-mega-demo" @ryanflorence)
// (https://github.com/rackt/react-router-mega-demo/blob/master/app/utils/fetchData.js)

var appState = {
  route: '/contacts',
  contacts: [],
  messages: []
};

nicolashery

// - rendering library (like React) should be able to "pick up" where server
// left off (i.e. hook up to the existing HTML)

// server.js
var server = express();

server.use(function(req, res) {
  var appHtml = React.renderToString(<App />);
  var html = injectIntoHtml({app: appHtml});
  res.send(html);

nicolashery

Keybase proof

I hereby claim:

• I am nicolashery on github.
• I am nicolashery (https://keybase.io/nicolashery) on keybase.
• I have a public key whose fingerprint is 852A E7B2 14A7 7B4A 4A49 27D3 FA69 6E9C F40A DF41

To claim this, I am signing this object:

nicolashery

# avoid "works on my machine" by always locking dependency versions
npm config set save-exact=true

# install/uninstall project packages with flags that will update package.json
npm install --save lodash
npm install --save-dev jshint
npm uninstall --save lodash

# tool that makes upgrading dependencies easier, install it globally
npm install -g david

nicolashery

import React from 'react';
import _ from 'lodash';
import Rx from 'rx';
import superagent from 'superagent';

let api = {
  host: 'http//localhost:3001',

  getData(query, cb) {
    superagent

nicolashery

// https://github.com/gaearon/redux

// example/Counter.js
import React from 'react';
import { performs, observes } from 'redux';
// Explicit import of stores/actions so you know what your component depends on
// (could also be useful for some static analysis tool?)
import { increment, decrement } from './actions';
import { CounterStore } from './stores';