diff --git a/.gitignore b/.gitignore index c2658d7..320c107 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ node_modules/ +dist/ +package-lock.json diff --git a/README.md b/README.md index 4d9e347..28bfd3f 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,17 @@ 1. Clone this repo. 2. Run `npm install` -3. Start an `http-server` in the root directory. -4. Open in your browser. +3. Start the http-server using `npm run start`. +4. Open /development.html file in your browser. You can click on the “Welcome to…” title to see the `onClick` event fire. +## Production version + +1. Run `npm run build` in terminal to generate the bundles in "dist" folder. +2. Start the http-server using `npm run start`. +3. Open /production.html file in browser. + This example uses [steal-jsx](https://www.npmjs.com/package/steal-jsx). ![Steal-React Example Screenshot](screenshot.png?raw=true "Simple Steal-React Example App") diff --git a/development.html b/development.html new file mode 100644 index 0000000..02fd186 --- /dev/null +++ b/development.html @@ -0,0 +1,12 @@ + + + + + + StealJS & React Demo + + +
+ + + \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index 1b272cc..0000000 --- a/index.html +++ /dev/null @@ -1,14 +0,0 @@ -StealJS & React Demo - - -
- diff --git a/index.js b/index.js index 8e3a987..81ef9cb 100644 --- a/index.js +++ b/index.js @@ -2,10 +2,14 @@ import React from 'react'; import ReactDOM from 'react-dom'; import Title from './title.jsx'; +// Import styles +import './styles.css'; + class HelloMessage extends React.Component { render() { return (
+ <ul> <li> @@ -29,4 +33,7 @@ class HelloMessage extends React.Component { } }; -ReactDOM.render(<HelloMessage greeting="Welcome to your first StealJS and React app!" />, document.getElementById('app')); +ReactDOM.render( + <HelloMessage greeting="Welcome to your first StealJS and React app!" />, + document.getElementById('app') +); diff --git a/package.json b/package.json index 6ce7696..ab674de 100644 --- a/package.json +++ b/package.json @@ -4,21 +4,31 @@ "description": "", "main": "index.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "start": "http-server ./", + "test": "echo \"Error: no test specified\" && exit 1", + "build": "steal-tools --main index" }, "author": "", "license": "ISC", "dependencies": { + "http-server": "^0.11.1", "react": "^15.4.1", "react-dom": "^15.4.1", "steal": "^1.0.10", "steal-jsx": "^0.0.2" }, + "devDependencies": { + "steal-css": "^1.3.2", + "steal-tools": "^1.11.9" + }, "steal": { "transpiler": "babel", "babelOptions": { "blacklist": [] }, - "plugins": ["steal-jsx"] + "plugins": [ + "steal-jsx", + "steal-css" + ] } } diff --git a/production.html b/production.html new file mode 100644 index 0000000..bf2e38f --- /dev/null +++ b/production.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>StealJS & React Demo + + +
+ + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..3beb263 --- /dev/null +++ b/styles.css @@ -0,0 +1,12 @@ +body { + font-family: sans-serif; + text-align: center; +} +ul { + list-style: none; + margin: none; +} +img#logo { + margin-top: 5%; + width: 300px; +}