isaklafleur/App.css

## App.css
body {
  margin: 0;
  padding: 0;
  font-family: monospace;
}

header {
  display: block;
  height: 5vh;
  overflow: auto;
  background-color: pink;
  color: red;
  font-size: 28px;
}

.container {
  height: 95vh;
  display: flex;
}

.pre {
  background-color: #f8f8f8;
}

pre, textarea {
  width: 50%;
  font-family: 28px;
  margin: 0px;
  padding: 10px;
  color: #222;
}

textarea:focus {outline: 0};

## App.jsx
import React from 'react';
import '../App.css';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      input: '/* add your jsx here */',
      output: '',
      err: '',
    };
  }
  update(e) {
    let code = e.target.value;
    try {
      this.setState({
        output: window.Babel
        .transform(code, { presets: ['es2015', 'react'] })
        .code,
        err: '',
      });
    } catch (err) {
      this.setState({ err: err.message });
    }
  }
  render() {
    return (
      <div>
        <header>{this.state.err}</header>
        <div className="container">
          <textarea
          onChange={this.update.bind(this)}
          defaultValue={this.state.input}
          />
          <pre>
            {this.state.output}
          </pre>
        </div>
      </div>
    );
  }
}

export default App;

## Build a JSX Live Compiler as a React Component
...

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React App</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
	body {
	margin: 0;
	padding: 0;
	font-family: monospace;
	}

	header {
	display: block;
	height: 5vh;
	overflow: auto;
	background-color: pink;
	color: red;
	font-size: 28px;
	}

	.container {
	height: 95vh;
	display: flex;
	}

	.pre {
	background-color: #f8f8f8;
	}

	pre, textarea {
	width: 50%;
	font-family: 28px;
	margin: 0px;
	padding: 10px;
	color: #222;
	}

	textarea:focus {outline: 0};
	import React from 'react';
	import '../App.css';

	class App extends React.Component {
	constructor() {
	super();
	this.state = {
	input: '/* add your jsx here */',
	output: '',
	err: '',
	};
	}
	update(e) {
	let code = e.target.value;
	try {
	this.setState({
	output: window.Babel
	.transform(code, { presets: ['es2015', 'react'] })
	.code,
	err: '',
	});
	} catch (err) {
	this.setState({ err: err.message });
	}
	}
	render() {
	return (
	<div>
	<header>{this.state.err}</header>
	<div className="container">
	<textarea
	onChange={this.update.bind(this)}
	defaultValue={this.state.input}
	/>
	<pre>
	{this.state.output}
	</pre>
	</div>
	</div>
	);
	}
	}

	export default App;
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>React App</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js"></script>
	</head>
	<body>
	<div id="root"></div>
	</body>
	</html>