Run these commands:
npm i
npm start
You only have to run npm i the first time.
In a separate window, run npm run watch to hot-reload your changes.
Created
November 30, 2015 19:16
-
-
Save foxdonut/1ff35ce3e0f626a03659 to your computer and use it in GitHub Desktop.
Simple React Hello World
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "hello-react", | |
| "version": "1.0.0", | |
| "description": "Simple React Hello World", | |
| "main": "index.js", | |
| "scripts": { | |
| "start": "browserify -t babelify --outfile public/generated-app.js src/hello.jsx && echo 'Open http://localhost:8000/ in your browser' && (cd public ; python -m SimpleHTTPServer)", | |
| "watch": "watchify -v -t babelify --outfile public/generated-app.js src/hello.jsx" | |
| }, | |
| "author": "", | |
| "license": "ISC", | |
| "repository": "none", | |
| "devDependencies": { | |
| "babelify": "^6.3.0", | |
| "browserify": "^11.2.0", | |
| "watchify": "^3.4.0" | |
| }, | |
| "dependencies": { | |
| "react": "^0.14.3", | |
| "react-dom": "^0.14.3" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Simple React Hello World</title> | |
| </head> | |
| <body> | |
| <h1>Simple React Hello World</h1> | |
| <div id="app"></div> | |
| <script src="/generated-app.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import ReactDOM from "react-dom"; | |
| const Hello = function(name) { | |
| return ( | |
| <div>Hello, {name}</div> | |
| ); | |
| }; | |
| const view = Hello("Will"); | |
| const element = document.getElementById("app"); | |
| ReactDOM.render(view, element); |
how does it know my name?
IN SON FILE
"name": "hello-react",
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
how does it know my name?