hartzis

//from - https://github.com/kriasoft/react-starter-kit/blob/master/docs/react-style-guide.md

//Higher-order React component example:

// withViewport.js
import React, { Component } from 'react';
import { canUseDOM } from 'react/lib/ExecutionEnvironment';

function withViewport(ComposedComponent) {
  return class WithViewport extends Component {

hartzis

atom settings

hartzis

function update(data) {
  return fetch('/api/update', {
    method: 'put',
    body: JSON.stringify(data),
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    }
  })
    .then(checkStatus)

hartzis

let router = require('express').Router();
let bodyParser = require('body-parser');

// parse application/json
router.use(bodyParser.json());

router.put('/api/update', update);

function update(req, res) {
  console.log('updating-', req.body);

hartzis

export function CartItems({items, addToCart}) {
  return (
    <div>
      <h3>Current Cart:</h3>
      {items.map((item)=>CartItem(item, addToCart))}
    </div>
  )
}

export function CartItem({name}, addToCart) {

hartzis

(OLD - not relevent anymore, es2015 updated guide will be on craftsy github soon)

React Style Guide [OLD - deprecated]

Table of Contents

• Component Setup
  • Component Naming
  • Method Organization
• Component Attributes(Props)

hartzis

import Item from './Item';

export function List ({items}) {
  return (
    <div>
      <p>Number in List: <span>{items.length}</span></p>
      {items.map(item => <Item item={item}/>)}
    </div>  
  )
}

hartzis

import test from 'tape';
import React from 'react';
import { shallow } from 'enzyme';
import List from './List';

test('empty <List/>', (t)=> {
  t.plan(1);

  const emptyList = [];
  const wrapper = shallow(<List items={emptyList} />);

hartzis

test('basic <Item/>', (t)=> {
  t.plan(1);

  const basicItem = {id: 'one'};
  const wrapper = shallow(<Item item={basicItem}/>);

  t.equal(wrapper.find('div').text(), 'one');
});

hartzis

const scientists = {
  'alan' : {
    fullname: 'Alan Mathison Turing',
    dob: {month: 6, day: 23, year: 1912},
    image: 'turing.jpg',
  },
  'grace' : {
    fullname: 'Grace Brewster Murray Hopper',
    dob: {month: 12, day: 9, year: 1906},
    image: 'hopper.jpg',