| 1 | <!DOCTYPE html>
|
| 2 | <html>
|
| 3 | <head>
|
| 4 | <script src="../node_modules/react/dist/react.js"></script>
|
| 5 | <script src="../node_modules/react-dom/dist/react-dom.js"></script>
|
| 6 | <script src="../node_modules/babel-standalone/babel.js"></script>
|
| 7 |
|
| 8 | <title>Example - Style It</title>
|
| 9 | <script src="../dist/style-it-standalone.js"></script>
|
| 10 | </head>
|
| 11 | <meta charset="utf-8" />
|
| 12 | <body>
|
| 13 | <div id="container"> </div>
|
| 14 |
|
| 15 | <script type="text/babel">
|
| 16 |
|
| 17 | class Intro extends React.Component {
|
| 18 | render() {
|
| 19 | return Style.it(`
|
| 20 | div {
|
| 21 | color: red;
|
| 22 | }
|
| 23 | `,
|
| 24 | <div>
|
| 25 | <header>
|
| 26 | <h1>Standalone Example - Reactive Style</h1>
|
| 27 | <p>For usage without babel / webpack</p>
|
| 28 | </header>
|
| 29 | <main>
|
| 30 | <p>Reactive Style is just CSS -- unlike with inline styling
|
| 31 | you can use all CSS features like pseudo-selectors, pseudo-classes,
|
| 32 | animations, media queries, etc.
|
| 33 | </p>
|
| 34 | </main>
|
| 35 | <footer>
|
| 36 | Copyright © Joshua Robinson 2016-present. MIT Licensed.
|
| 37 | </footer>
|
| 38 | </div>
|
| 39 | );
|
| 40 | }
|
| 41 | }
|
| 42 |
|
| 43 | ReactDOM.render(<Intro />, document.getElementById('container'));
|
| 44 | </script>
|
| 45 | </body>
|
| 46 | <html> |
| \ | No newline at end of file |