Proofing chapter 6 (#24)

Author: kakulgupta

6-conventions-and-code-style/6.0-intro.md

@@ -1,13 +1,13 @@
 # Conventions
 
-Every team composes of developers who follow different conventions. Hence, often we find that code written by a developer is not easily understood by another developer in the same team. **Not having a proper convention creates dependencies on individuals and makes the project difficult to understand by a newcomer**. Tight dependencies in a software development project can affect the velocity of the team.
+Every team is composed of developers who follow different conventions. Hence, we often find that code written by a developer is not easily understood by another developer on the same team. **Not having a proper convention creates dependencies on individuals and makes the project difficult to understand by a newcomer**. Tight dependencies in a software development project can affect the velocity of the team.
 
 The best way to solve this is by deciding and following code conventions.
 
 > We strongly believe that NO convention is bad.
-> As long as there is some convention and it is followed religiously, its good.
+> As long as there is some convention and it is followed religiously, it is good.
 
-Code conventions can be as easy as following 4 spaces instead of tabs, or ending a statement always with semicolon, etc. It could also be something more complex like not allowing `setState()`to be invoked on `componentWillMount`of a React Component.
+Code conventions can be as easy as following 4 spaces instead of tabs, or always ending a statement with a semicolon, etc. It could also be something more complex like not allowing `setState()` to be invoked on `componentWillMount` of a React Component.
 
 <center>_So if you want your team to code like this guy, set and follow conventions._<center/>
 <div style="text-align:center">

6-conventions-and-code-style/6.1-eslint.md

@@ -1,11 +1,11 @@
-# Eslint: The guardian of code conventions ⚔️
+# ESLint: The guardian of code conventions ⚔️
 
-**Eslint** is a tool that allows to maintain code quality and enforce code conventions. Eslint is a static code evaluator. Basically, it means that eslint will not actually run the code but will instead read through the source code to see if all the pre - configured code conventions are followed by the developers.
+**ESLint** is a tool that allows us to maintain code quality and enforce code conventions. ESLint is a static code evaluator. Basically, it means that ESLint will not actually execute the code but will instead read through the source code to see if all the preconfigured code conventions are followed by the developers.
 
->Eslint allows to maintain consistent code style throughout the project. Thus, any developer of the team can easily understand the code written by another developer. This can exponentially increase the teams velocity and avoid dependencies. It can prevent human errors and can act as a guardian that maintains code conventions.
+>ESLint allows us to maintain consistent code style throughout the project. Thus, any developer on the team can easily understand the code written by another developer. This can exponentially increase the team's velocity and avoid dependencies. It can reduce human errors and can act as a guardian that maintains code conventions.
 
 ### Examples
-Apart from code conventions , eslint also spots common mistakes  made by developers. For example,
+Apart from code conventions, ESLint also spots common mistakes  made by developers. For example,
 
 ```js
 var a = 1, b = 2, c = 3, e = 4;
@@ -15,7 +15,7 @@ console.log(a, b, c, d, e);
 };
 ```
 
-The above code will compile fine. But as soon as u run it , it will throw a runtime exception`ReferenceError`
+The above code will compile fine. But as soon as you execute it, it will throw a runtime exception `ReferenceError`
 
 ```js
 test()
@@ -27,21 +27,21 @@ test @ VM206:4
 (anonymous) @ VM222:1
 ```
 
-These mistakes can be easily detected by eslint.
+These mistakes can be easily detected by ESLint.
 
 ### Installation
 
-It is pretty easy to setup eslint for a project.
+It is pretty easy to setup ESLint for a project.
 
 ```
 yarn add --dev eslint babel-eslint eslint eslint-plugin-react eslint-plugin-react-native
 ```
 
-This would install eslint and other useful plugins as your dev dependencies.
+This would install ESLint and other useful plugins as your dev dependencies.
 
-And then in your `package.json` add a `npm script` as below.
+After this, add an `npm script` in your `package.json` as given below.
 
-So now your `package.json` should have
+Your `package.json` should now have
 
 ```js
 {
@@ -61,30 +61,30 @@ So now your `package.json` should have
 ```
 
 
-Now you can simply run
+You can simply run
 
 ```
 npm run lint
 or
 npm run lint:fix
 ```
 
-`npm run lint` will just run the eslint and show a list of errors that need to be fixed.`npm run lint:fix` will run eslint and attempt to correct the errors it is able to fix automatically.
+`npm run lint` will run the ESLint and show a list of errors that need to be fixed. `npm run lint:fix` will run ESLint and attempt to correct the errors it is able to fix automatically.
 
 
-## Icing on the cake
+## The icing on the cake
 
-Most modern editors have support for **eslint **via plugins.  The benefit of a text editor eslint plugin is that these plugins suggest correction while we write code itself thus saving a lot of time for the developer.
+Most modern editors have support for **ESLint** via plugins.  The benefit of a text editor ESLint plugin is that these plugins suggest corrections while we write code, thus saving a lot of time for developers.
 
-A editor configured with eslint would look something like this.
+An editor configured with ESLint would look something like this.
 
 <br>
 <div style="text-align:center">
   <img src="/assets/images/6/6.1/eslint-error-editor.png" style="width: 100%;display:inline-block;vertical-align: middle;margin:0" hspace="40">
 </div>
 <br>
 
-Also, some of these plugins also support features like **lint on save.**  Thus, eslint attempts to run`eslint --fix <current_file>` This fixes all auto fixable lint errors such as incorrect indentation spaces, etc the moment you  hit save `(cmd+s)` on a file.
+Some of these plugins also support features like **lint on save.**  Thus, ESLint attempts to run `eslint --fix <current_file>` the moment you save `(cmd+s)` a file. This fixes all auto-fixable lint errors such as incorrect indentation spaces, adding semicolons at the end of a line, etc.
 
 <br>
 <div style="text-align:center">
@@ -93,13 +93,13 @@ Also, some of these plugins also support features like **lint on save.**  Thus,
 </div>
 <br>
 
-We **strongly** recommend to enable this feature.
+We **strongly** recommend enabling this feature.
 
 ## The `.eslintrc` file
 
-**Eslint** rules can be configured via a configuration file `.eslintrc` which should be placed in the root directory of the project.
+**ESLint** rules can be configured via a configuration file `.eslintrc` which should be placed in the root directory of the project.
 
-A sample `.eslintrc` file looks like this :
+A sample `.eslintrc` file looks like this:
 
 ```js
 # "off" or 0 - turn the rule off
@@ -145,17 +145,17 @@ A sample `.eslintrc` file looks like this :
 
 The important area in the above configuration is the rules section. This section controls all the code conventions followed in the project.
 
-Complete list of all the available rules are present here:  [http://eslint.org/docs/rules/](http://eslint.org/docs/rules/)
+The complete list of all the available rules is present here:  [http://eslint.org/docs/rules/](http://eslint.org/docs/rules/)
 
 It can be pretty overwhelming at first to decide which rules should go in. Hence we can start with
 
 ```js
 "extends": ["eslint:recommended", "plugin:react/recommended"]
 ```
 
-These should cover all the basic rules needed.
+These should cover all the basic rules needed to start your project.
 
-But we recommend you add these also
+But we recommend adding these as well
 
 ```js
 "rules": {
@@ -173,14 +173,14 @@ But we recommend you add these also
   },
 ```
 
-Rest of the rules can be added based on what conventions the team decides to follow  in the project.
+Rest of the rules can be added based on what conventions the team decides to follow.
 
 
 ## Recommendations
 
-A suggestion would be that we add more of auto-fixable rules as the corrections suggested by these rules can be auto fixed by the editor with eslint plugin while saving the file itself. This would reduce the time that a developer would spend fixing lint than writing actual code.
+We would suggest adding more of auto-fixable rules as the corrections suggested by these rules can be fixed by the editor with an ESLint plugin on file save. This would reduce the time that a developer would spend fixing lint errors than writing actual code.
 
-Also  we recommend  using eslint for spacing/tabs instead of other methods like`.editorconfig`. This way, all the code conventions can be configured via single utility **\(eslint\)**. Also, indentations and spacing can be auto fixed by the editor itself with auto fix on save.
+We also recommend using ESLint for spacing/tabs instead of other methods like `.editorconfig`. This way, all the code conventions can be configured via a single utility **\(eslint\)** and the fixes can be made by the editor itself on save.
 
 
 The code till here can be found on the **branch** [chapter/6/6.1](https://github.com/react-made-native-easy/note-taker/tree/chapter/6/6.1)

6-conventions-and-code-style/6.2-git-pre-hooks.md

@@ -1,10 +1,10 @@
 # Git Pre-push/Pre-commit Hooks
 
->Pre-push/Pre-commit hooks are nothing but a couple of commands which you would want to run every time you push/commit something. Now it might not sound that interesting but using them with jest and eslint can protect the code quality of your code at a much, much higher level.
+>Pre-push/Pre-commit hooks are nothing but commands which you would want to run every time you push/commit something. It might not sound very interesting, but using them with Jest and ESLint can protect the quality of your code at a much, much higher level.
 
-___How you ask?___
+___"How?" you ask___
 
-Pre hooks run a shell command which you specify and if the command fails with exit status 1, the process will get terminated. We store the shell commands inside `.git/hooks` directory of root of the project. So imagine that __you won't be able to push the code if your tests are failing or your js files are not properly linted.__ That sound's interesting right?
+Pre hooks run a shell command which you specify and if the command fails with exit status 1, the process will get terminated. We store the shell commands inside the `.git/hooks` directory of the root of the project. So imagine that __you won't be able to push the code if your tests are failing or your js files are not properly linted.__ That sounds interesting right?
 
 <br>
 <div style="text-align:center">
@@ -13,15 +13,15 @@ Pre hooks run a shell command which you specify and if the command fails with ex
 <br>
 
 
-___Now the next question might be, how do you make sure that everyone adds those commands to the pre-push hooks folder?___
+___Your next question might be, how do you make sure that everyone adds those commands to the pre-push hooks folder?___
 
-Don't worry we got that covered as well. Let me introduce you to an awesome NPM module called [`husky`](https://www.npmjs.com/package/husky).
+Don't worry, we have that covered as well. Let me introduce you to an awesome NPM module called [`husky`](https://www.npmjs.com/package/husky).
 
 ### Using Husky
 
-Just do `npm install --save-dev husky` or `yarn add --dev husky`
+Just run `npm install --save-dev husky` or `yarn add --dev husky`
 
-After installing these node-modules, all you need to do is specify which command you would like to execute before pushing/committing your code. And all this can be done within `package.json`. It will make sure to add the commands to your local git hooks folder while setting up (npm install) the machine.
+After installing these node-modules, all you need to do is specify which command you would like to execute before pushing/committing your code. And this can be specified within `package.json`. It will make sure to add the commands to your local git hooks folder while setting up (npm install) the machine.
 
 
 We used husky's `prepush` hook to make sure that every line of code which is being pushed is linted and all the tests pass.
@@ -39,7 +39,7 @@ If you look at the `package.json` file of our boilerplate, you would find this s
   }
 }
 ```
-As you can see, we are doing `npm run lint` and `npm run test` every time the developer tries to push something. If any of the command fails, developer would not be allowed to push and you which greatly reduces the chances of build failure/PR check failure in CIs.
+As you can see, we are doing `npm run lint` and `npm run test` every time the developer tries to push something. If any of the commands fail, the developer would not be allowed to push, greatly reducing the chances of build failure/PR check failure in CIs.
 
 <br>
 <div style="text-align:center">
@@ -66,6 +66,6 @@ has_hook_script () {
 ```
 This code is autogenerated by the node module so we don't have to worry about it. If you are not able to find this file, it means that your hooks were not properly installed. Please uninstall and install the module again or do `npm run postinstall`.
 
->Note: In case windows machine, make sure that you have bash([cygwin](https://www.cygwin.com/)). Prepush hooks will fail if you use command prompt
+>Note: In the case of Windows machines, make sure that you have bash([Cygwin](https://www.cygwin.com/)). Prepush hooks will fail if you use Command Prompt
 
 The code till here can be found on the **branch** [chapter/6/6.2](https://github.com/react-made-native-easy/note-taker/tree/chapter/6/6.2)

6-conventions-and-code-style/6.3-environment-variables.md

@@ -1,13 +1,13 @@
 # Environment variables
 
-Since react-native is combines native platform code with JS, you might find it hard to accomplish small tasks like passing environment variables. But don't worry, we got you covered here as well 🙌
+Since react-native combines native platform code with JS, you might find it hard to accomplish small tasks like passing environment variables. But don't worry, we have you covered here as well. 🙌
 
-### How Environment variables work in react-native?
+### How do Environment variables work in react-native?
 
-Since the JS code is being executed by the native platform, we cannot directly pass env variables like we used to do in node/web pack projects. So we found an alternative way to accomplish this.
+Since the JS code is being executed by the native platform, we cannot directly pass env variables like we used to in node/Webpack projects. So we found an alternative way to accomplish this.
 
 ### How to use Environment variables in RN?
-We created an `env.config.js` file which exports an object. The env object can contain the API base url, environment, and even the app fixtures/mock api data, etc (we will discuss this in details in [API mocks](./6.5-axios-and-api-mocks.md) section). And on the CI (travis in our case), we change the contents of the file depending on the build type(Dev, UAT or Prod). Sounds cool right? 🤓
+We created an `env.config.js` file which exports an object. The env object can contain the API base URL, environment, and even the app fixtures/mock API data, etc (we will discuss this in details in [API mocks](./6.5-axios-and-api-mocks.md) section). And on the CI (Travis in our case), we change the contents of the file depending on the build type(Dev, UAT or Prod). Sounds cool right? 🤓
 
 <div style="text-align:center">
   <img src="/assets/images/6/6.3/env-structure.png" style="width: 50%;display:inline-block;vertical-align: middle;margin:0" hspace="40">
@@ -18,11 +18,11 @@ The app will contain all the env configs inside `environment/` folder. The CI wi
 
 ### How to change env config using TravisCI?
 
-The command is pretty simple. All we need to do is copy the contents from one file to another.
+The command is pretty simple. All we need to do is copy the contents of one file to another.
 ```shell
 cp app/config/env/prod.env.js app/config/env.config.js
 ```
-Head over to [TravisCI]() chapter to know how and where to put the above mentioned command.
+Head over to [TravisCI]() chapter to know how and where to put the above-mentioned command.
 
 
 The code till here can be found on the **branch** [chapter/6/6.3](https://github.com/react-made-native-easy/note-taker/tree/chapter/6/6.3)

6-conventions-and-code-style/6.4-es7-features.md

@@ -1,11 +1,11 @@
-# Speed up development with some and ES7 features.
+# Speed up development with some ES7 features.
 
-We all have got our hands dirty with ES6 already and we all loved it. React Native supports some of the ES7 features out of the box so no setting up is required to use them. Let me introduce you to some of the ES7 features which will surely help you speed up your development:
+We all have got our hands dirty with ES6 already and loved it. React Native supports some of the ES7 features out of the box so no additional setup is required to use them. Let me introduce you to some of the ES7 features which will surely help you speed up your development:
 
 
 ### Class properties instead of constructor
 
-We all have used constructor() in our class components and had to use `.bind` while calling class member functions and faced problems accessing `this.setState` or `this.props`. Unfortunately that's how ES6 classes work. I am not gonna explain you why do we need to do all this(there are better resources available online to understand that 😉). But I can tell you a really interesting ES7 feature which you will love. Let me introduce you to <b>ES7 Class instances</b>.
+We all have used constructor() in our class components, used `.bind` while calling class member functions and faced problems accessing `this.setState` or `this.props`. Unfortunately, that's how ES6 classes work. I am not going to explain why we need to do all this (there are better resources available online to understand that 😉). But I can tell you a really interesting ES7 feature which you will love. Let me introduce you to <b>ES7 Class instances</b>.
 
 By using this feature, you can define class members (`state` for eg.) without the need of `constructor`.
 
@@ -32,8 +32,7 @@ class SomeComponent extends Component {
 ```
 
 ### Arrow functions instead of class methods
-
-Using the above feature, we can also define arrow functions as class instances and since arrow functions does not have their own scope, the `this` inside arrow function will always point to the class. Therefore you do not need to do binding of `this` inside constructor. And in most of the cases, you would not be required to use constructor at all. In our project, we never used constructor in any of the components 🤘
+Using the above feature, we can also define arrow functions as class instances and since arrow functions do not have their own scope, `this` inside arrow function will always point to the class. Therefore you do not need to do binding of `this` inside constructor. And in most of the cases, you would not be required to use constructor at all. In our project, we never used constructor in any of the components 🤘
 
 Before:
 ```js
@@ -61,7 +60,7 @@ class SomeComponent extends Component {
 ### Object rest spread
 ES6 already supports array spread operator. You can use the same syntax for objects as well. So instead of writing `Object.assign({},a,{b:2})`, we can directly use `{...a, b:2}`.
 
-You might say that there is nothing new in this. But if used well, it can make your react code much more beautiful and clean. Let me show you the code before and after using spread operator.
+You might say that there is nothing new in this. But if used well, it can make your React code much more beautiful and clean. Let me show you the code before and after using spread operator.
 
 
 Before