appwebtech/3_props.html

## 3_props.html
<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>
<!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">
import React from 'react';
import ReactDOM from 'react-dom';

// Props are ideal as they pass data from Parent to Child components and they are accessed by injection

const Welcome = ((props) =>
	React.createElement("div", null,
	React.createElement("h4", null, "Welcome to my homepage."),
	React.createElement("p", null, "My names are Mr. ", props.firstName, " ", props.lastName, ".")
	)
 )

const App = (() => {
	return (
		React.createElement("div", null,
			React.createElement(Welcome, {firstName: "Joe", lastName: "Doe"}),
			React.createElement(Welcome, {firstName: "Jane", lastName: "Doe"})
		)
	)
});

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


<script id="jsbin-source-javascript" type="text/javascript">import React from 'react';
import ReactDOM from 'react-dom';

// Props are ideal as they pass data from Parent to Child components and they are accessed by injection

const Welcome = ((props) =>
	<div>
	<h4>Welcome to my homepage.</h4>
	<p>My names are Mr. {props.firstName} {props.lastName}.</p>
	</div>
 )

const App = (() => {
	return (
		<div>
			<Welcome firstName="Joe" lastName="Doe"/>
			<Welcome firstName="Jane" lastName="Doe"/>
		</div>
	)
});

ReactDOM.render(
	<App/>,
	document.getElementById('app')
	);</script></body>
</html>

## jsbin.untitled.js
import React from 'react';
import ReactDOM from 'react-dom';

// Props are ideal as they pass data from Parent to Child components and they are accessed by injection

const Welcome = ((props) =>
	React.createElement("div", null,
	React.createElement("h4", null, "Welcome to my homepage."),
	React.createElement("p", null, "My names are Mr. ", props.firstName, " ", props.lastName, ".")
	)
 )

const App = (() => {
	return (
		React.createElement("div", null,
			React.createElement(Welcome, {firstName: "Joe", lastName: "Doe"}),
			React.createElement(Welcome, {firstName: "Jane", lastName: "Doe"})
		)
	)
});

ReactDOM.render(
	React.createElement(App, null),
	document.getElementById('app')
	);
	<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>
	<!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">
	import React from 'react';
	import ReactDOM from 'react-dom';

	// Props are ideal as they pass data from Parent to Child components and they are accessed by injection

	const Welcome = ((props) =>
	React.createElement("div", null,
	React.createElement("h4", null, "Welcome to my homepage."),
	React.createElement("p", null, "My names are Mr. ", props.firstName, " ", props.lastName, ".")
	)
	)

	const App = (() => {
	return (
	React.createElement("div", null,
	React.createElement(Welcome, {firstName: "Joe", lastName: "Doe"}),
	React.createElement(Welcome, {firstName: "Jane", lastName: "Doe"})
	)
	)
	});

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



	<script id="jsbin-source-javascript" type="text/javascript">import React from 'react';
	import ReactDOM from 'react-dom';

	// Props are ideal as they pass data from Parent to Child components and they are accessed by injection

	const Welcome = ((props) =>
	<div>
	<h4>Welcome to my homepage.</h4>
	<p>My names are Mr. {props.firstName} {props.lastName}.</p>
	</div>
	)

	const App = (() => {
	return (
	<div>
	<Welcome firstName="Joe" lastName="Doe"/>
	<Welcome firstName="Jane" lastName="Doe"/>
	</div>
	)
	});

	ReactDOM.render(
	<App/>,
	document.getElementById('app')
	);</script></body>
	</html>