formatjs · ericf · Sep 28, 2016 · Sep 27, 2016 · Sep 28, 2016
diff --git a/examples/hello-world/.babelrc b/examples/hello-world/.babelrc
diff --git a/examples/hello-world/.gitignore b/examples/hello-world/.gitignore
@@ -1 +1,15 @@
-build/
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+.env
+npm-debug.log
diff --git a/examples/hello-world/README.md b/examples/hello-world/README.md
@@ -3,26 +3,11 @@ React Intl Hello World Example
 
 This is a very simple — yet runnable app — showing how to use React Intl to format message (string) that contains a placeholder, plural, and number.
 
-## Running
-
-**You first need to build the main React Intl library:**
-
-```
-$ cd ../..
-$ npm run build
-$ cd examples/hello-world/
-```
-
-Then you can run this example:
-
-```
-$ npm run build
-$ npm start
-```
-
-or you can edit the source in `index.js` and recompile the example on fly :
+## Running Example
 
+**In the project directory, run:**
 ```
-$ npm run watch
+$ npm install
 $ npm start
 ```
+**Open [http://localhost:3000](http://localhost:3000) to view it in the browser.**
diff --git a/examples/hello-world/index.html b/examples/hello-world/index.html
diff --git a/examples/hello-world/package.json b/examples/hello-world/package.json
@@ -4,19 +4,18 @@
   "description": "React Intl Hello World Example",
   "private": true,
   "main": "index.js",
-  "scripts": {
-    "clean": "../../node_modules/.bin/rimraf build",
-    "build": "../../node_modules/.bin/mkdirp build && ../../node_modules/.bin/browserify index.js -d -t babelify -t browserify-shim > build/bundle.js",
-    "watch": "../../node_modules/.bin/mkdirp build && ../../node_modules/.bin/watchify index.js -d -t babelify -t browserify-shim -o build/bundle.js -v",
-    "start": "../../node_modules/.bin/babel-node server.js"
-  },
   "author": "Eric Ferraiuolo <[email protected]>",
   "license": "BSD-3-Clause",
-  "browser": {
-    "react-intl": "../../lib/index.js"
+  "devDependencies": {
+    "react-scripts": "0.6.0"
   },
-  "browserify-shim": {
-    "react": "global:React",
-    "react-dom": "global:ReactDOM"
+  "dependencies": {
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "react-intl": "^2.1.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build"
   }
 }
diff --git a/examples/hello-world/public/index.html b/examples/hello-world/public/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>React Intl Hello World Example</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script src="https://cdn.polyfill.io/v1/polyfill.min.js?features=Intl.~locale.en"></script>
+    </body>
+</html>
diff --git a/examples/hello-world/server.js b/examples/hello-world/server.js
diff --git a/examples/hello-world/index.js → examples/hello-world/src/App.js b/examples/hello-world/index.js → examples/hello-world/src/App.js
@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
-import ReactDOM from 'react-dom';
-import {IntlProvider, FormattedMessage} from 'react-intl';
+import {FormattedMessage} from 'react-intl';
 
 class App extends Component {
     constructor(props) {
@@ -29,9 +28,5 @@ class App extends Component {
     }
 }
 
-ReactDOM.render(
-    <IntlProvider locale="en">
-        <App />
-    </IntlProvider>,
-    document.getElementById('container')
-);
+
+export default App;
diff --git a/examples/hello-world/src/index.js b/examples/hello-world/src/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {IntlProvider} from 'react-intl';
+import App from './App';
+
+ReactDOM.render(
+    <IntlProvider locale="en">
+        <App />
+    </IntlProvider>,
+    document.getElementById('root')
+);