Merge pull request Asabeneh#51 from sandeep1201/minorChanges

Minor changes

04_Day_Component/04_components.md

@@ -33,32 +33,32 @@
 
 # Components
 
-A React component is small reusable code which is responsible for one part of the application UI. A React application is an aggregation of components. React can help us to build reusable components. The following diagram shows different components. All the components have different border colors. In react we assemble different components together to create an application. We use a JavaScript function or class to make components. If we use a function the component will be a functional component but if we use class the function will be a class based component.
+A React component is a small reusable code which is responsible for one part of the application UI. A React application is an aggregation of components. React can help us to build reusable components. The following diagram shows different components. All the components have different border colors. In React we assemble different components together to create an application. We use JavaScript functions or classes to make components. If we use a function the component will be a functional component but if we use a class the component will be a class-based component.
 
 Components can be:
 
-- Functional Component / Presentational Component / stateless component / Dumb components
-- Class Component / Container Component/ State full component / smart components
+- Functional Component / Presentational Component / stateless component / Dumb component
+- Class Component / Container Component/ State full component / smart component
 
 The above classifications of components does not work for the latest version of react but it is good to know the former definition and how the previous versions work.
 
-So, let us change all the JSX to components. Components in React are JavaScript functions or class which return a JSX. Component name must start with an uppercase and if the name is two word should be CamelCase, camel with two humps.
+So, let us change all the JSX to components. Components in React are JavaScript functions or class which return a JSX. Component name must start with an uppercase and if the name is two words should be CamelCase, camel with two humps.
 
 ## Big picture of components
 
-In the previous section, we agree that a website or an application is made of buttons, forms, texts, media objects, header, section, article and footer. If we have a million dollar button we can use this button all the time instead of creating all over again whenever we need a button the same goes for input fields, forms, header or footer. That is where the power of component comes. In the following diagram, the header, main and footer are components. Inside the main also there is a user card component and a text section component. All the different colors represent different components. How many colors do you see? We have five components in this diagram.
+In the previous section, we agree that a website or an application is made of buttons, forms, texts, media objects, header, section, article and footer. If we have a million-dollar button we can use this button all the time instead of creating all over again whenever we need a button the same goes for input fields, forms, header or footer. That is where the power of the component comes. In the following diagram, the header, main and footer are components. Inside the main also there is a user card component and a text section component. All the different colors represent different components. How many colors do you see? We have five components in this diagram.
 
 ![Components](../images/components_example.png)
 
 Before we jump into React components let's do some functions and class refreshers.
 
 ## JavaScript function
 
-A JavaScript function could be either a regular function or an arrow function. There is a slight difference between an regular function and an arrow functions.
+A JavaScript function could be either a regular function or an arrow function. There is a slight difference between a regular function and an arrow function.
 
 ```js
 const getUserInfo = (firstName, lastName, country, title, skills) => {
-  return `${firstName} ${lastName},  a ${title} developer base in ${country}. He knows ${skills.join(
+  return `${firstName} ${lastName},  a ${title} developer based in ${country}. He knows ${skills.join(
     ' '
   )} `
 }
@@ -71,7 +71,7 @@ console.log(
 
 ## JavaScript Class
 
-Class is a blue print of an object. We instantiate a class to create different objects. In addition, we can create children by inheriting all the methods and properties of the parent.
+A class is a blue print of an object. We instantiate a class to create different objects. In addition, we can create children by inheriting all the methods and properties of the parent.
 
 ```js
 class Parent {
@@ -118,13 +118,13 @@ const child = new Child(
 )
 ```
 
-We covered function and class in brief and React component is made from JavaScript functions or class. Now, lets make React component.
+We covered function and class in brief and React component is made of JavaScript functions or classes. Now, let's make a React component.
 
 ## Creating React Component
 
 ### Functional Component
 
-Using a JavaScript function we can make a functional React component.
+Using a JavaScript function, we can make a functional React component.
 
 ```js
 // React component syntax
@@ -189,7 +189,7 @@ const Header = () => (
 
 ### Rendering components
 
-Now, lets change all the JSX elements we had to components. When we call JSX element we use curly brackets and when we call components we do as follows <ComponentName />. If we pass an attribute when we call the component name, we call it props(<ComponentName propsName = {'data type'} />). We will talk about props in its section.[Live on code pen](https://codepen.io/Asabeneh/full/wvaKKEM)
+Now, lets change all the JSX elements we had to components. When we call JSX element we use curly brackets and when we call components we do as follows <ComponentName />. If we pass an attribute, when we call the component name, we call it props(<ComponentName propsName = {'data-type'} />). We will talk about props in its section.[Live on code pen](https://codepen.io/Asabeneh/full/wvaKKEM)
 
 Let's render first the _Header_ component.
 
@@ -292,9 +292,9 @@ ReactDOM.render(<App />, rootElement)
 
 ### Injecting data to JSX in React Component
 
-So far, we used static data on the JSX elements now let's pass different data types as a dynamic data. The dynamic data could be string, number, boolean, array or object. Let us see each of the data types step by step. To inject data to a JSX we use the {} bracket.
+So far, we used static data on the JSX elements now let's pass different data types as dynamic data. The dynamic data could be string, number, boolean, array or object. Let us see each of the data types step by step. To inject data to a JSX we use the {} bracket.
 
-In this section we only inject only strings
+In this section we inject only strings
 
 ```js
 import React from 'react'
@@ -458,7 +458,7 @@ const buttonStyles = {
 const Button = () => <button style={buttonStyles}> action </button>
 ```
 
-The Button component is a dumb component because it does not take any parameter and we can not change the action text dynamically. We need to pass a props to the button to change the value dynamically. We will see props in the next section. Before we close today's lesson let's make another more functional component which displays a random hexadecimal number.
+The Button component is a dumb component because it does not take any parameter and we can not change the action text dynamically. We need to pass props to the button to change the value dynamically. We will see props in the next section. Before we close today's lesson let's make another more functional component which displays a random hexadecimal number.
 
 ```js
 import React from 'react'

05_Day_Props/05_props.md

@@ -47,7 +47,7 @@ In the previous day, we saw how to inject different data types to React componen
 
 Props is a special keyword in React that stands for properties and is being used to pass data from one component to another and mostly from parent component to child component. We can say props is a data carrier or a means to transport data.
 
-I hope you are familiar with JavaScript function. Most of the time, functions with parameters are smart and they can take dynamic data likewise props is a way we pass data or parameter to a component. Let's see the difference between a function and a component.
+I hope you are familiar with the JavaScript function. Most of the time, functions with parameters are smart and they can take dynamic data likewise props is a way we pass data or parameter to a component. Let's see the difference between a function and a component.
 
 ```js
 // function syntax
@@ -78,7 +78,7 @@ const User = (props) => {
 <User firstName = 'Asabeneh', lastName='Yetayeh' country = 'Finland' />
 ```
 
-In the previous section, we injected data as follow and today we will change these data to a props.
+In the previous section, we injected data as follows and today we will change these data to props.
 
 ```js
 const welcome = 'Welcome to 30 Days Of React'
@@ -106,7 +106,7 @@ const Header = () => (
 )
 ```
 
-Instead of injecting data we can also pass the data as a props. React props is similar to parameters in function.
+Instead of injecting data we can also pass the data as props. React props are similar to parameters in functions.
 
 ## Props object
 
@@ -163,7 +163,7 @@ const Header = (props) => {
   return (
     <header>
       <div className='header-wrapper'>
-        <h1>{welcome}</h1>
+        <h1>{props.welcome}</h1>
       </div>
     </header>
   )
@@ -192,7 +192,7 @@ Now, when you do console.log(props) you should get the following object, that me
 }
 ```
 
-As you can see in the above code, we passed only a single props to Header component, the welcome props. A component can have one or many props. Props could be different data types. It could be a string, number, boolean, array, object or a function. We will cover different kind of props in the next sections.
+As you can see in the above code, we passed only single props to Header component, the welcome props. A component can have one or many props. Props could be different data types. It could be a string, number, boolean, array, object or a function. We will cover different kind of props in the next sections.
 
 ### Different data type props
 
@@ -372,7 +372,7 @@ ReactDOM.render(<App />, rootElement)
 
 ### Array props type
 
-In programming arrays and objects are the most frequent use data structure to solve different problems and store data in more structured way. Therefore, we encounter data in the form of array quite often. Let's pass an array props to a component
+In programming arrays and objects are the most frequently used data structure to solve different problems and store data in a more structured way. Therefore, we encounter data in the form of an array quite often. Let's pass an array as props to a component
 
 ```js
 import React from 'react'
@@ -390,7 +390,7 @@ const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
 ```
 
-If you see the result on the browser, the skills elements needs formatting. Therefore before we render it should have some elements between each skills. To modify the array and to add a li element we can use map method. You should be very familiar with the functional programming map, filter and reduce to feel good at React if not please back to day 1 JavaScript refresher. Let's apply map to modify the array.
+If you see the result on the browser, the skills elements needs formatting. Therefore before we render, it should have some elements between each skill. To modify the array and to add a li element we can use map method. You should be very familiar with the functional programming map, filter and reduce to feel good at React if not please go back to day 1 JavaScript refresher. Let's apply map to modify the array.
 
 ```js
 import React from 'react'
@@ -413,12 +413,12 @@ const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
 ```
 
-We will go in depth about list and map in an other sections. Now, let's see an object as a props.
+We will go in-depth about list and map in other sections. Now, let's see an object as a props.
 
 ### Object props type
 
 We may pass an object as props to a React component. Let's see an example.
-We can change the previous Header props to object. For the time being let's change few properties for better understanding.
+We can change the previous Header props to object. For the time being let's change a few properties for better understanding.
 
 ```js
 import React from 'react'
@@ -457,7 +457,7 @@ const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
 ```
 
-Now, let's change all the previous Header properties to an objects.
+Now, let's change all the previous Header properties to an object.
 
 ```js
 import React from 'react'
@@ -525,11 +525,11 @@ const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
 ```
 
-When we use object as props we usually destructure the data to access the values. Destructuring makes our code easy to read. We will see soon destructuring of props but before that let's see function as a props for a React component.
+When we use an object as props we usually destructure the data to access the values. Destructuring makes our code easy to read. We will soon see the destructuring of props but before that let's see function as props for a React component.
 
 ### Function prop types
 
-We can pass function as prop type to a React component. Let's see examples
+We can pass a function as props type to a React component. Let's see some examples
 
 ```js
 import React from 'react'
@@ -557,7 +557,7 @@ const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
 ```
 
-Even we can write function inside the curly bracket
+Even we can write a function inside the curly bracket
 
 ```js
 import React from 'react'
@@ -581,7 +581,7 @@ const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
 ```
 
-Now, lets implement different functions as a props
+Now, lets implement different functions as props
 
 ```js
 import React from 'react'
@@ -609,9 +609,9 @@ const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
 ```
 
-In the above example, onClick is a props to hold the greetPeople functions. HTML has onclick, onmouseover, onhover, onkeypress and etc event handlers. In React, these handlers are in camelCase. For instance onClick, onMouseOver, onKeyPress etc. We will cover events in React in detail in other section.
+In the above example, onClick is a props to hold the greetPeople function. HTML has onclick, onmouseover, onhover, onkeypress and etc event handlers. In React, these handlers are in camelCase. For instance onClick, onMouseOver, onKeyPress etc. We will cover events in React in detail in other section.
 
-Let's see another more function as props to give a clear understanding how to handle function as a props in React component.
+Let's see some more functions as props to give a clear understanding how to handle function as props in a React component.
 
 This component shows month, date and year as an alert box.
 
@@ -668,7 +668,7 @@ ReactDOM.render(<App />, rootElement)
 
 ## Destructuring props
 
-By now, I believe you are a JavaScript ninja and you know about destructing arrays and object. Destructuring code to some extent makes easy to read. Let us destructure the props in Header component. Everything we passed as a props is stored in props object. Therefore, props is an object and we can destructure the properties. Let's destructure some of the props we wrote in object props example. We can destructure in many ways:
+By now, I believe you are a JavaScript ninja and you know about destructing arrays and objects. Destructuring code to some extent makes easy to read. Let us destructure the props in Header component. Everything we passed as  props is stored in props object. Therefore, props is an object and we can destructure the properties. Let's destructure some of the props we wrote in object props example. We can destructure in many ways:
 
 1. Step by step destructuring
 
@@ -1057,27 +1057,27 @@ ReactDOM.render(<App />, rootElement)
 
 ## propTypes
 
-The propTypes package help as to assign the data types of the props we passed to a component.
+The propTypes package helps us to assign the data types of the props we passed to a component.
 
 ## defaultProps
 
 The defaultProps can be used when we want to have some default prop types for a component.
 
-We will cover propTypes in detail in other section.
+We will cover propTypes in detail in other sections.
 
 # Exercises: Components and Props
 
 ## Exercises: Level 1
 
 1. What is props in a React component ?
-2. How do you access props in React component ?
-3. What data types can we pass as a props to components ?
-4. What is a propTypes
-5. What is a default propTypes
+2. How do you access props in a React component ?
+3. What data types can we pass as props to  components ?
+4. What is a propTypes?
+5. What is a default propTypes?
 
 ## Exercises: Level 2
 
-1. Create functional components and display the following images
+1. Create a functional component and display the following images
    ![Front end](../images/frontend_technologies.png)
 
 2.Use functional component to design the following user card.