diff --git a/02_Day_Introduction_to_React/index.html b/02_Day_Introduction_to_React/index.html
new file mode 100644
index 0000000..be5aaa2
--- /dev/null
+++ b/02_Day_Introduction_to_React/index.html
@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>30 Days Of React Challenge</title>
+    <style>
+        /* == General style === */
+        * {
+            box-sizing: border-box;
+            padding: 0;
+            margin: 0;
+        }
+
+        html,
+        body {
+            height: 100%;
+            line-height: 1.5;
+            font-family: 'Montserrat';
+            font-weight: 300;
+            color: black;
+        }
+
+        .root {
+            min-height: 100%;
+            position: relative;
+        }
+
+        .header-wrapper,
+        .main-wrapper,
+        .footer-wrapper {
+            width: 85%;
+            margin: auto;
+        }
+
+        .header-wrapper,
+        .main-wrapper {
+            padding: 10px;
+            margin: 2px auto;
+        }
+
+        h1 {
+            font-size: 70px;
+            font-weight: 300;
+        }
+
+        h2,
+        h3 {
+            font-weight: 300;
+        }
+
+        header {
+            background-color: #61dbfb;
+            padding: 10px;
+        }
+
+        main {
+            padding: 10px;
+            padding-bottom: 60px;
+            /* Height of the footer */
+        }
+
+        ul {
+            margin-left: 15px;
+        }
+
+        ul li {
+            list-style: none;
+        }
+
+        footer {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 60px;
+            /* Height of the footer */
+            background: #6cf;
+        }
+
+        .footer-wrapper {
+            font-weight: 400;
+            text-align: center;
+            line-height: 60px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="root"></div>
+
+    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script type="text/babel">
+        // To get the root element from the HTML document
+        const rootElement = document.querySelector('.root')
+
+        const welcome = 'Welcome to 30 Days Of React'
+        const title = 'Getting Started React'
+        const subtitle = 'JavaScript Library'
+        const author = {
+            firstName: 'Asabeneh',
+            lastName: 'Yetayeh'
+        }
+        const student = {
+            firstName: 'Daniil',
+            lastName: 'Kapustin'
+        }
+        const date = 'Oct 1, 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>
+                    <p>
+                        Student: {student.firstName} {student.lastName}
+                    </p>
+                    <small>Date: {date}</small>
+                </div>
+            </header>
+        )
+
+        const numOne = 3
+        const numTwo = 2
+
+        const result = (
+            <p>
+                {numOne} + {numTwo} = {numOne + numTwo}
+            </p>
+        )
+
+        const yearBorn = 1984
+        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 key={tech}>{tech}</li>)
+
+        const main = (
+            <main>
+                <div className='main-wrapper'>
+                    <p>
+                        Prerequisite to get started{' '}
+                        <strong>
+                            <em>react.js</em>
+                        </strong>
+                        :
+                    </p>
+                    <ul>{techsFormatted}</ul>
+                    {result}
+                    {personAge}
+                </div>
+            </main>
+        )
+
+        // JSX element, footer
+        const footer = (
+            <footer>
+                <div className='footer-wrapper'>
+                    <p>Copyright 2020</p>
+                </div>
+            </footer>
+        )
+
+        // JSX element, app, a container or a parent
+        const app = (
+            <div className='app'>
+                {header}
+                {main}
+                {footer}
+            </div>
+        )
+
+        // we render the JSX element using the ReactDOM package
+        // ReactDOM has the render method and the render method takes two arguments
+        ReactDOM.render(app, rootElement)
+    </script>
+    <script></script>
+</body>
+
+</html>
\ No newline at end of file
