diff --git a/Inception/App.js b/Inception/App.js
index ffc4519..2647cce 100644
--- a/Inception/App.js
+++ b/Inception/App.js
@@ -1,61 +1,67 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 
-// const heading = React.createElement(
-//     "h1", 
-//     {id:"heading",'data-cy':"h1_heading" }, 
-//     "Hello Jayesh from React");
+//const heading = React.createElement("h1", {id:"heading"}, "Namaste React 🧑‍💻");
+//console.log(heading);
 
-// console.log(heading); // heading : returns object
-// const root = ReactDOM.createRoot(document.getElementById("root"));  
-// root.render(heading); // render the heading in the root element
+// JSX  - HTML like syntex for React, JSX ===> React.createElement() ==> React elements - JS objects --> DOM nodes --> Browser
+// JSX code is transpied before it is rendered in the browser & JS engine.
 
+// react element
 
-// nested element
 
+// react Comoonent
 /*
-  <div id = "parent">
-    < div id = "child">
-        <h1 id = "heading"> Hello Jayesh from React </h1>
-    </div>
-   </div>
-
-   ReactElement(object) -> ReactElement(object) -> ReactElement(object)
+class based component: old way write code
+fucntional components: new way to write code
+alwyas it starts with capital letter
+const fn = () => true;
+below both code are same - this is way to return
+const HeadingComponent = () => {
+    return <h1 className="heading"> Namaste React Using JSX🧑‍💻 </h1>;
+}
 
+const HeadingComponent = () => (
+     <h1 className="heading"> Namaste React Using JSX🧑‍💻 </h1>
+);
 */
-// hard coded
-// JSX using
-const parent = React.createElement(
-    "div", {id:"parent"}, 
-  [  React.createElement(
-    "div", {id:"child"},
-   [ React.createElement(
-        "h1", {}, "This is Jayesh  ") , 
-    React.createElement(
-            "h2", {}, "Working on React 🧑‍💻🚀 "),
-        ]),
-        React.createElement(
-            "div", {id:"child2"},
-           [ React.createElement(
-                "h1", {}, "There is a child2") , 
-            React.createElement(
-                    "h2", {}, "Child element has h2 tag"),
-                ])]
+const spanElement = (
+    <span> This is span element </span>
+  
+  );
+  
+
+const jsxHeading = (
+<h1 className="heading" tabIndex="5"> 
+{spanElement} 
+Namaste React Using JSX🧑‍💻 
+</h1>
+);
+
+const TitleComponent = () => (
+    <div id="container">
+    <h1 className="heading"> Title is React 👌 </h1>
+    </div>
 );
+const number = 10000;
+// component composition - combine multiple components
+// using {} we can write JS code inside JSX
 
-// JSX
-// const parent = (
-//     <div id="parent">
-//         <div id="child">
-//             <h1 id="heading">Hello Jayesh from React</h1>
+const HeadingComponent = () => (
+    <div id="container">
+        
+    {TitleComponent()}
+    <h2>{number}</h2>
+    {jsxHeading}
+    <h1 className="heading"> Namaste React Using JSX ❤️ </h1>
+    </div>
+);
 
-//         </div>
-//     </div>
-// );
 
 
-console.log(parent);
 const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(parent); // render the parent in the root element
-
+// way to render react element
+// root.render(jsxHeading);
 
+// way to render react component
+root.render(<HeadingComponent />);
diff --git a/Inception/index.css b/Inception/index.css
index bd4ad4c..83dd11c 100644
--- a/Inception/index.css
+++ b/Inception/index.css
@@ -6,4 +6,20 @@
     margin-top: 50px;
     margin-bottom: 50px;
 
+}
+#heading {
+    color: blue;
+    font-size: 50px;
+    font-family: 'Times New Roman', Times, serif;
+    text-align: center;
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+.heading {
+    color: blue;
+    font-size: 50px;
+    font-family: 'Times New Roman', Times, serif;
+    text-align: center;
+    margin-top: 50px;
+    margin-bottom: 50px;
 }
\ No newline at end of file
diff --git a/Inception/index.html b/Inception/index.html
index 0565e4a..1b458c3 100644
--- a/Inception/index.html
+++ b/Inception/index.html
@@ -9,8 +9,8 @@
 </head>
 <body>
     <h1> Top of the root</h1>
-    <div id="root">
-        <h1>Hello Jayesh from React</h1>
+    <div id="root" class="root">
+        <h1>Not render</h1>
     </div>
     <h1>Bottom of the root</h1>
     <!--<script>
diff --git a/README.md b/README.md
index 7d4ef67..e14bc14 100644
--- a/README.md
+++ b/README.md
@@ -31,3 +31,13 @@
 2. npm run start - run the server
 3. npm run build - build the code for production
 4. npm run build -- --no-minify - build the code for production without minification
+5. JSX make our developer life easy , JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment.
+6. Babel is JS compiler which is converted JSX into react.createEkement() function
+7. Babel is a JavaScript compiler. Use next generation JavaScript, today.
+8. Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. ( support new script in old browser )
+9. class based component: old way write code
+fucntional components: new way to write code
+alwyas it starts with capital letter
+10. component composition - combine multiple components
+11. using {} we can write JS code inside JSX
+12.  way to render react component root.render(<HeadingComponent />);
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d624238..a8fe500 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "emoji-picker-react": "^4.5.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -2168,6 +2169,14 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2457,6 +2466,20 @@
       "integrity": "sha512-qeXC3Zbykq44RCrBa4kr8v/dWzYJA8rAwpyh9Qd+NKWoJfjG5vvJqy9XOJ9H4P/lqulZBCgUWAYi+FeK5AuJ8g==",
       "dev": true
     },
+    "node_modules/emoji-picker-react": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/emoji-picker-react/-/emoji-picker-react-4.5.1.tgz",
+      "integrity": "sha512-zpm0ui0TWkXZDUIevyNM0rC9Jyqc08RvVXH0KgsbSkDr+VgMQmYLu6UeI4SIWMZKsKMjQwujPpncRCFlEeykjw==",
+      "dependencies": {
+        "clsx": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/entities": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
diff --git a/package.json b/package.json
index 8468ddc..89e6689 100644
--- a/package.json
+++ b/package.json
@@ -23,9 +23,11 @@
     "process": "^0.11.10"
   },
   "dependencies": {
+    "emoji-picker-react": "^4.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "browserslist":[
-    "last 2 chrome versions"]
+  "browserslist": [
+    "last 2 chrome versions"
+  ]
 }
