Scribd Logo
Upload

Welcome to Scribd!

  • 44 views

    Simple React Page

    Uploaded by

    test user
    The document includes the code for a simple React app with a Header, Body, and Footer component. The Header component contains a navbar with logo and links. The Body contains sample content. The Footer has a copyright notice. Additionally, there is CSS styling for layout and elements. The Page component renders and combines the other components. Finally, the Page component is rendered to the DOM.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    Simple React Page

    Uploaded by

    test user
    44 views3 pages
    The document includes the code for a simple React app with a Header, Body, and Footer component. The Header component contains a navbar with logo and links. The Body contains sample content. The Footer has a copyright notice. Additionally, there is CSS styling for layout and elements. The Page component renders and combines the other components. Finally, the Page component is rendered to the DOM.

    Original Title

    Simple react Page

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document includes the code for a simple React app with a Header, Body, and Footer component. The Header component contains a navbar with logo and links. The Body contains sample content. The Footer has a copyright notice. Additionally, there is CSS styling for layout and elements. The Page component renders and combines the other components. Finally, the Page component is rendered to the DOM.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    44 views3 pages

    Simple React Page

    Uploaded by

    test user
    The document includes the code for a simple React app with a Header, Body, and Footer component. The Header component contains a navbar with logo and links. The Body contains sample content. The Footer has a copyright notice. Additionally, there is CSS styling for layout and elements. The Page component renders and combines the other components. Finally, the Page component is rendered to the DOM.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    of 3

    Html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-
    zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-


    DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-
    fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
    </head>
    <body>
    <!-- class="container-fluid mt-3" -->
    <div>
    <div id="root"></div>
    </div>

    <script src="script.js" type="text/babel"></script>

    </body>
    </html>

    Styles (css)
    .nav-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    }

    .nav-items {
    list-style: none;

    display: flex;
    justify-content: space-evenly;
    }
    .nav-items > li {
    padding: 10px;
    }

    .img-style {
    width: 60px;
    }

    /* css style for a footer */


    .footer {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    width: 100%;
    position: fixed;
    bottom: 0;
    padding: 10px;
    }

    Javascript (React)
    // header component
    function Header() {
    return (
    <header>
    <nav className="nav-header container-fluid">
    <img className="img-style" src="./react-2.svg" />
    <ul className="nav-items">
    <li>Pricing</li>
    <li>About</li>
    <li>Contact</li>
    </ul>
    </nav>
    </header>
    )
    }

    // Footer component
    function Footer() {
    return (
    <footer className="footer">&copy; 2022 Akewak Biru development. All rights reserved.</footer>
    )
    }

    // Body component
    function Body() {
    return (
    <div className="container-fluid">
    <h1>Reasons that i am excited to learn javascript</h1>
    <ol>
    <li>i want to make some money</li>
    <li>i want to make some money</li>
    <li>i want to make some money</li>
    </ol>
    </div>
    )
    }

    // example react component with a pascal's case


    function Page() {
    return (
    <div>
    {/* instance of the Header component in another component. */}
    <Header />
    <Body />
    <Footer />
    </div>
    )
    }

    // render the component like an html tag.


    ReactDOM.render(
    <Page />,
    document.querySelector("#root")
    )

    You might also like