Skip to content

Instantly share code, notes, and snippets.

View ericelliott's full-sized avatar
💭
https://leanpub.com/composingsoftware

Eric Elliott ericelliott

💭
https://leanpub.com/composingsoftware
6.5k followers · 39 following
View GitHub Profile
@ericelliott
ericelliott / hello-world.js
Last active August 29, 2015 14:21
React Hello World
const Hello = function () {
return {
render () {
return (
<p>Hello, World!</p>
);
}
};
@ericelliott
ericelliott / hello-world.html
Created May 23, 2015 23:51
React Hello World HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<div id="content"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
@ericelliott
ericelliott / hello-word.js
Last active August 29, 2015 14:21
Hello, word!
const Hello = function (props) {
return {
props, // set props
render () {
// get `word` from props obj with
// es6 destructuring:
@ericelliott
ericelliott / hello-word.html
Created May 24, 2015 01:06
Hello word HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<div id="content"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
@ericelliott
ericelliott / interactive-hello.html
Created May 28, 2015 02:42
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<div id="content"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react.js"></script>
<script src="/app-client.js"></script>
@ericelliott
ericelliott / interactive-hello.jsx
Created May 28, 2015 02:44
<p>Hello,&nbsp;
<span
style = { styles.displayMode }
onClick = { () => setMode('edit') }
>{ word }!</span>
<input
ref = "wordInput"
style = { styles.editMode }
placeholder = { word }
onKeyUp = { onKeyUp } />
@ericelliott
ericelliott / interactive-hello-styles.js
Created May 28, 2015 02:47
const styles = {
displayMode: {
display: (mode === 'display') ? 'inline' : 'none'
},
editMode: {
display: (mode === 'edit') ? 'inline' : 'none'
}
};
@ericelliott
ericelliott / interactive-hello-onKeyUp.js
Created May 28, 2015 02:57
const onKeyUp = function (e) {
if (e.key !== 'Enter') return;
setWord(e.target.value);
setMode('display');
};
@ericelliott
ericelliott / hello-component.js
Last active August 29, 2015 14:22
const helloFactory = function ({ React }) {
const {
string,
func
} = React.PropTypes;
return function Hello (props) {
// React wants propTypes
// to be static.
@ericelliott
ericelliott / hello-interactive-app-client.js
Last active August 29, 2015 14:22
import helloFactory from '../source/hello';
const Hello = helloFactory({ React });
let word = 'world';
let mode = 'display';
let render;
const actions = {
setWord (w) {