mxstbr

import React, { PropTypes } from 'react';
import styled from 'styled-components'

const Wrapper = styled.div`
  // styles here that used to be for .test
`

const Label = styled.label`
  // label styles here
`

mxstbr

// There's two ways to use Tachyons together with styled-components
// Both are valid, which one you use depends if you want to always apply a tachyons class when a certain component
// is rendered or if you want to apply it for specific instances.

// 1. Use .attrs to define classNames that should always be applied to a styled component
//    Whenever you use <Component /> now it'll have both the styled-components as well as the Tachyons class
//    See the docs for more info: https://www.styled-components.com/docs/basics#attaching-additional-props
const Component = styled.div.attrs({
  className: 'bw0-l',
})`

mxstbr

Syntax Highlighting ESNext (inc. JSX)

To get syntax highlighting for ESNext (including JSX), you need to have pygments-lexer-babylon installed:

pip install pygments pygments-lexer-babylon

Now when you run pygmentize on a .jsx file it'll automatically use the new lexer! 🎉

mxstbr

/* eslint-disable no-var */
var path = require('path');
var autoprefixer = require('autoprefixer');

const MATCH_ALL_NON_RELATIVE_IMPORTS = /^\w.*$/i;

module.exports = [{
  output: {
    filename: '[name].js',
    library: 'atrium-react-plugin-beta',

mxstbr

Enable tab completion for JSX with Emmet in Atom

This guide assumes you have the emmet and language-babel packages already installed in Atom

1. Open the keymap.cson file by clicking on Atom -> Keymap… in the menu bar
2. Add these lines of code to your keymap:

'atom-text-editor[data-grammar~="jsx"]:not([mini])':

mxstbr

made with esnextbin

mxstbr

made with esnextbin

mxstbr

We're excited to have you attend one of our workshops! Here's a JavaScript (re)fresher to help you get up-to-speed on some features of the language we'll be using.

Let and Const

JavaScript has always had var:

var name = 'Ryan'

mxstbr

NOTE: Sokra confirmed I had a misunderstanding, Webpack is still a static build tool and the below won't work. It's still a nice concept though...

With webpack 1, code splitting react-router routes is quite tedious. It requires us to repeat the getComponent function over and over again. (See here for an explanation how it works with webpack 1)

Example:

<Router history={history}>
  <Route
    path="/"

mxstbr

Keybase proof

I hereby claim:

• I am mxstbr on github.
• I am mxstbr (https://keybase.io/mxstbr) on keybase.
• I have a public key whose fingerprint is DF86 64CE 0ECF A8CA F8EB 3919 DAE5 1ACA D765 65B6

To claim this, I am signing this object: