Improve wording throughout tutorial

src/capstone/Capstone.js

@@ -10,7 +10,7 @@ const EMPTY_TICKER_MSG = 'Please type a stock ticker and click Search button.';
 
 /**
  * 🏆
- * The goal of this capstone project is to bring together most of the 
+ * The goal of this capstone project is to bring together most of the
  * concepts you have learned in this tutorial together by building this feature.
  * The feature we are building is pretty straight forward. There's an input
  * field and a search button. When the user types in a valid stock ticker and
@@ -32,7 +32,7 @@ class Capstone extends Component {
     handleSearch(stockTicker) {
         /**
          * ✏️ 
-         * When this method is called, it will be given a stockTicker 
+         * When this method is called, it will be given a stockTicker
          * as an argument. You need to call setState to set the stockTicker
          * state to the value provided to this function
          */
@@ -48,7 +48,7 @@ class Capstone extends Component {
          *      Like: isEmpty(this.state.stockTicker)
          * 🧭  If it is empty assign <div>{EMPTY_TICKER_MSG}</div> to EmptyTickerMessage
          * 🧭  If the stockTicker is not empty assign null to EmptyTickerMessage
-         * You can either use ternery operator - 
+         * You can either use ternery operator -
          *      const a = isEmpty(b) ? c : null;
          * OR you can use '&&' operator -
          *      const a = isEmpty(b) && c;

src/capstone/CompanyFinancial.jsx

@@ -56,24 +56,24 @@ class CompanyFinancial extends Component {
     * every time either the props changes or the state changes for this component
     */
     componentDidUpdate(prevProps, prevState) {
-    /**
-     * ✏️ 
-     * You need to call the fetchCompanyFinancial method to fetch the 
-     * comanyFinancial data when the parent passes you a different stockTicker
-     * 🧭  Remember to check if the stockTicker props changed before calling the 
-     *     fetchCompanyFinancial method though. You DON'T want to fetch the data
-     *     if the stockTicker hasn't changed. If you don't check whether props
-     *     changed your component will go in an infinite loop - it will be
-     *     fetching the same data over and over again.
-     * This lifecycle method will be given multiple arguments.
-     * First argument is the value of props before this component updated
-     * Second argument is the value of the state before this component updated
-     * In our case we just want to check props to see if value for stockTicker 
-     * changed and the way to do this is:
-     *  if (this.props.stockTicker !== prevProps.stockTicker) {
-     *     //Fetch data here only if the current props is not same as previous props
-     *  }
-     */
+        /**
+         * ✏️ 
+         * You need to call the fetchCompanyFinancial method to fetch the 
+         * comanyFinancial data when the parent passes you a different stockTicker
+         * 🧭  Remember to check if the stockTicker props changed before calling the 
+         *     fetchCompanyFinancial method though. You DON'T want to fetch the data
+         *     if the stockTicker hasn't changed. If you don't check whether props
+         *     changed your component will go in an infinite loop - it will be
+         *     fetching the same data over and over again.
+         * This lifecycle method will be given multiple arguments.
+         * First argument is the value of props before this component updated
+         * Second argument is the value of the state before this component updated
+         * In our case we just want to check props to see if value for stockTicker 
+         * changed and the way to do this is:
+         *  if (this.props.stockTicker !== prevProps.stockTicker) {
+         *     //Fetch data here only if the current props is not same as previous props
+         *  }
+         */
     }
 
     /**

src/capstone/CompanyProfile.jsx

@@ -49,38 +49,38 @@ class CompanyProfile extends Component {
          */
     }
 
-    /* 
+    /**
     * 💡 
     * This is another lifecycle method. React will invoke this lifecyle method
     * after the component is updated. Remember the component will be updated
     * every time either the props changes or the state changes for this component
     */
     componentDidUpdate(prevProps, prevState) {
-    /**
-     * ✏️ 
-     * You need to call the fetchCompanyProfile method to fetch the 
-     * comanyProfile data when the parent passes you a different stockTicker
-     * 🧭  Remember to check if the stockTicker props changed before calling the 
-     *     fetchCompanyProfile method though. You DON'T want to fetch the data
-     *     if the stockTicker hasn't changed. If you don't check whether props
-     *     changed your component will go in an infinite loop - it will be
-     *     fetching the same data over and over again.
-     * This lifecycle method will be given multiple arguments.
-     * First argument is the value of props before this component updated
-     * Second argument is the value of the state before this component updated
-     * In our case we just want to check props to see if value for stockTicker 
-     * changed and the way to do this is:
-     *  if (this.props.stockTicker !== prevProps.stockTicker) {
-     *     //Fetch data here only if the current props is not same as previous props
-     *  }
-     */
+        /**
+         * ✏️ 
+         * You need to call the fetchCompanyProfile method to fetch the
+         * comanyProfile data when the parent passes you a different stockTicker
+         * 🧭  Remember to check if the stockTicker props changed before calling the
+         *     fetchCompanyProfile method though. You DON'T want to fetch the data
+         *     if the stockTicker hasn't changed. If you don't check whether props
+         *     changed your component will go in an infinite loop - it will be
+         *     fetching the same data over and over again.
+         * This lifecycle method will be given multiple arguments.
+         * First argument is the value of props before this component updated
+         * Second argument is the value of the state before this component updated
+         * In our case we just want to check props to see if value for stockTicker
+         * changed and the way to do this is:
+         *  if (this.props.stockTicker !== prevProps.stockTicker) {
+         *     //Fetch data here only if the current props is not same as previous props
+         *  }
+         */
     }
 
     /**
      * 💡 
      * This is a method to fetch the company profile data from the API.
      * Couple things to note here:
-     * 1. We are updating the errorMsg state to empty string. This is jus to 
+     * 1. We are updating the errorMsg state to empty string. This is jus to
      *    reset any error message we might have from previous search
      * 2. We invoke the API only when the stockTicker is truthy. No point in
      *    calling the API if we don't have any value for stockTicker
@@ -104,7 +104,7 @@ class CompanyProfile extends Component {
      * Updates the companyProfile state with the argument provided
      */
     updateCompanyProfile(companyProfile) {
-        this.setState({ companyProfile })
+        this.setState({ companyProfile });
     }
 
     /**
@@ -135,15 +135,15 @@ class CompanyProfile extends Component {
         /**
          * ✏️ 
          * We want to render an error message if the API returns some error.
-         * We want to check if we have `errorMsg` state is not empty and 
+         * We want to check if we have `errorMsg` state is not empty and
          * if it's not render the message inside a div
          * 🧭 There's an `isEmpty` function that's already imported. Use that
          *  to check if the `errorMsg` state is empty
          *      Like: isEmpty(this.state.errorMsg)
          * 🧭  If it is empty assign null to ErrorMsg
          * 🧭  If the errorMsg is not empty assign <div>{this.state.errorMsg}</div>
          *     to the ErrorMsg constant.
-         * You can either use ternery operator - 
+         * You can either use ternery operator -
          *      const a = isEmpty(b) ? c : null;
          * OR you can use '&&' operator -
          *      const a = isEmpty(b) && c;
@@ -156,7 +156,7 @@ class CompanyProfile extends Component {
          * 💡 
          * Here we are doing same thing as the ErrorMsg above
          * Instead of checking for `errorMsg` we are checking for `companyProfile`
-         * state. We are displaying the `div` only if the `companyProfile` 
+         * state. We are displaying the `div` only if the `companyProfile`
          * state is not empty.
          */
 

src/capstone/Search.jsx

@@ -6,7 +6,7 @@ import style from './solution/style';
  * This component houses the input and the Search button.
  * When the user types in something we handle the change event and
  * store the values typed in the input field to the state
- * When user clicks the Search button it will invoke a callback function 
+ * When user clicks the Search button it will invoke a callback function
  * that was passed to this component as a props with the latest input value
  * as an argument
  */

src/exercise/06-LifecycleMethods.js

@@ -68,7 +68,7 @@ class CompanyProfile extends Component {
 
 /**
  * 🚨 🚨 DO NOT DELETE OR CHANGE THIS.🚨 🚨
- * This is how you would use your above component and 
+ * This is how you would use your above component and
  * the output of this code is displayed on the browser
  */
 const Usage = (props) => {

src/exercise/07-HandlingEvents.js

@@ -63,7 +63,7 @@ class FancyInput extends Component {
 
 /**
  * 🚨 🚨 DO NOT DELETE OR CHANGE THIS.🚨 🚨
- * This is how you would use your above component 
+ * This is how you would use your above component
  * The output of this code is displayed on the browser on the left hand side
  */
 const Usage = (props) => {

src/tutorial/01-HelloWorld.md

@@ -26,7 +26,7 @@ You should try this for yourself. Open the exercise file and edit the function t
 
 <!--exercise-->
 
-Notice that `React.createElement` is a simple javascript function which takes three arguments. First argument is the element you want to render. In our case it's a `div` element. Second argument is any properties we want to pass to that element. In our case we are not passing anything so it's null. Third argument is the children for this component. In this case it's the text we want to display - `Hello World`. So with this we are telling React to render a div element like this:
+Notice that `React.createElement` is a simple JavaScript function which takes three arguments. First argument is the element you want to render. In our case it's a `div` element. Second argument is any properties we want to pass to that element. In our case we are not passing anything so it's null. Third argument is the children for this component. In this case it's the text we want to display - `Hello World`. So with this we are telling React to render a div element like this:
 
 ```html
 <div>
@@ -36,11 +36,11 @@ Notice that `React.createElement` is a simple javascript function which takes th
 
 Congratulations, you have created your first Hello World React component.
 
-Now your inquisitive mind is probably asking - how in the world React renders this thing on the browser?
+Now your inquisitive mind is probably asking - how in the world does React render this thing on the browser?
 
 ## Rendering
 
-Let's step back from React for a moment and think about how we can create the similar Hello World `div` using pure Javascript. Yes pure Javascript - without any frameworks.
+Let's step back from React for a moment and think about how we can create the similar Hello World `div` using pure JavaScript. Yes pure JavaScript - without any frameworks.
 
 ### Good Ol' Days
 
@@ -55,7 +55,7 @@ Let's imagine you have a barebone `html` file that looks like below. It has a `d
 </html>
 ```
 
-Now imagine inside the `div` with id `root` we want to render another `div` that says `Hello World`. The only catch is we want to do that programmatically using pure Javascript.
+Now imagine inside the `div` with id `root` we want to render another `div` that says `Hello World`. The only catch is we want to do that programmatically using pure JavaScript.
 To achieve this we can probably do something like this:
 
 ```js
@@ -73,7 +73,7 @@ Here we are creating a `div` node with `Hello World` text and appending that `di
 We can actually write our entire application this way - creating elements, removing elements, appending elements, etc ourselves. As a matter of fact we did write applications this way before all these UI frameworks/libraries started to mushroom.
 
 ### Age of React
-A simple example like the one above are not that hard to write with pure Javascript but once your application gets bigger, it gets messier. That's where libraries like React come to the rescue - they hide away from us the messier part of rendering on the browser.
+A simple example like the one above are not that hard to write with pure JavaScript but once your application gets bigger, it gets messier. That's where libraries like React come to the rescue - they hide away from us the messier part of rendering on the browser.
 
 The Core React library itself doesn't really know how to render anything on the browser because it is designed to work in a web browser as well as native applications. Thus the job of rendering your component on the browser is done by another library provided by React team called `ReactDOM`.
 
@@ -85,7 +85,7 @@ ReactDOM.render(HelloWorld, document.getElementById('root'))
 
 Here we are calling a function called `render` on `ReactDOM` object. The first argument of the function is the component you want to render - in our case `HelloWorld`. Second argument is a document selector. ReactDOM appends the component we want to display (first argument) as a child of the node returned by the selector (second argument).
 
-Compare this solution to the pure Javascript solution we looked at earlier. With pure Javascript we were doing the DOM manipulation ourselves - creating the `div`, appending the text and appending the newly created `div` to the `div` with id `root` as its child. But with React we are not doing any DOM manipulation ourselves. Basically we are saying to React - 
+Compare this solution to the pure JavaScript solution we looked at earlier. With pure JavaScript we were doing the DOM manipulation ourselves - creating the `div`, appending the text and appending the newly created `div` to the `div` with id `root` as its child. But with React we are not doing any DOM manipulation ourselves. Basically we are saying to React - 
 
 > Hey React I have a component I want to render. I will tell you what the component should look like when it's rendered (remember this is what the return of the Component function tells). I will also tell you where to render this component (second argument we passed to `ReactDOM.render` function). But I don't want to get involved in DOM manipulation - I will let you do all the DOM manipulation yourself. You can call all these DOM api like `document.createElement`, `.append`, `.appendChild` etc. whenever you wish - I trust you and I don't care as long as I see on the browser what I expected to see.
 

src/tutorial/02-IntroToJSX.md

@@ -1,18 +1,18 @@
-In the [previous section](/tutorial/hello-world) we created our first Hello World function component. Remember we returned `React.createElement` from the function to tell React what the DOM should look like when we render this component. Another alternative way of telling React what the DOM should look like is by using JSX. JSX is a very common and recommended way (preferred over `React.createElement` syntax in most cases) to write React code. JSX is a funny looking syntax though - it's not purely HTML, it's not purely Javascript. But it's an extension of Javascript where you can write HTML like syntax with full power of Javascript. For example, the equivalent of return statement we saw in [previous page](/tutorial/hello-world) (using `React.createElement`) in JSX would be:
+In the [previous section](/tutorial/hello-world) we created our first Hello World function component. Remember we returned `React.createElement` from the function to tell React what the DOM should look like when we render this component. Another alternative way of telling React what the DOM should look like is by using JSX. JSX is a very common and recommended way (preferred over `React.createElement` syntax in most cases) to write React code. JSX is a funny looking syntax though - it's not purely HTML, it's not purely JavaScript. But it's an extension of JavaScript where you can write HTML like syntax with full power of JavaScript. For example, the equivalent of return statement we saw in [previous page](/tutorial/hello-world) (using `React.createElement`) in JSX would be:
 
 ```jsx
 return (
     <div>Hello World</div>
 )
 ```
 
-Instead of returning Javascript code, it's returning HTML-like code (it's not HTML) and notice it's not a string. Wait, what?!! Welcome to JSX!
+Instead of returning JavaScript code, it's returning HTML-like code (it's not HTML) and notice it's not a string. Wait, what?!! Welcome to JSX!
 
 You don't trust that this weird syntax works, do you? Open the exercise file and edit the return statement with the JSX and save to see the magic happen!
 
 <!--exercise-->
 
-Although you write HTML looking syntax, your JSX code is compiled into a Javascript function like the one we saw in the previous page. The above JSX code is compiled into:
+Although you write HTML looking syntax, your JSX code is compiled into a JavaScript function like the one we saw in the previous page. The above JSX code is compiled into:
 
 ```jsx
 return React.createElement('div', null, 'Hello World');