3/25/2017 - 2:31 PM

Simple React Hello World

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);

public_index.html

<!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>

package.json

{
  "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"
  }
}

README.md

Rendered
Source

Simple React Hello World

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.

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Simple React Hello World

Simple React Hello World