appwebtech/2_Making_Custom_Components.html

## 2_Making_Custom_Components.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
// Making Custom Components (within main.js file)

import React from 'react';
import ReactDOM from 'react-dom';

function Bella(){
	return (
		React.createElement("div", null,
			React.createElement("h3", null, "A lil bit rainy today in Manchester"),
			React.createElement("h5", null, "The panoramic view is amazing from this glass office window.")
		)
	)
}

ReactDOM.render(
	React.createElement(Bella, null),
	document.getElementById('app')
	);
</script>


<script id="jsbin-source-javascript" type="text/javascript">// Making Custom Components (within main.js file)

import React from 'react';
import ReactDOM from 'react-dom';

function Bella(){
	return (
		<div>
			<h3>A lil bit rainy today in Manchester</h3>
			<h5>The panoramic view is amazing from this glass office window.</h5>
		</div>
	)
}

ReactDOM.render(
	<Bella/>,
	document.getElementById('app')
	);</script></body>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
</html>


// Some more HTML in a new component

import React from 'react';
import ReactDOM from 'react-dom';

function Bella(){
//	let jina = "Joe",
	let hobbies = {
		first: "Painting iPhones with toothbrushes",
		second: "Taking photos of painted iPhones",
		third: "Smiling of the accomplishments done"
	}
	return (
		<div>
			<p>My hobbies are: {hobbies.first}, {hobbies.second}, and {hobbies.third}</p>
		</div>
	)
}

ReactDOM.render(
	<Bella/>,
	document.getElementById('app')
	);

## jsbin.cucosikoru.js
// Making Custom Components (within main.js file)

import React from 'react';
import ReactDOM from 'react-dom';

function Bella(){
	return (
		React.createElement("div", null,
			React.createElement("h3", null, "A lil bit rainy today in Manchester"),
			React.createElement("h5", null, "The panoramic view is amazing from this glass office window.")
		)
	)
}

ReactDOM.render(
	React.createElement(Bella, null),
	document.getElementById('app')
	);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>

	<script id="jsbin-javascript">
	// Making Custom Components (within main.js file)

	import React from 'react';
	import ReactDOM from 'react-dom';

	function Bella(){
	return (
	React.createElement("div", null,
	React.createElement("h3", null, "A lil bit rainy today in Manchester"),
	React.createElement("h5", null, "The panoramic view is amazing from this glass office window.")
	)
	)
	}

	ReactDOM.render(
	React.createElement(Bella, null),
	document.getElementById('app')
	);
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">// Making Custom Components (within main.js file)

	import React from 'react';
	import ReactDOM from 'react-dom';

	function Bella(){
	return (
	<div>
	<h3>A lil bit rainy today in Manchester</h3>
	<h5>The panoramic view is amazing from this glass office window.</h5>
	</div>
	)
	}

	ReactDOM.render(
	<Bella/>,
	document.getElementById('app')
	);</script></body>
	<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
	<script src="https://fb.me/react-dom-15.1.0.js"></script>
	</html>



	// Some more HTML in a new component

	import React from 'react';
	import ReactDOM from 'react-dom';

	function Bella(){
	// let jina = "Joe",
	let hobbies = {
	first: "Painting iPhones with toothbrushes",
	second: "Taking photos of painted iPhones",
	third: "Smiling of the accomplishments done"
	}
	return (
	<div>
	<p>My hobbies are: {hobbies.first}, {hobbies.second}, and {hobbies.third}</p>
	</div>
	)
	}

	ReactDOM.render(
	<Bella/>,
	document.getElementById('app')
	);