Update README.md

README.md

@@ -8,31 +8,34 @@ Because we are using React, we'll start by creating React application and then a
 Make sure you have [NodeJS](https://nodejs.org/en/download/) installed on your computer.
 We'll start by using `create-react-app`
 
-
 ## Create React app using `create-react-app`
 
-To install `create-react-app` as global package, run the following command -
-
-`npm install -g create-react-app`
+ To install `create-react-app` as global package, run the following command -
 
+```bash
+    $ npm install -g create-react-app
+```
 
 Create new React app and `cd` into it -
-
-`create-react-app electron-react-boilerplate`
-
-`cd helloworld`
-
+```bash
+    $ create-react-app electron-react-boilerplate
+    $ cd helloworld
+```
 Now we have the basic React app, lets run it using `start` script defined in `package.json` file -
 
-`npm start`
+```bash 
+    $ npm start
+```
 
 This starts the new broswer window with the default React page.
 
 ### Install Electron
 
 To install `Electron` package run the following command -
 
-`npm install electron --save-dev`
+```bash
+    $ npm install electron --save-dev
+```
 
 Make sure you add the `--save-dev` option. It will add the `Electron` dependency to the `package.json` file.
 
@@ -48,28 +51,29 @@ Add a top-level `main` property and point it to main `Electron` file -
 
 The `package.json` file now looks like this -
 
-`{
-  "name": "electron-react-boilerplate",
-  "version": "0.1.0",
-  "main": "public/electron.js",
-  "private": true,
-  "dependencies": {
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0",
-    "react-scripts": "1.1.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject",
-    "electron-start": "electron ."
-  },
-  "devDependencies": {
-    "electron": "^1.8.4"
-  }
-}`
-
+```
+{
+  "name": "electron-react-boilerplate",  
+  "version": "0.1.0",  
+  "main": "public/electron.js",  
+  "private": true,  
+  "dependencies": {  
+    "react": "^16.3.0",  
+    "react-dom": "^16.3.0",  
+    "react-scripts": "1.1.1"  
+  },  
+  "scripts": {  
+    "start": "react-scripts start",  
+    "build": "react-scripts build",  
+    "test": "react-scripts test --env=jsdom",  
+    "eject": "react-scripts eject",  
+    "electron-start": "electron ."  
+  },  
+  "devDependencies": {  
+    "electron": "^1.8.4"  
+  }  
+}   
+```
 ### Creating `electron.js` File
 
 Created the `electron.js` file insde the `public` folder.
@@ -80,11 +84,15 @@ It contains some of the Electron's event to control the application's life cycle
 
 Make sure React is still running in the background else run the following command -
 
-`npm start`
+```bash
+    $ npm start
+```
 
 Run the following command to start your Electron application -
 
-`npm run electron-start`
+```bash 
+    $ npm run electron-start
+```
 
 
 ## Creating a stable development and build process
@@ -96,9 +104,13 @@ We need to add the following packages -
 
 Run the following command to add these packages to our app -
 
-`npm install electron-builder wait-on concurrently --save-dev`
+```bash
+    $ npm install electron-builder wait-on concurrently --save-dev
+```
 
-`npm install electron-is-dev --save`
+```bash
+    $ npm install electron-is-dev --save
+```
 
 Add the following in the `scripts` section of `package.json` file -
 
@@ -111,7 +123,9 @@ The following things happen when you excute the above command -
 
 Now can run the application using -
 
-`npm run electron dev`
+```bash
+    $ npm run electron dev
+```
 
 ### Create `build` script
 
@@ -125,7 +139,8 @@ Next, we will have to specify the `build` property. This is because of a minor c
 
 Add the following `build` section to the `package.json` file -
 
-`"build": {
+```
+"build": {
     "appId": "com.mook",
     "files": [
       "build/**/*",
@@ -134,7 +149,8 @@ Add the following `build` section to the `package.json` file -
     "directories": {
       "buildResources": "assets"
     }
-  }`
+  }
+ ```
 
 We also need to add the `homepage` property to allow the packaged Electron app to find the JavaScript and CSS files -
 
@@ -144,7 +160,9 @@ We also need to add the `homepage` property to allow the packaged Electron app t
 
 Run the following command -
 
-`npm run electron-pack`
+```bash
+    $ npm run electron-pack
+```
 
 When the script run is complete, you should see a new folder named `dist` in your project’s directory. You can find your packaged application in the folder named after your operating system. For example, Mac users will be able to find the packaged application `electron-react-boilerplate.app` in the `dist/mac` folder.