├── .gitignore ├── screenshot.png ├── styles.css ├── production.html ├── development.html ├── README.md ├── package.json ├── title.jsx ├── LICENSE.md ├── index.js └── logo.svg /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | package-lock.json 4 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stealjs/react-example/HEAD/screenshot.png -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | ul { 6 | list-style: none; 7 | margin: none; 8 | } 9 | img#logo { 10 | margin-top: 5%; 11 | width: 300px; 12 | } 13 | -------------------------------------------------------------------------------- /production.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | StealJS & React Demo 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /development.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | StealJS & React Demo 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # steal-react-example 2 | 3 | 1. Clone this repo. 4 | 2. Run `npm install` 5 | 3. Start the http-server using `npm run start`. 6 | 4. Open /development.html file in your browser. 7 | 8 | You can click on the “Welcome to…” title to see the `onClick` event fire. 9 | 10 | ## Production version 11 | 12 | 1. Run `npm run build` in terminal to generate the bundles in "dist" folder. 13 | 2. Start the http-server using `npm run start`. 14 | 3. Open /production.html file in browser. 15 | 16 | This example uses [steal-jsx](https://www.npmjs.com/package/steal-jsx). 17 | 18 | ![Steal-React Example Screenshot](screenshot.png?raw=true "Simple Steal-React Example App") 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "steal-react-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "http-server ./", 8 | "test": "echo \"Error: no test specified\" && exit 1", 9 | "build": "steal-tools --main index" 10 | }, 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "http-server": "^0.11.1", 15 | "react": "^15.4.1", 16 | "react-dom": "^15.4.1", 17 | "steal": "^1.0.10", 18 | "steal-jsx": "^0.0.2" 19 | }, 20 | "devDependencies": { 21 | "steal-css": "^1.3.2", 22 | "steal-tools": "^1.11.9" 23 | }, 24 | "steal": { 25 | "transpiler": "babel", 26 | "babelOptions": { 27 | "blacklist": [] 28 | }, 29 | "plugins": [ 30 | "steal-jsx", 31 | "steal-css" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /title.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Title extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = { 7 | count: 0, 8 | greeting: '' 9 | }; 10 | } 11 | clicked() { 12 | const count = this.state.count + 1; 13 | this.setState({ 14 | greeting: `World Clicked ${count}`,count 15 | }); 16 | } 17 | render() { 18 | return
19 |

this.clicked()}> 20 | {this.props.greeting} 21 |

22 | { 23 | this.state.count > 0 && (

Title clicked {this.state.count} {(this.state.count === 1) ? 'time' : 'times'}

) 24 | } 25 |
; 26 | } 27 | } 28 | Title.displayName = 'World'; 29 | Title.propTypes = {}; 30 | 31 | export default Title; 32 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Bitovi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Title from './title.jsx'; 4 | 5 | // Import styles 6 | import './styles.css'; 7 | 8 | class HelloMessage extends React.Component { 9 | render() { 10 | return ( 11 |
12 | 13 | 14 | <ul> 15 | <li> 16 | To learn more about StealJS, visit <a href="https://stealjs.com/" target="_blank"> 17 | StealJS.com 18 | </a> 19 | </li> 20 | <li> 21 | For live help with simple questions, check out <a href="https://www.bitovi.com/community/slack" target="_blank"> 22 | our Slack 23 | </a> 24 | </li> 25 | <li> 26 | For more complex questions, post to <a href="https://forums.bitovi.com/c/stealjs" target="_blank"> 27 | our forums 28 | </a> 29 | </li> 30 | </ul> 31 | </div> 32 | ); 33 | } 34 | }; 35 | 36 | ReactDOM.render( 37 | <HelloMessage greeting="Welcome to your first StealJS and React app!" />, 38 | document.getElementById('app') 39 | ); 40 | -------------------------------------------------------------------------------- /logo.svg: -------------------------------------------------------------------------------- 1 | <svg width="121px" height="106px" viewBox="0 0 121 106" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 2 | <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 3 | <g id="Steal.com-update" transform="translate(-488.000000, -776.000000)"> 4 | <g id="Group-2" transform="translate(138.000000, 683.000000)"> 5 | <g id="logo-react" transform="translate(353.000000, 96.000000)"> 6 | <ellipse id="Oval" fill="#00D8FF" cx="57.5819531" cy="49.8171908" rx="10.7176365" ry="10.5171908"></ellipse> 7 | <path d="M57.5819531,28.433543 C71.9718334,28.433543 85.3396638,30.4597484 95.4189464,33.8647799 C107.563052,37.9672956 115.029741,44.1861635 115.029741,49.8171908 C115.029741,55.6853249 107.116332,62.2916143 94.0753697,66.5316562 C84.2157081,69.7373166 71.2418283,71.4104822 57.5819531,71.4104822 C43.5770507,71.4104822 30.3151852,69.8398323 20.3467814,66.4962264 C7.73224265,62.2651992 0.134165402,55.5731656 0.134165402,49.8171908 C0.134165402,44.2318658 7.26330466,38.0612159 19.2367122,33.9647799 C29.3535953,30.5037736 43.0514983,28.433543 57.5819531,28.433543 L57.5819531,28.433543 Z" id="Shape" stroke="#00D8FF" stroke-width="5.07038469"></path> 8 | <path d="M38.6122899,39.1870021 C45.8010345,26.954717 54.2679822,16.6033543 62.3091471,9.73626834 C71.9976837,1.46247379 81.2177096,-1.77798742 86.1886659,1.03501048 C91.3689886,3.96645702 93.2477315,13.9939203 90.4757632,27.1976939 C88.3799629,37.1805031 83.3756789,49.0450734 76.5516163,60.6570231 C69.555147,72.5622642 61.5434643,83.0509434 53.6116827,89.8545073 C43.5747006,98.4641509 33.8714229,101.579665 28.7900152,98.7041929 C23.8594367,95.9138365 21.9736437,86.7710692 24.3390566,74.5463312 C26.3376511,64.2171908 31.353258,51.5389937 38.6122899,39.1870021 L38.6122899,39.1870021 Z" id="Shape" stroke="#00D8FF" stroke-width="5.07038469"></path> 9 | <path d="M38.6304492,60.6880503 C31.4209816,48.4675052 26.5104852,36.0995807 24.4636083,25.8337526 C21.9973576,13.4649895 23.7410806,4.00796646 28.7073368,1.18679245 C33.8825322,-1.75324948 43.6738292,1.6572327 53.9466689,10.6081761 C61.7137348,17.3754717 69.6893124,27.5551363 76.5332434,39.1559748 C83.5500084,51.0496855 88.809164,63.0991614 90.8547591,73.2402516 C93.443425,86.0731656 91.3480519,95.8784067 86.2715579,98.7622642 C81.3456794,101.560587 72.3318154,98.5979036 62.7201889,90.4815514 C54.599123,83.6238994 45.9106314,73.0280922 38.6304492,60.6880503 L38.6304492,60.6880503 Z" id="Shape" stroke="#00D8FF" stroke-width="5.07038469"></path> 10 | </g> 11 | </g> 12 | </g> 13 | </g> 14 | </svg> 15 | --------------------------------------------------------------------------------