charlos/comment_list.js

## comment_list.js
'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
    constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked comment number ' + this.props.commentID;
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

class CommentList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
  	const items = [];
        let i;
     	for (i = 0; i < this.props.items.length; i++) {
    	  const commentID = i+1;
    	  const li = e(
          'li',
          {},
          [
            'This is the ' + this.props.items[i] + ' comment. ',
            e(LikeButton, {commentID: commentID})
          ]
      	);

        items.push(li);
    }

    return e(
      'ul',
      {},
      items
    );
  }
}

ReactDOM.render(
	e(CommentList, {items: ['first', 'second', 'third']}),
  	document.getElementById('comment_list')
);

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute 100% JS</title>
  </head>
  <body>

    <h2>Add React in One Minute 100% JS</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>

    <div id="comment_list"></div>

    <br>
    <p>Based on <a href="https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda" target="_blank">"Add React in One Minute"</a></p>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="comment_list.js"></script>

  </body>
</html>
	'use strict';

	const e = React.createElement;

	class LikeButton extends React.Component {
	constructor(props) {
	super(props);
	this.state = { liked: false };
	}

	render() {
	if (this.state.liked) {
	return 'You liked comment number ' + this.props.commentID;
	}

	return e(
	'button',
	{ onClick: () => this.setState({ liked: true }) },
	'Like'
	);
	}
	}

	class CommentList extends React.Component {
	constructor(props) {
	super(props);
	this.state = {};
	}

	render() {
	const items = [];
	let i;
	for (i = 0; i < this.props.items.length; i++) {
	const commentID = i+1;
	const li = e(
	'li',
	{},
	[
	'This is the ' + this.props.items[i] + ' comment. ',
	e(LikeButton, {commentID: commentID})
	]
	);

	items.push(li);
	}

	return e(
	'ul',
	{},
	items
	);
	}
	}

	ReactDOM.render(
	e(CommentList, {items: ['first', 'second', 'third']}),
	document.getElementById('comment_list')
	);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Add React in One Minute 100% JS</title>
	</head>
	<body>

	<h2>Add React in One Minute 100% JS</h2>
	<p>This page demonstrates using React with no build tooling.</p>
	<p>React is loaded as a script tag.</p>

	<div id="comment_list"></div>

	<br>
	<p>Based on <a href="https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda" target="_blank">"Add React in One Minute"</a></p>

	<!-- Load React. -->
	<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
	<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

	<!-- Load our React component. -->
	<script src="comment_list.js"></script>

	</body>
	</html>