Skip to content

Instantly share code, notes, and snippets.


Alan B Smith alanbsmith

View GitHub Profile
View gist:963c7214e01401c3f78f
a = [1,4,9]
b = [2,3,5]
c = [6,7,8]
=> [1, 2, 3, 4, 5, 6, 7, 8, 9]
View gist:c2a86f683e673b0bfba5
  1. What's the difference between a cookie and a session?
  2. What's serialization and how does it come into play with cookies?
  3. Can a cookie be shared by more than one user? How/why?
  4. What would it mean to store a shopping cart in a cookie?
  5. What advantages/disadvantages are there between cookie-stored carts and database-stored carts?

Understanding React


This document is not a tutorial. It's intended to provide some context for understanding ReactJS, some helpful information on some its functionality, and how to get started.

This is a 'living doc' that will be continually updated and revised.

Some Context: A Brief History of the Web

The Internet was originally created as a means to electronically share information via static files. This is the first website ever. As you can see, there's not much there. It's a static page, with some links to other pages. No JavaScript or database, just some HTML content. However, as the web became more popular, people began to discover new uses for it. We created ways to incorporate styles and images with CSS. This is a good example.

View react-webpack-rails dependencies.json
"dependencies": {
"babel-core": "^6.7.7",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"classnames": "^2.2.5",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"webpack": "^1.13.0"
View webpack.config.js for react-webpack-rails
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: [
module: {
loaders: [
{ test: /\.js?$/, loader: 'babel', exclude: /node_modules/ }
View react_helper.rb
require 'json'
module ReactHelper
def react_component(component_name, props = {})
class: 'react-component-target',
data: {
View assets.rake
namespace :assets do
task :precompile => :webpack
task :webpack do
sh "npm install"
sh "./node_modules/.bin/webpack"
View index.js
import React from 'react';
import ReactDOM from 'react-dom';
// import SomeComponent from './components/SomeComponent';
// import AnotherComponent from './components/AnotherComponent';
const components = {
// Your components go here:
// 'SomeComponent': SomeComponent,
// 'AnotherComponent': AnotherComponent

React Form Validation Patterns


Basic Form Validation

We'll start with basic form validation to get a handle on how the overall pattern works. Below is a basic login form without any validation built in. We're using controlled inputs for the email and password fields.

View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
body {
background-color: #E0E6ED;
color: #1F2D3D;