Ramana Venkata vramana

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

[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

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;

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.

	// 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){

	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')
	})

	import React from 'react'

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

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

	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}>

	#!/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)