Ramana Venkata vramana

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

Hang on, I'm not saying flux is dead, or that redux isn't amazing.

Okay ...

Most everybody is familiar with flux by now:

User Interaction --event data-->
  Action Creator --action-->
 Dispatcher --payload--&gt;

[based on a true story]

So. Your friend's about to teach you how to make a website. Great!

You make a file, and you save it as 'index.html'. Why it's called 'index' isn't really explained to you, but whatever.

You type the following.

hello world

With styled-components into the future

Preprocessing is dead, long live preprocessing!

This is a CFP for ReactiveConf 2017's open call for Lightning talks. If you'd like to see this talk become a reality, please ⭐ star this gist. #ReactiveConf

	#!/usr/bin/env ruby
	# Invoke with `ruby md2cre.rb filename.md`
	#
	# Setup: `gem install redcarpet`

	require 'rubygems'
	require 'redcarpet'

	class Creole < Redcarpet::Render::Base
	def normal_text(text)

	import React, { PropTypes } from 'react';
	import { TransitionMotion, spring } from 'react-motion';

	/**
	* One example of using react-motion (0.3.0) within react-router (v1.0.0-rc3).
	*
	* Usage is simple, and really only requires two things–both of which are
	* injected into your app via react-router–pathname and children:
	*
	* <RouteTransition pathname={this.props.pathname}>

	import React from 'react'

	export default class Transition extends React.Component{
	static contextTypes = {
	router: React.PropTypes.object
	};

	constructor(props){
	super()
	let opacity = 1

	if (typeof Promise === 'undefined') {
	require.ensure([], (require) => {
	require('imports?this=>window!es6-promise')
	})
	}

	if (typeof fetch === 'undefined') {
	require.ensure([], (require) => {
	require('imports?self=>window!whatwg-fetch')
	})

	// this is a generic runner for iterators
	// for every yield, it checks to see if any time is remaining
	// on the idle loop, and executes more work if so.
	// else, it queues up for the next idle period

	function go(it, callback){
	requestIdleCallback(deadline => {
	let val = it.next()
	while(!val.done){
	if(deadline.timeRemaining() <= 0){