Titiaiev/react.html

## react.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React app</title>
</head>
<body>

  <div id="root-1"></div>

  <div id="root-2"></div>

  <!-- Загрузим React. -->
  <!-- Примечание: для деплоя на продакшен замените окончание «development.js» на «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>
  <!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script> -->
  <!-- <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> -->

  <!-- Загрузим наш React-компонент. -->
  <script>
    '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 this.';
        }

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

    const domContainer = document.querySelector('#root-1');
    ReactDOM.render(e(LikeButton), domContainer);
  </script>


  <!-- Для работы с JSX -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <!-- Обязательно указать type="text/babel" -->
  <script type="text/babel">
    class Hello extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          a: 1
        }
      }

      render() {
        return (
          <div>
            <p>Hello</p>
          </div>
        );
      }
    }

    ReactDOM.render(<Hello/>, document.getElementById('root-2'));
  </script>

  <script>
    // ## Для транспиляции JSX
    // ```npm init -y```
    // ```npm install babel-cli@6 babel-preset-react-app@3```

    // для запуска слежения за файлами
    // ```npx babel --watch src --out-dir . --presets react-app/prod```
  </script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>React app</title>
	</head>
	<body>

	<div id="root-1"></div>

	<div id="root-2"></div>

	<!-- Загрузим React. -->
	<!-- Примечание: для деплоя на продакшен замените окончание «development.js» на «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>
	<!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script> -->
	<!-- <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> -->

	<!-- Загрузим наш React-компонент. -->
	<script>
	'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 this.';
	}

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

	const domContainer = document.querySelector('#root-1');
	ReactDOM.render(e(LikeButton), domContainer);
	</script>


	<!-- Для работы с JSX -->
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<!-- Обязательно указать type="text/babel" -->
	<script type="text/babel">
	class Hello extends React.Component {
	constructor(props) {
	super(props);
	this.state = {
	a: 1
	}
	}

	render() {
	return (
	<div>
	<p>Hello</p>
	</div>
	);
	}
	}

	ReactDOM.render(<Hello/>, document.getElementById('root-2'));
	</script>

	<script>
	// ## Для транспиляции JSX
	// ```npm init -y```
	// ```npm install babel-cli@6 babel-preset-react-app@3```

	// для запуска слежения за файлами
	// ```npx babel --watch src --out-dir . --presets react-app/prod```
	</script>

	</body>
	</html>