Added some stuff to lesson_2 and lesson_1

Author: harshitkumar31

lesson_1/README.md

@@ -40,12 +40,20 @@ class ExampleComponent extends Component {
         return <h1>Hey, this is an example component</h1>;
     }
 }
+
+export default ExampleComponent;
 ```
 
 Noticed anything different about the above snippet of code?
 
 The above code is written in JSX Syntax. While you can write React without JSX syntax, JSX makes it elagant.
 
+You could also use React with plain javascript as follows:
+```javascript
+React.createElement('a', {href: 'mailto:xyz@example.com'}, 'xyz@example.com');
+```
+
+Its better to use JSX syntax to keep the code clean and readable.
 
 Understanding Component Life Cycle:
 

lesson_2/README.md

@@ -15,14 +15,17 @@ React components need data to work with. There are two ways of combining compone
    Example:
 
 ```javascript
+   import React from 'react';
+
    const Image = (props) => { // Arrow functions* 
 
        return <img src={props.url}></img>;
    }
 
    // Usage:
    const xyz = () => {
-       return <Image url="https://static.boredpanda.com/blog/wp-content/uploads/2014/04/irony-funny-pictures-40.jpg" />
+       return <Image url="https://static.boredpanda.com/blog/wp-content/uploads/2014/04/irony-funny-pictures-40.jpg"
+       />
    }
 ```
 
@@ -33,4 +36,68 @@ React components need data to work with. There are two ways of combining compone
 
 State is an object owned by the component and its scope is limited to the component. A component can initialize the state and update it when required. 
 
-![alt text](res/state.jpg)
+![alt text](res/state.jpg)
+
+Example:
+```javascript
+import React, {Component} from 'react';
+
+class StatefulExample extends Component {
+
+    constructor(props){
+        super(props);
+        this.state = {
+            count: 0,
+        };
+    }
+
+    onClick = () => {
+        this.setState({
+            count: this.state.count + 1, // this updates count
+        });
+    }
+
+    render(){
+        const { title } = this.props;
+        const { count } = this.state;
+
+        return (<div>
+        <h2>{title}</h2>
+        <button>{`I was clicked ${count} times`}</button>{/* Template literal */}
+        </div>);
+    }
+
+}
+
+```
+
+[Template Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+
+### When to use what?
+
+It all comes down to presentational and container components. 
+
+**Presentational Components** don't specify how data should be loaded or mutated.They simply receive data via props.They do not have dependencies. They are written as functional components(statesless). They may contain presentational or container components inside. 
+    
+    Example:
+```javascript
+    
+    import React from 'react';
+
+    const List = (props) => {
+        return (<ul>
+            {
+                props.items.map(
+                    (item, index)=>{
+                        return (<li>
+                                {item}
+                                </li>);
+                })
+            }
+        </ul>);
+    }
+
+
+```
+
+**Container Components**