Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React App!</title>
    <script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
    <script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
 
.widget {
    width: 300px;
    margin:100px auto;
}
​
div.title {
  margin: 20px auto;
  text-align: center;
  width: 200px;
  font-size: 20px;
}
​
img.center {
    width: 200px;
    height: 200px;
    display: block;
    margin: 10px auto;    
}
 
class Image extends React.Component {
  render(){
    return <img className="center" {...this.props} />;
  }
}
​
Image.propTypes = {
  src: React.PropTypes.string.isRequired
};
​
class Hello extends React.Component {
  render() {
    return <div className="title">
        {`Hello ${this.props.name}`}
      </div>;
  }
}
​
class App extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      name: 'JSBin'
    };
  }
​
  render() {
    return (<div className="app">
        <Image src="https://unsplash.it/200/300/?random" />
        <Hello name={this.state.name} />
      </div>);
  }
}
​
ReactDOM.render(<App />, document.getElementById('app'));
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
klugjopro
0viewers