appwebtech/15_fetching_data_from_file.html

## 15_fetching_data_from_file.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<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>

<script id="jsbin-javascript">
// Instead of the usual way of just using components, I will mock-up some data and simulate it in getting it fetched from a server.
// I'll use https://mockaroo.com/ to grab some random data in JSON

// app.js
import React from 'react';
import ReactDOM from 'react-dom';

import Layout from './components/Layout';

import names from '../../mock-data';

// The convenient way to use React Classes.
class App extends React.Component {


	render() {
		return (
		React.createElement("div", null,
			React.createElement(Layout, {names: names})
		)
		)
	}
}


ReactDOM.render(
	React.createElement(App, null),
	document.getElementById('app')
	);


// NameList.js
import React from 'react';

export default class NameList extends React.Component {
  constructor() {
    super();
    this.state = {
      names: []
    }
  }

  componentWillMount() {
    // console.log(this.props.names);
    this.setState({
      names: this.props.names
    })
  }

  render() {
    let {names} = this.state;
    return (
      React.createElement("div", null,
        names.map((name) => React.createElement("h3", {key: name.id}, name.first_name, " ", name.last_name))

      )
    )
  }
}

// Layout.js
import React from 'react';

import NameList from './NameList';

import Timer from './Timer';


export default class Layout extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
      React.createElement("div", null,
        React.createElement("h1", null, "Just some React code..."),
        React.createElement("h3", null, "Just switched to the Atom text editor"),
        React.createElement("p", null, "Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?"),
          React.createElement(Timer, null),
          React.createElement(NameList, {names: this.props.names})

      )
   )
  }
}
</script>


<script id="jsbin-source-javascript" type="text/javascript">// Instead of the usual way of just using components, I will mock-up some data and simulate it in getting it fetched from a server.
// I'll use https://mockaroo.com/ to grab some random data in JSON

// app.js
import React from 'react';
import ReactDOM from 'react-dom';

import Layout from './components/Layout';

import names from '../../mock-data';

// The convenient way to use React Classes.
class App extends React.Component {


	render() {
		return (
		<div>
			<Layout names={names} />
		</div>
		)
	}
}


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


// NameList.js
import React from 'react';

export default class NameList extends React.Component {
  constructor() {
    super();
    this.state = {
      names: []
    }
  }

  componentWillMount() {
    // console.log(this.props.names);
    this.setState({
      names: this.props.names
    })
  }

  render() {
    let {names} = this.state;
    return (
      <div>
        {names.map((name) => <h3 key={name.id}>{name.first_name} {name.last_name}</h3>)}

      </div>
    )
  }
}

// Layout.js
import React from 'react';

import NameList from './NameList';

import Timer from './Timer';


export default class Layout extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div>
        <h1>Just some React code...</h1>
        <h3>Just switched to the Atom text editor</h3>
        <p>Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?</p>
          <Timer />
          <NameList names={this.props.names} />

      </div>
   )
  }
}


</script></body>
</html>

## jsbin.paluhaxigi.js
// Instead of the usual way of just using components, I will mock-up some data and simulate it in getting it fetched from a server.
// I'll use https://mockaroo.com/ to grab some random data in JSON
// File data saved within the app's root file (mock-data.js), see project app on github

// app.js
import React from 'react';
import ReactDOM from 'react-dom';

import Layout from './components/Layout';

import names from '../../mock-data';

// The convenient way to use React Classes.
class App extends React.Component {


	render() {
		return (
		React.createElement("div", null,
			React.createElement(Layout, {names: names})
		)
		)
	}
}


ReactDOM.render(
	React.createElement(App, null),
	document.getElementById('app')
	);


// NameList.js
import React from 'react';

export default class NameList extends React.Component {
  constructor() {
    super();
    this.state = {
      names: []
    }
  }

  componentWillMount() {
    // console.log(this.props.names);
    this.setState({
      names: this.props.names
    })
  }

  render() {
    let {names} = this.state;
    return (
      React.createElement("div", null,
        names.map((name) => React.createElement("h3", {key: name.id}, name.first_name, " ", name.last_name))

      )
    )
  }
}

// Layout.js
import React from 'react';

import NameList from './NameList';

import Timer from './Timer';


export default class Layout extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
      React.createElement("div", null,
        React.createElement("h1", null, "Just some React code..."),
        React.createElement("h3", null, "Just switched to the Atom text editor"),
        React.createElement("p", null, "Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?"),
          React.createElement(Timer, null),
          React.createElement(NameList, {names: this.props.names})

      )
   )
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<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>

	<script id="jsbin-javascript">
	// Instead of the usual way of just using components, I will mock-up some data and simulate it in getting it fetched from a server.
	// I'll use https://mockaroo.com/ to grab some random data in JSON

	// app.js
	import React from 'react';
	import ReactDOM from 'react-dom';

	import Layout from './components/Layout';

	import names from '../../mock-data';

	// The convenient way to use React Classes.
	class App extends React.Component {


	render() {
	return (
	React.createElement("div", null,
	React.createElement(Layout, {names: names})
	)
	)
	}
	}


	ReactDOM.render(
	React.createElement(App, null),
	document.getElementById('app')
	);


	// NameList.js
	import React from 'react';

	export default class NameList extends React.Component {
	constructor() {
	super();
	this.state = {
	names: []
	}
	}

	componentWillMount() {
	// console.log(this.props.names);
	this.setState({
	names: this.props.names
	})
	}

	render() {
	let {names} = this.state;
	return (
	React.createElement("div", null,
	names.map((name) => React.createElement("h3", {key: name.id}, name.first_name, " ", name.last_name))

	)
	)
	}
	}

	// Layout.js
	import React from 'react';

	import NameList from './NameList';

	import Timer from './Timer';


	export default class Layout extends React.Component {
	constructor() {
	super();
	}

	render() {
	return (
	React.createElement("div", null,
	React.createElement("h1", null, "Just some React code..."),
	React.createElement("h3", null, "Just switched to the Atom text editor"),
	React.createElement("p", null, "Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?"),
	React.createElement(Timer, null),
	React.createElement(NameList, {names: this.props.names})

	)
	)
	}
	}
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">// Instead of the usual way of just using components, I will mock-up some data and simulate it in getting it fetched from a server.
	// I'll use https://mockaroo.com/ to grab some random data in JSON

	// app.js
	import React from 'react';
	import ReactDOM from 'react-dom';

	import Layout from './components/Layout';

	import names from '../../mock-data';

	// The convenient way to use React Classes.
	class App extends React.Component {


	render() {
	return (
	<div>
	<Layout names={names} />
	</div>
	)
	}
	}


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


	// NameList.js
	import React from 'react';

	export default class NameList extends React.Component {
	constructor() {
	super();
	this.state = {
	names: []
	}
	}

	componentWillMount() {
	// console.log(this.props.names);
	this.setState({
	names: this.props.names
	})
	}

	render() {
	let {names} = this.state;
	return (
	<div>
	{names.map((name) => <h3 key={name.id}>{name.first_name} {name.last_name}</h3>)}

	</div>
	)
	}
	}

	// Layout.js
	import React from 'react';

	import NameList from './NameList';

	import Timer from './Timer';


	export default class Layout extends React.Component {
	constructor() {
	super();
	}

	render() {
	return (
	<div>
	<h1>Just some React code...</h1>
	<h3>Just switched to the Atom text editor</h3>
	<p>Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?</p>
	<Timer />
	<NameList names={this.props.names} />

	</div>
	)
	}
	}





	</script></body>
	</html>
	// Instead of the usual way of just using components, I will mock-up some data and simulate it in getting it fetched from a server.
	// I'll use https://mockaroo.com/ to grab some random data in JSON
	// File data saved within the app's root file (mock-data.js), see project app on github

	// app.js
	import React from 'react';
	import ReactDOM from 'react-dom';

	import Layout from './components/Layout';

	import names from '../../mock-data';

	// The convenient way to use React Classes.
	class App extends React.Component {


	render() {
	return (
	React.createElement("div", null,
	React.createElement(Layout, {names: names})
	)
	)
	}
	}


	ReactDOM.render(
	React.createElement(App, null),
	document.getElementById('app')
	);


	// NameList.js
	import React from 'react';

	export default class NameList extends React.Component {
	constructor() {
	super();
	this.state = {
	names: []
	}
	}

	componentWillMount() {
	// console.log(this.props.names);
	this.setState({
	names: this.props.names
	})
	}

	render() {
	let {names} = this.state;
	return (
	React.createElement("div", null,
	names.map((name) => React.createElement("h3", {key: name.id}, name.first_name, " ", name.last_name))

	)
	)
	}
	}

	// Layout.js
	import React from 'react';

	import NameList from './NameList';

	import Timer from './Timer';


	export default class Layout extends React.Component {
	constructor() {
	super();
	}

	render() {
	return (
	React.createElement("div", null,
	React.createElement("h1", null, "Just some React code..."),
	React.createElement("h3", null, "Just switched to the Atom text editor"),
	React.createElement("p", null, "Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?"),
	React.createElement(Timer, null),
	React.createElement(NameList, {names: this.props.names})

	)
	)
	}
	}