samsch

let React = require('react');
let ReactDOM = require('react-dom');
let { createStore } = require('redux');
let { Provider } = require('react-redux');
let reducer = require('./RootReducer');
let App = require('./containers/App');

let SocketThing = require('socket-thing');

let store = createStore(reducer);

samsch

const React = require('react');

class NewComponent extends React.Component {
    constructor(props) {
        super(props);
        this.onMouseOver = this.onMouseOver.bind(this);
    }
    onMouseOver() {
        this.props.onMouseOver(this.props.id);
    }

samsch

const React = require('react');

const Menus = props => <div>
  {this.props.menus.map(menu=>
    <div className={this.props.openMenus.includes(menu.name) ? 'open' : ''}>
      {menu.name}{menu.children.length > 0 ? <Menus menus={menu.children} openMenus={this.props.openMenus} /> : null}
    </div>
  )}
</div>

samsch

const React = require('react');

class ButtonWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.props.onClick(this.props.id);
  }

samsch

import React from 'react';
import ReactDOM from 'react-dom';
import Router from 'routes';

ReactDOM.render(
  <Router />,
  document.body
);

samsch

1. Delete all containers

    $ docker ps -q -a | xargs docker rm
   

-q prints only the container IDs -a prints all containers

Notice that it uses xargs to issue a remove container command for each container ID

2. Delete all untagged images

samsch

    <Router history={hashHistory}>
        <Route path="/" component={Layout}>
            <IndexRoute component={Dashboard}></IndexRoute>
            <Route path="Login" component={Login}></Route>
            <Route path="accounting">
                <Route path="authorize-orders" component={AuthorizeOrders}></Route>
                <Route path="credit-transaction" component={CreditCcTransaction}></Route>
                <Route path="authorize-card" component={Sale}/>
                <Route path="authorize-card/select-invoices" component={SaleSelectInvoices}></Route>
                <Route path="void-transaction" component={VoidCcTransaction}></Route>

samsch

Specifically, read this if you are considering turning on and using pre-stage 4 features with Babel.

What are these stages?

If an item is at stage 4, it's finalized and ready to be included in the next iteration of the Javascript standard. These should always be as safe to use as current standard features. Features at stage 4 were pulled for ES2015 and ES2016 around January/Febuary of that year. It's reasonable to expect the same for ES2017, ES2018, etc.

If it's at stage 3, it shouldn't change much or at all, but it's not final. Stage 2 and lower are up for changes as needed. You can read the full process here.

If something that is implemented in Babel (pre-stage 4) is changed, or removed, what happens?

samsch

let counter = 0;
const repaint = () => React.render(<Spinner data={counter}/>, document.body);
const inc     = () => { counter += 1, repaint() };
const dec     = () => { counter -= 1, repaint() };

const Spinner = ({ counter }) => (
    <div>
        {counter}
        <button value="^" onclick={inc}/>

samsch

What's wrong with stage-0?

state-0 is highly volatile proposals, very likely to change. In other words, it's possible for every update to the preset (theoretically every tc39 meeting) to break any code which uses it. This is very true with stage-0, kinda true with stage-1, and 2-3 start to be a bit more solid (4 means it's finalized and ready for the spec).

But <boilerplate> uses it, and they're well tested!

It's not a matter of how well tested their code is, because it affects your own. It doesn't do any harm if you don't use those features, but you could accidentally use one, only to have your code break down the road after an update.

Which preset(s) should I use then? stage-1?