From b5ec6643fd47b80e45c54405f584e694fceb7662 Mon Sep 17 00:00:00 2001 From: Iago Bruno Date: Thu, 21 Jun 2018 18:12:56 -0300 Subject: [PATCH 1/6] add steal-tools and build command --- package.json | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 6ce7696..80801db 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "description": "", "main": "index.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "build": "steal-tools --main index" }, "author": "", "license": "ISC", @@ -14,6 +15,9 @@ "steal": "^1.0.10", "steal-jsx": "^0.0.2" }, + "devDependencies": { + "steal-tools": "^1.11.9" + }, "steal": { "transpiler": "babel", "babelOptions": { From e0a7b93477bfcf9190ced057298c49786bb9f21d Mon Sep 17 00:00:00 2001 From: Iago Bruno Date: Thu, 21 Jun 2018 19:04:34 -0300 Subject: [PATCH 2/6] Add http-server package --- package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package.json b/package.json index 80801db..2ba4f13 100644 --- a/package.json +++ b/package.json @@ -4,12 +4,14 @@ "description": "", "main": "index.js", "scripts": { + "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", From 9cd87237e11e15081fc4f9b7fb4e96ecab7ffeca Mon Sep 17 00:00:00 2001 From: Iago Bruno Date: Thu, 21 Jun 2018 19:09:37 -0300 Subject: [PATCH 3/6] Create production and development versions of the index.html file --- development.html | 12 ++++++++++++ index.html | 14 -------------- index.js | 6 +++++- production.html | 12 ++++++++++++ 4 files changed, 29 insertions(+), 15 deletions(-) create mode 100644 development.html delete mode 100644 index.html create mode 100644 production.html 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..f8d6423 100644 --- a/index.js +++ b/index.js @@ -6,6 +6,7 @@ class HelloMessage extends React.Component { render() { return (
+ <ul> <li> @@ -29,4 +30,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/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 From 1b3aa7546fc5d7c3d87710b10c8dde6a4fe346e1 Mon Sep 17 00:00:00 2001 From: Iago Bruno Date: Thu, 21 Jun 2018 19:12:36 -0300 Subject: [PATCH 4/6] Put css styles in a separate file --- index.js | 3 +++ package.json | 6 +++++- styles.css | 12 ++++++++++++ 3 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 styles.css diff --git a/index.js b/index.js index f8d6423..81ef9cb 100644 --- a/index.js +++ b/index.js @@ -2,6 +2,9 @@ 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 ( diff --git a/package.json b/package.json index 2ba4f13..ab674de 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "steal-jsx": "^0.0.2" }, "devDependencies": { + "steal-css": "^1.3.2", "steal-tools": "^1.11.9" }, "steal": { @@ -25,6 +26,9 @@ "babelOptions": { "blacklist": [] }, - "plugins": ["steal-jsx"] + "plugins": [ + "steal-jsx", + "steal-css" + ] } } 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; +} From 876841efee0f5e1db0c55f6427e412a5833c5ce1 Mon Sep 17 00:00:00 2001 From: Iago Bruno Date: Thu, 21 Jun 2018 19:13:31 -0300 Subject: [PATCH 5/6] Update .gitignore --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index c2658d7..320c107 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ node_modules/ +dist/ +package-lock.json From 9a035fd26a1adfddcbdda4b0d3beacf51f1b8c64 Mon Sep 17 00:00:00 2001 From: Iago Bruno Date: Thu, 21 Jun 2018 19:14:37 -0300 Subject: [PATCH 6/6] Update README.md with the new instructions --- README.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) 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")