Create Parent and child components

Author: imranhsayed

README.md

@@ -7,9 +7,9 @@ I've branched the repo for individual topics.
 To checkout all branches run: `git branch --all`.
 To checkout individual branch run: `git checkout <branch name>`. From there on you should be good.
 
-## Branch Name: 01-react-app-webpack
+## Branch Name: 02-hierarchical-components
 ## Branch Description:
-Set up React Application with using Webpack and Babel
+Demo for Parent Child Components
 
 ## Installation
 

src/App.js

@@ -1,9 +1,13 @@
 import React from 'react';
+import ParentComponent from "./ParentComponent";
 
 class App extends React.Component {
 	render() {
 		return (
-			<div>My App Component</div>
+			<div>
+				My App Component
+				<ParentComponent/>
+			</div>
 		);
 	}
 }

src/ChildComponent.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const ChildComponent = ( props ) => {
+	return (
+		<h2>This is Child Component. Props are passed from { props.name } Component</h2>
+	)
+}

src/ParentComponent.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import {ChildComponent} from "./ChildComponent";
+
+class ParentComponent extends React.Component {
+
+	/**
+	 * Overriding parent Constructor
+	 * @param props
+	 */
+	constructor( props ) {
+		/**
+		 * Super is a way to call the Parent Constructor.
+		 * Pass props to super, When you want to access this.props in constructor, else this will be undefined
+		 * Passing or not passing props to super has no effect on later uses of this.props outside constructor.
+		 */
+		super( props );
+		this.state = {
+			name: 'Parent'
+		}
+	}
+
+	render() {
+		return (
+			<div>
+				This is { this.state.name }
+				<ChildComponent name={this.state.name}/>
+			</div>
+		);
+	}
+}
+
+export default ParentComponent;