heyjohnmurray’s gists

heyjohnmurray / React dynamically generated components

Created November 23, 2015 06:51

We can create dynamic component data from sets of data

	/** @jsx React.DOM */
	var React = require('react');

	var PersonTable = React.createClass({
	getInitialState: function(){
	return {
	data: [
	{id: 1, fname: 'John', lname: 'Murray'},
	{id: 2, fname: 'Wyatt', lname: 'Murray'},
	{id: 3, fname: 'McKenzie', lname: 'Murray'}

heyjohnmurray / React composable components

Created November 23, 2015 03:44

Sample code showing how composable components look similar to OOP JS

	var BaseButton = React.createClass({
	propTypes: {
	buttonText: React.PropTypes.string.isRequired,
	buttonColor: React.PropTypes.string,
	buttonHoverColor: React.PropTypes.string,
	useSpinner: React.PropTypes.bool,
	buttonHoverTextColor: React.PropTypes.string,
	buttonLink: React.PropTypes.string
	},

heyjohnmurray / React mixins

Last active November 22, 2015 20:48

	/** @jsx React.DOM */
	var React = require('react');

	var ReactMixin = {
	componentWillMount: function(){
	console.log('will mount');
	},
	}

	var App = React.createClass({

heyjohnmurray / React accessing child properties

Created November 22, 2015 06:28

In React you can access the inner HTML or the value of a nested component using this.props.children

	var App = React.createClass({
	render: function() {
	// notice that we have the "Button" and "Heart" components
	return <Button>I <Heart /> React</Button>
	}
	});

	var Button = React.createClass({
	render: function() {
	// notice that this.props.children gave us the value of both the "Button" and the "Heart" component

heyjohnmurray / React using refs to access components

Last active November 22, 2015 06:04

This shows how you can use "ref"s as a data attribute hook for React components.

	// learn more about refs: https://facebook.github.io/react/docs/more-about-refs.html

	var App = React.createClass({
	getInitialState: function(){
	return {
	red: 0,
	green: 0,
	blue: 0
	}
	},

heyjohnmurray / React Owner Ownee relationship example

Last active November 19, 2015 23:08

This shows how a widget can call another widget

	var App = React.createClass({
	getInitialState: function() {
	return {
	text: 'this is initial state text',
	};
	},

	// update is a custom function we've created
	update: function(e) {
	this.setState({text: e.target.value});

heyjohnmurray / React update getInitialState

Last active November 19, 2015 21:44

this is how you can update getInitialState in your app.

	var App = React.createClass({
	getInitialState: function() {
	return {
	text: 'this is initial state text',
	};
	},

	// update is a custom function we've created
	update: function(e) {
	// this.setState is the key to update text in this example

heyjohnmurray / React getInitialState syntax

Created November 19, 2015 21:05

	var App = React.createClass({
	// get initial state is the key to passing info.
	getInitialState: function() {
	return {
	text: 'this is initial state text'
	};
	},
	render: function() {
	return (
	// this.state is the key to rendering the info

heyjohnmurray / React Properties Syntax

Created November 19, 2015 07:18

	// You can attach elment attributes to your app and read them in your rendered UI
	React.render(<App text="this is a text value. wow!" />, document.body);

	// 'text' in this example can now be passed from your app logic to your rendered UI view.


	// basic properties instance
	var App = React.createClass({
	render: function() {
	var text = this.props.text;

heyjohnmurray / basic react component syntax

Last active November 22, 2015 20:50

John Murray heyjohnmurray