🔧 add prettier formatting to scripts + configs for linting

yarn format works now + prettier configs and js component btholt#1

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "parser": "flow",
+  "eslintIntegration": true,
+  "trailingComma":"all",
+  "tabWidth":2,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "useTabs": false,
+  "semi": true
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "prettier.eslintIntegration": true,
+  "prettier.printWidth": 120,
+  "prettier.singleQuote": true
+}

index.html

@@ -12,6 +12,7 @@
   <div id="app"></div>
   <script src="node_modules/react/dist/react.js"></script>
   <script src="node_modules/react-dom/dist/react-dom.js"></script>
+  <script></script>
 </body>
 
 </html>

js/clientApp.jsx

@@ -0,0 +1,17 @@
+const ce = React.createElement;
+
+const MyTitle = function(props) {
+  return ce('div', null, ce('h1', { style: { color: props.color } }, props.title));
+};
+
+const MyFirstComponent = function() {
+  return ce(
+    'div',
+    { id: 'my-first-component' },
+    ce(MyTitle, { title: 'Game of thrones', color: 'peru' }),
+    ce(MyTitle, { title: 'Stranger things', color: 'orange' }),
+    ce(MyTitle, { title: 'Rick and Morty', color: 'greenyellow' })
+  );
+};
+
+ReactDOM.render(ce(MyFirstComponent), document.getElementById('app'));

package.json

@@ -1,6 +1,7 @@
 {
   "scripts": {
-    "api": "node ratingsAPI.js"
+    "api": "node ratingsAPI.js",
+    "format": "prettier --write --single-quote --print-width=120 --parser=flow --tab-width=2 \"js/**/*.{js,jsx}\""
   },
   "dependencies": {
     "axios": "0.16.1",