ihgrant

React-bootstrap

https://react-bootstrap.github.io/

• no webpack dependencies

Elemental

http://elemental-ui.com

• requires less-loader

Rebass

http://jxnblk.com/rebass

ihgrant

naïve approach

• rely on files property being set
• fails because while clicking on the input and selecting files will set the property correctly, dragging and dropping does not actually interact with the input and set the property. The property cannot be set manually (react-dropzone/react-dropzone#131) using javascript for security reasons.
• thus when the form is submitted the file input has no files property and nothing is uploaded.

let's use javascript, then!

• submit the form using fetch, create a FormData from the form and manually set the files field using state set using the onDrop callback from Dropzone
• only set the files field if it's not set (because the user could have clicked and chosen files instead of dragging and dropping)
• FormData has a great API for inspecting its keys and values! I'll use FormData#getAll() and see if the files are populated
• works great in chrome and ff!

ihgrant

class Example extends React.Component {
    onClick(e, id) {
        ...
    }
    render() {
        return <ul>{this.props.items.map((el, i) => <li onClick={this.onClick.bind(this, el.id)}>{el.description}</li>)</ul>
    }
}

/// OR........

ihgrant

export function tryparseJson(jsonstring) {
  try {
    return JSON.parse(jsonstring);
  } catch (e) {
    return false;
  }
}

ihgrant

const React     = require('react');
const ReactDOM  = require('react-dom');
const TodoInput = require('./todo_input.js');
const TodoList  = require('./todo_list.js');

var tasks = [
  { text : 'buy milk' },
  { text : 'do exercises' }
];

ihgrant

import App from './App';
import './index.css';
import {render} from './statemachine';

render(
    App,
    {},
    document.getElementById('root')
);

ihgrant

const sql = require('mssql');
const Promise = require('bluebird');

Promise.promisifyAll([
    sql.Connection,
]);

const createConnection = connectionOptions => {
    const connection = new sql.Connection(connectionOptions);
    return connection.connectAsync().then(() => {

ihgrant

const server = new WebSocket("ws://localhost:3000");

export default const server = {
  sendmessage: () => {
    return server.onmessage = () => {}
  }
}

ihgrant

{
    "ecmaFeatures": {
        "jsx": true,
        "modules": true
    },
    "env": {
        "browser": true,
        "es6": true,
        "node": true,
        "jquery": false

ihgrant

var Question = React.createClass({
    onChangeTitle: function (e) {
        this.props.qTitleCallback(this.props.ordering, e);
    },
    onChangeType: function (e) {
        this.props.qTypeCallback(this.props.ordering, e);
    },
    render: function() {
        return (
            <div>