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

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

export function CartItem({name}, addToCart) {

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

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

hartzis

atom settings

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

let multiparty = require('multiparty');
let fs = require('fs');

function saveImage(req, res) {
  let form = new multiparty.Form();

  form.parse(req, (err, fields, files) => {

    let {path: tempPath, originalFilename} = files.imageFile[0];
    let copyToPath = "./images/" + originalFilename;

hartzis

uploadImage(imageFile) {
  return new Promise((resolve, reject) => {
    let imageFormData = new FormData();

    imageFormData.append('imageFile', imageFile);
    
    var xhr = new XMLHttpRequest();
    
    xhr.open('post', '/upload', true);
    

hartzis

// https://codepen.io/hartzis/pen/VvNGZP
class ImageUpload extends Component {
  constructor(props) {
    super(props);
    this.state = {
      file: '',
      imagePreviewUrl: ''
    };
    this._handleImageChange = this._handleImageChange.bind(this);
    this._handleSubmit = this._handleSubmit.bind(this);

hartzis

// From - http://stackoverflow.com/questions/24335821/can-i-fastclick-reactjs-running-in-cordova/24345469#24345469

// or use

// https://github.com/zilverline/react-tap-event-plugin

React.initializeTouchEvents(true)

var TouchClick = React.createClass({