Tweak conventions and fix example

gaearon · gaearon · commit 62b876207f3a · 2016-07-21T05:55:22.000+01:00
diff --git a/package.json b/package.json
@@ -8,8 +8,8 @@
     "url": "https://github.com/facebookincubator/create-react-app/issues"
   },
   "scripts": {
-    "start": "node scripts/start.js",
-    "build": "node scripts/build.js",
+    "start": "node scripts/start.js --debug-template",
+    "build": "node scripts/build.js --debug-template",
     "create-react-app": "node global-cli/index.js --scripts-version \"$PWD/`npm pack`\""
   },
   "files": [
diff --git a/template/index.html b/template/index.html
@@ -6,6 +6,7 @@
     <title>React App</title>
   </head>
   <body>
+    <div id="root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/template/src/App.js b/template/src/App.js
@@ -1,17 +1,21 @@
-import './App.css';
-import React from 'react';
+import React, { Component } from 'react';
 import logo from './logo.svg';
+import './App.css';
 
-export default function App() {
-  return (
-    <div className="App">
-      <div className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <h2>Welcome to React</h2>
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <div className="App-header">
+          <img src={logo} className="App-logo" alt="logo" />
+          <h2>Welcome to React</h2>
+        </div>
+        <p className="App-intro">
+          To get started, edit <code>src/App.js</code> and save to reload.
+        </p>
       </div>
-      <p className="App-intro">
-        To get started, edit <code>src/App.js</code> and save to reload.
-      </p>
-    </div>
-  );
+    );
+  }
 }
+
+export default App;
diff --git a/template/src/index.js b/template/src/index.js
@@ -1,8 +1,7 @@
-import './index.css';
 import React from 'react';
 import { render } from 'react-dom';
 import App from './App';
+import './index.css';
 
-const rootEl = document.createElement('div');
-document.body.appendChild(rootEl);
+const rootEl = document.getElementById('root');
 render(<App />, rootEl);
