React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by jeremenichelli

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<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://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="movies"></div>

SCSS

.movie__box {
  background-color: white;
  margin: 25px auto;
  padding: 25px;
  font-family: sans-serif;
  overflow: hidden;
  max-width: 400px;
  
  h3 {
    margin-top: 0;
  }
  
  img {
    float: left;
    margin-right: 30px;
    width: 100px;
  }
  
  p {
    font-style: italic;
    line-height: 1.2;
    margin-bottom: 0;
    
    span {
      font-weight: bold;
    }
  }
}

JavaScript 1.7

// data
const movies = [
	{
		'Title': 'The Avengers',
    'Plot': 'Earth\'s mightiest heroes must come together and learn to fight as a team if they are to stop the mischievous Loki and his alien army from enslaving humanity.',
    'Poster': 'http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw@@._V1_SX300.jpg'
   },
   {
     'Title':'The Dark Knight',
     'Plot': 'When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.',
     'Poster':'https://images-na.ssl-images-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg'
   }
];

// components
class MovieBox extends React.Component {
  render() {
    return (
      <div className='movie__box'>
        <img src={this.props.data.Poster }/>
        <h3>{ this.props.data.Title }</h3>
        <p className='movie__plot'>
          <span>Plot:</span> { this.props.data.Plot }
        </p>
      </div>
    );
  }
}

const noMovies = [];

class Movies extends React.Component {
  renderMovie(movie) {
  	return <MovieBox data={ movie }/>;
	}
  render() {
    const movies = this.props.movies;

    return (
      <div className="movies">
        { (movies || noMovies).map(this.renderMovie) }
      </div>
    );
  }
}

ReactDOM.render(<Movies movies={ movies }/>, document.querySelector('#movies'));