Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <script src="https://unpkg.com/react@16/umd/react.development.js</script>
- <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
- <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
- </head>
- <body>
- <div id="container">
- wtf
- </div>
- <script type="text/babel">
- class Vowel extends React.Component {
- render(){
- var VowelStyle = {
- padding: 10,
- margin: 10,
- backgroundColor: this.props.bgcolor,
- color: "#333",
- display: "inline-block",
- fontFamily: "monospace",
- fontSize: 32,
- textAlign: "center"
- };
- return(
- <div>
- {this.props.children}
- </div>
- )
- }
- }
- var destination = document.querySelector('#container')
- ReactDOM.render(
- <div>
- <Vowel bgcolor="#58B3FF">A</Vowel>
- <Vowel bgcolor="#FF605F">E</Vowel>
- <Vowel bgcolor="#FFD52E">I</Vowel>
- <Vowel bgcolor="#49DD8E">O</Vowel>
- <Vowel bgcolor="#AE99FF">U</Vowel>
- </div>,destination);
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement