jsx day 1

3 years ago · 284b489b45
parent 4207b5d30d
commit 284b489b45
1 changed files with 178 additions and 0 deletions
--- a/02_Day_Introduction_to_React/index.html
+++ b/02_Day_Introduction_to_React/index.html
@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+            href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
+            rel="stylesheet"
+    />
+
+    <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')
+
+    // JSX element, header
+    const header = (
+        <header>
+            <div className='header-wrapper'>
+                <h1>Welcome to 30 Days Of React</h1>
+                <h2>Getting Started React</h2>
+                <h3>JavaScript Library</h3>
+                <p>Instructor: Asabeneh Yetayeh</p>
+                <small>Date: Oct 1, 2020</small>
+            </div>
+        </header>
+    )
+
+    // JSX element, main
+    const main = (
+        <main>
+            <div className='main-wrapper'>
+                <p>
+                    Prerequisite to get started{' '}
+                    <strong>
+                        <em>react.js</em>
+                    </strong>
+                    :
+                </p>
+                <ul>
+                    <li>HTML</li>
+                    <li>CSS</li>
+                    <li> JavaScript</li>
+                </ul>
+            </div>
+        </main>
+    )
+
+    // JSX element, footer
+    const footer = (
+        <footer>
+            <div className='footer-wrapper'>
+                <p>Copyright 2020</p>
+            </div>
+        </footer>
+    )
+
+    const mine =  <h1>Mine</h1>;
+
+    const user = (
+        <div>
+            <h1>Mehmet Arda çelik</h1>
+            <p>Turkey</p>
+            <p>Front End Developer</p>
+            <p>male</p>
+            <p>mehmetarda.celik@hotmail.com</p>
+            <p>05323369327</p>
+        </div>
+    )
+
+    // JSX elemet, app
+    const app = (
+        <div className='app'>
+            {header}
+            {main}
+            {mine}
+            {footer}
+        </div>
+    )
+
+    // we render the JSX element using the ReactDOM package
+    ReactDOM.render(app, rootElement)
+</script>
+</body>
+</html>