some changes

03_Day_Setting_Up/03_day_setting_up.md

@@ -589,13 +589,124 @@ ReactDOM.render(user, rootElement)
 
 ![Rendering image](../images/rendering_image.png)
 
+Let's inject the user inside the main JSX element and see the result
+
+```js
+// index.js
+import React from 'react'
+import ReactDOM from 'react-dom'
+// To get the root element from the HTML document
+import asabenehImage from './images/asabeneh.jpg'
+// JSX element, header
+const welcome = 'Welcome to 30 Days Of React'
+const title = 'Getting Started React'
+const subtitle = 'JavaScript Library'
+const author = {
+  firstName: 'Asabeneh',
+  lastName: 'Yetayeh',
+}
+const date = 'Oct 2, 2020'
+
+// JSX element, header
+const header = (
+  <header>
+    <div className='header-wrapper'>
+      <h1>{welcome}</h1>
+      <h2>{title}</h2>
+      <h3>{subtitle}</h3>
+      <p>
+        Instructor: {author.firstName} {author.lastName}
+      </p>
+      <small>Date: {date}</small>
+    </div>
+  </header>
+)
+
+const numOne = 3
+const numTwo = 2
+
+const result = (
+  <p>
+    {numOne} + {numTwo} = {numOne + numTwo}
+  </p>
+)
+
+const yearBorn = 1820
+const currentYear = new Date().getFullYear()
+const age = currentYear - yearBorn
+const personAge = (
+  <p>
+    {' '}
+    {author.firstName} {author.lastName} is {age} years old
+  </p>
+)
+
+// JSX element, main
+const techs = ['HTML', 'CSS', 'JavaScript']
+const techsFormatted = techs.map((tech) => <li>{tech}</li>)
+
+const user = (
+  <div>
+    <img src={asabenehImage} alt='asabeneh image' />
+  </div>
+)
+
+// JSX element, main
+const main = (
+  <main>
+    <div className='main-wrapper'>
+      <p>
+        Prerequisite to get started{' '}
+        <strong>
+          <em>react.js</em>
+        </strong>
+        :
+      </p>
+      <ul>{techsFormatted}</ul>
+      {result}
+      {personAge}
+      {user}
+    </div>
+  </main>
+)
+
+const copyRight = 'Copyright 2020'
+
+// JSX element, footer
+const footer = (
+  <footer>
+    <div className='footer-wrapper'>
+      <p>{copyRight}</p>
+    </div>
+  </footer>
+)
+
+// JSX element, app
+const app = (
+  <div className='app'>
+    {header}
+    {main}
+    {footer}
+  </div>
+)
+
+const rootElement = document.getElementById('root')
+// we render the JSX element using the ReactDOM package
+ReactDOM.render(app, rootElement)
+```
+
+![All JSX together final](../images/all_jsx_final.png)
+
 The boilerplate code can be found [here](../03/../03_Day_Setting_Up/30-days-of-react_boilerplate)
 
 # Exercises
 
+1. Import and render the following images
+   ![Front end](../images/frontend_technologies.png)
+
 1.Design the following user card.
 
-![User Card](../images/user_card_design.png)
+![User Card](../images/user_card_design_jsx.png)
 
 1.  Use h1, p, input and button HTML element to create the following design using JSX