Step 2: Introduce React

hiquest · Sep 20, 2017 · 115465e · 115465e
1 parent b092cde
commit 115465e
Show file tree

Hide file tree

Showing 6 changed files with 2,712 additions and 58 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,33 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "experimentalObjectRestSpread": true,
+            "jsx": true
+        },
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "react/jsx-uses-vars": [2],
+        "indent": [
+            "error",
+            2
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+};
diff --git a/package.json b/package.json
@@ -4,9 +4,14 @@
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
-    "electron": "^1.7.6"
+    "electron": "^1.7.6",
+    "electron-prebuilt-compile": "^1.7.6"
   },
   "scripts": {
     "start": "electron index.js"
+  },
+  "dependencies": {
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1"
   }
 }
diff --git a/src/index.html b/src/index.html
@@ -5,8 +5,7 @@
     <title>ElectroTV</title>
   </head>
   <body>
-    <div id='root'>
-      <h1>Greetings, sir!</h1>
-    </div>
+    <div id='root'></div>
+    <script src='js/bootstrap.js' type='application/javascript'></script>
   </body>
 </html>
diff --git a/src/js/bootstrap.js b/src/js/bootstrap.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './js/components/app';
+
+ReactDOM.render(
+  React.createElement(App),
+  document.getElementById('root')
+);
diff --git a/src/js/components/app.jsx b/src/js/components/app.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default () => (
+  <div>Hello, React!</div>
+);