danawoodman · March 9, 2024 00:32 · RobKohr · Oct 23, 2016 · ghost · Nov 14, 2016
diff --git a/0-react-hello-world.md b/0-react-hello-world.md
diff --git a/1-base.html b/1-base.html
 <!DOCTYPE HTML>
 <html>
  <head>
    <meta charset="utf-8">
    <title>React Hello World</title>
  </head>
  <body>
    
    <!--
    The recommended approach in React is to use a container
    dive to load your react code into, rather than using `document.body`.
    
    This can be any element or tag name, just don't use `document.body`
    if you can avoid it.
    -->
    <div id='root'></div>
    
    <!--
    For ease of use, we are including the React, ReactDOM and Babel CDN
    builds to make getting started as fast as possible.
    
    In production, you'll want to instead look at using something 
    like Gulp, Grunt or WebPack (my personal recommendation) 
    to compile JSX into JavaScript. Also, check out:
    http://facebook.github.io/react/docs/tooling-integration.html
    -->
    <script src="https://fb.me/react-15.0.1.js"></script>
    <script src="https://fb.me/react-dom-15.0.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    
    <!--
    This is where you link to your React code. Can be .js or .jsx 
    extension, doesn't really matter.
    -->
    <script src="scripts.js" type="text/babel"></script>
  </body>
 </html>
diff --git a/2-basic.js b/2-basic.js
 /*
 The simplist React component ever.

 It just renders an H1 tag into the body of the page. Since
 JSX is basically just HTML, you can use any valid tag you want.
 */

 ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));
diff --git a/3-simple-component.js b/3-simple-component.js
 /*
 Creating a component

 The most simple component has a `render` method that returns some
 JSX. `props` are attributes that are passed into the component 
 when you instantiate it. 

 One caveat is that `render` must return a single parent element;
 you can't return multiple adjacent JSX tags but must wrap them
 in one parent element.
 */

 var HelloMessage = React.createClass({
  render: function () {
    return <h1>Hello {this.props.message}!</h1>;
  }
 });

 ReactDOM.render(<HelloMessage message="World" />, document.getElementById('root'));
diff --git a/4-internal-state.js b/4-internal-state.js
 /*
 Managing internal state

 Sets the intial state of the component and then,
 when a link is clicked, updates the state.

 When the state updates, the component intelligently 
 and efficiently re-renders.

 Note that the `onClick` is the same as the JavaScript
 `onClick` event handler. There are many common browser
 events that are supported by React. See them all at:
 http://facebook.github.io/react/docs/events.html
 */

 var ToggleText = React.createClass({
  getInitialState: function () {
    return {
      showDefault: true
    }
  },
  
  toggle: function (e) {
    // Prevent following the link.
    e.preventDefault();
    
    // Invert the chosen default.
    // This will trigger an intelligent re-render of the component.
    this.setState({ showDefault: !this.state.showDefault })
  },
  
  render: function () {
    // Default to the default message.
    var message = this.props.default;
    
    // If toggled, show the alternate message.
    if (!this.state.showDefault) {
      message = this.props.alt;
    }
    
    return (
      <div>
        <h1>Hello {message}!</h1>
        <a href="" onClick={this.toggle}>Toggle</a>
      </div>
    );
  }
 });

 ReactDOM.render(<ToggleText default="World" alt="Mars" />, document.getElementById('root'));
diff --git a/5-combining-components.js b/5-combining-components.js
 /*
 Combining components together

 The most fundamental and useful part of React is that
 you can create any number of components and nest them
 just like you would any HTML tag. You pass down data
 to your components from parent components in a one-way
 data flow.

 Note: If you use something like Flux/Reflux you have a bit
 power when it comes to data storage and event handling.
 Using a Flux-like framework with React is very helpful.
 */

 var ProductItem = React.createClass({
  render: function () {
    return (
      <tr>
        <td>{this.props.name}</td>
        <td>{this.props.price}</td>
      </tr>
    );
  }
 });

 var ProductList = React.createClass({
  render: function () {
    var products = this.props.products.map(function (product, index) {
      return (
        <ProductItem
          key={index}
          name={product.name}
          price={product.price}
        />
      );
    });
    
    return (
      <table>
        {products}
      </table>
    );
  }
 });

 // Could come from an API, LocalStorage, another component, etc...
 var products = [
  { name: 'Toast', price: 1499 },
  { name: 'Bacon', price: 3245 },
  { name: 'Coffee', price: 300 }
 ];

 ReactDOM.render(<ProductList products={products} />, document.getElementById('root'));
diff --git a/6-whole-shebang.js b/6-whole-shebang.js
 /*
 Whole Shebang

 This example shows most of the commonly used React functionality including:

 - Component lifecycle events
 - Mixins
 - Default props
 - Prop validation
 - Looping
 - DOM refs
 - Browser events

 See more here lifecycle events here:
 http://facebook.github.io/react/docs/component-specs.html

 This is by no means how you should write React components, it is just meant to illustrate various features of React.
 */

 /*
 Mixins are just objects with properties that are merged with the compoent
 they are included in. 

 See: http://facebook.github.io/react/docs/reusable-components.html#mixins
 */
 var MyMixin = {
  queryAPIorSomething: function (url, options, successCallback) {
    // Do some API magic here...
  },
  
  // This does not overwrite the components 
  // `componentWillUnmount` method but will
  // be called along side it.
  componetWillUnmount: function () {
    // Abor XHR request or something else...
  }
 };


 var WholeShebang = React.createClass({
  mixins: [MyMixin],
  
  propTypes: {
    // This will log a message on the console if 
    // items is not defined or if the wrong type
    // is supplied.
    items: React.PropTypes.array.isRequired,
    
    // This will only log if the type is wrong.
    prefix: React.PropTypes.string,
  },
  
  // Sane defaults for your component...
  getDefaultProps: function () {
    return {
      prefix: 'Hello'
    }
  },

  getInitialState: function () {
    return {
      showDefault: false,
    }
  },

  componentWillMount: function () {
    // Here you could setState, fetch data from a server or something else...
    this.queryAPIorSomething('path/to/api.json', {} , function (data) {
      this.setState({ data: data });
    }.bind(this));
  },
  
  componentDidMount: function () {
    // You now have access to the DOM:
    console.log(ReactDOM.findDOMNode(this).innerHTML);
    
    // ... or to component references:
    console.log(this.refs.foobar.innerHTML);
  },
  
  componentWillUpdate: function () {
    console.log('component about to update!');
  },
  
  componentDidUpdate: function () {
    console.log('component updated!');
    // DOM is available here...
  },
  
  componentWillUnmount: function () {
    // Use this to tear down any event listeners
    // or do other cleanup before the compoennt is
    // destroyed.
    console.log('component will unmount!');
  },
  
  shouldComponentUpdate: function () {
    // This is called when state/props changed and is 
    // an opportunity where you can return false if
    // you don't want the component to update for
    // some reason.
    return true;
  },
  
  toggle: function (e) {
    // Prevent following the link.
    e.preventDefault();
    
    // Invert the chosen default.
    // This will trigger an intelligent re-render of the component.
    this.setState({ showDefault: !this.state.showDefault })
  },
  
  render: function () {
    var items = this.props.items.map(function (item, index) {
      // Any time you construct a list of elements or components,
      // you need to set the `key` so React can more easily work
      // with the DOM.
      return <li key={index}>{item}</li>;
    });
    
    return (
      <div>
        <span ref="foobar">
          Show default: {this.state.showDefault ? 'True' : 'False'}
        </span>
        <ul>
          {items}
        </ul>
        <a href="" onClick={this.toggle}>Toggle</a>
    </div>
    );
  }
 });

 ReactDOM.render(
  <WholeShebang items={['Bob', 'Mary', 'Sally']} />,
  document.querySelector('.some-tag') // use other selectors, jQuery or something else to find your target on the page if you want
 );
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<title>React Hello World</title>
	</head>
	<body>

	<!--
	The recommended approach in React is to use a container
	dive to load your react code into, rather than using `document.body`.

	This can be any element or tag name, just don't use `document.body`
	if you can avoid it.
	-->
	<div id='root'></div>

	<!--
	For ease of use, we are including the React, ReactDOM and Babel CDN
	builds to make getting started as fast as possible.

	In production, you'll want to instead look at using something
	like Gulp, Grunt or WebPack (my personal recommendation)
	to compile JSX into JavaScript. Also, check out:
	http://facebook.github.io/react/docs/tooling-integration.html
	-->
	<script src="https://fb.me/react-15.0.1.js"></script>
	<script src="https://fb.me/react-dom-15.0.1.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

	<!--
	This is where you link to your React code. Can be .js or .jsx
	extension, doesn't really matter.
	-->
	<script src="scripts.js" type="text/babel"></script>
	</body>
	</html>
	/*
	The simplist React component ever.

	It just renders an H1 tag into the body of the page. Since
	JSX is basically just HTML, you can use any valid tag you want.
	*/

	ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));
	/*
	Creating a component

	The most simple component has a `render` method that returns some
	JSX. `props` are attributes that are passed into the component
	when you instantiate it.

	One caveat is that `render` must return a single parent element;
	you can't return multiple adjacent JSX tags but must wrap them
	in one parent element.
	*/

	var HelloMessage = React.createClass({
	render: function () {
	return <h1>Hello {this.props.message}!</h1>;
	}
	});

	ReactDOM.render(<HelloMessage message="World" />, document.getElementById('root'));
	/*
	Managing internal state

	Sets the intial state of the component and then,
	when a link is clicked, updates the state.

	When the state updates, the component intelligently
	and efficiently re-renders.

	Note that the `onClick` is the same as the JavaScript
	`onClick` event handler. There are many common browser
	events that are supported by React. See them all at:
	http://facebook.github.io/react/docs/events.html
	*/

	var ToggleText = React.createClass({
	getInitialState: function () {
	return {
	showDefault: true
	}
	},

	toggle: function (e) {
	// Prevent following the link.
	e.preventDefault();

	// Invert the chosen default.
	// This will trigger an intelligent re-render of the component.
	this.setState({ showDefault: !this.state.showDefault })
	},

	render: function () {
	// Default to the default message.
	var message = this.props.default;

	// If toggled, show the alternate message.
	if (!this.state.showDefault) {
	message = this.props.alt;
	}

	return (
	<div>
	<h1>Hello {message}!</h1>
	<a href="" onClick={this.toggle}>Toggle</a>
	</div>
	);
	}
	});

	ReactDOM.render(<ToggleText default="World" alt="Mars" />, document.getElementById('root'));
	/*
	Combining components together

	The most fundamental and useful part of React is that
	you can create any number of components and nest them
	just like you would any HTML tag. You pass down data
	to your components from parent components in a one-way
	data flow.

	Note: If you use something like Flux/Reflux you have a bit
	power when it comes to data storage and event handling.
	Using a Flux-like framework with React is very helpful.
	*/

	var ProductItem = React.createClass({
	render: function () {
	return (
	<tr>
	<td>{this.props.name}</td>
	<td>{this.props.price}</td>
	</tr>
	);
	}
	});

	var ProductList = React.createClass({
	render: function () {
	var products = this.props.products.map(function (product, index) {
	return (
	<ProductItem
	key={index}
	name={product.name}
	price={product.price}
	/>
	);
	});

	return (
	<table>
	{products}
	</table>
	);
	}
	});

	// Could come from an API, LocalStorage, another component, etc...
	var products = [
	{ name: 'Toast', price: 1499 },
	{ name: 'Bacon', price: 3245 },
	{ name: 'Coffee', price: 300 }
	];

	ReactDOM.render(<ProductList products={products} />, document.getElementById('root'));
	/*
	Whole Shebang

	This example shows most of the commonly used React functionality including:

	- Component lifecycle events
	- Mixins
	- Default props
	- Prop validation
	- Looping
	- DOM refs
	- Browser events

	See more here lifecycle events here:
	http://facebook.github.io/react/docs/component-specs.html

	This is by no means how you should write React components, it is just meant to illustrate various features of React.
	*/

	/*
	Mixins are just objects with properties that are merged with the compoent
	they are included in.

	See: http://facebook.github.io/react/docs/reusable-components.html#mixins
	*/
	var MyMixin = {
	queryAPIorSomething: function (url, options, successCallback) {
	// Do some API magic here...
	},

	// This does not overwrite the components
	// `componentWillUnmount` method but will
	// be called along side it.
	componetWillUnmount: function () {
	// Abor XHR request or something else...
	}
	};


	var WholeShebang = React.createClass({
	mixins: [MyMixin],

	propTypes: {
	// This will log a message on the console if
	// items is not defined or if the wrong type
	// is supplied.
	items: React.PropTypes.array.isRequired,

	// This will only log if the type is wrong.
	prefix: React.PropTypes.string,
	},

	// Sane defaults for your component...
	getDefaultProps: function () {
	return {
	prefix: 'Hello'
	}
	},

	getInitialState: function () {
	return {
	showDefault: false,
	}
	},

	componentWillMount: function () {
	// Here you could setState, fetch data from a server or something else...
	this.queryAPIorSomething('path/to/api.json', {} , function (data) {
	this.setState({ data: data });
	}.bind(this));
	},

	componentDidMount: function () {
	// You now have access to the DOM:
	console.log(ReactDOM.findDOMNode(this).innerHTML);

	// ... or to component references:
	console.log(this.refs.foobar.innerHTML);
	},

	componentWillUpdate: function () {
	console.log('component about to update!');
	},

	componentDidUpdate: function () {
	console.log('component updated!');
	// DOM is available here...
	},

	componentWillUnmount: function () {
	// Use this to tear down any event listeners
	// or do other cleanup before the compoennt is
	// destroyed.
	console.log('component will unmount!');
	},

	shouldComponentUpdate: function () {
	// This is called when state/props changed and is
	// an opportunity where you can return false if
	// you don't want the component to update for
	// some reason.
	return true;
	},

	toggle: function (e) {
	// Prevent following the link.
	e.preventDefault();

	// Invert the chosen default.
	// This will trigger an intelligent re-render of the component.
	this.setState({ showDefault: !this.state.showDefault })
	},

	render: function () {
	var items = this.props.items.map(function (item, index) {
	// Any time you construct a list of elements or components,
	// you need to set the `key` so React can more easily work
	// with the DOM.
	return <li key={index}>{item}</li>;
	});

	return (
	<div>
	<span ref="foobar">
	Show default: {this.state.showDefault ? 'True' : 'False'}
	</span>
	<ul>
	{items}
	</ul>
	<a href="" onClick={this.toggle}>Toggle</a>
	</div>
	);
	}
	});

	ReactDOM.render(
	<WholeShebang items={['Bob', 'Mary', 'Sally']} />,
	document.querySelector('.some-tag') // use other selectors, jQuery or something else to find your target on the page if you want
	);