Skip to content

Instantly share code, notes, and snippets.

@Titiaiev
Created April 29, 2019 19:40
Show Gist options
  • Save Titiaiev/1359f76eb2593e5e0a823e405fd6b735 to your computer and use it in GitHub Desktop.
Save Titiaiev/1359f76eb2593e5e0a823e405fd6b735 to your computer and use it in GitHub Desktop.
React { простой стартовый шаблон-песочница }
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment