jayeshd7 · jayeshd7 · Sep 16, 2023 · Sep 16, 2023 · Sep 23, 2023 · Sep 24, 2023
diff --git 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
@@ -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;
 }
diff --git 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
@@ -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 />);
diff --git a/package-lock.json b/package-lock.json
diff --git 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"
+  ]
 }