Tony Brown anthonybrown

Squashing Git Commits

The easy and flexible way

This method avoids merge conflicts if you have periodically pulled master into your branch. It also gives you the opportunity to squash into more than 1 commit, or to re-arrange your code into completely different commits (e.g. if you ended up working on three different features but the commits were not consecutive).

Note: You cannot use this method if you intend to open a pull request to merge your feature branch. This method requires committing directly to master.

Switch to the master branch and make sure you are up to date:

The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!

Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is

Functional JavaScript by Jesse Farmer is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Contact Jesse at [email protected] if you have any questions!

Using Git

Global Settings

Related Setup: https://gist.github.com/hofmannsven/6814278

Related Pro Tips: https://ochronus.com/git-tips-from-the-trenches/

	#!/bin/sh

	set -e
	set -x

	for package in $(npm -g outdated --parseable --depth=0 \| cut -d: -f3)
	do
	npm -g install "$package"
	done

	import React from 'react'
	import Router from 'react-router/BrowserRouter'
	import Match from 'react-router/Match'
	import Link from 'react-router/Link'
	import Redirect from 'react-router/Redirect'

	function elementInViewport(el) {
	var top = el.offsetTop
	var left = el.offsetLeft
	var width = el.offsetWidth

	import React from 'react';
	import { shallow } from 'enzyme';
	import MyComponent from '../src/my-component';

	const wrapper = shallow(<MyComponent/>);

	describe('(Component) MyComponent', () => {
	it('renders without exploding', () => {
	expect(wrapper).to.have.length(1);
	});

	// this `<Route>` component might make it possible for you to ~generally~
	// upgrade to React Router v4 w/o doing hardly anything to your app for the
	// happy path stuff.
	//
	// This definitely won't work as-is, I haven't run this code, just banged it
	// out when the thought occured to me that it might be possible.

	const { func, object } = React.PropTypes

	const Route = (route) => (

	import React, { Component } from 'react';
	import { Field, reduxForm } from 'redux-form';
	import moment from 'moment';
	import DatePicker from 'react-datepicker';
	import ReactQuill from 'react-quill';
	import MaskedInput from 'react-maskedinput';

	export const renderField = (field) => (
	<div>
	<input {...field.input} type={field.type} placeholder={field.placeholder} className="form-control" />