Scribd
Upload
56 views

Simple React Page

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.

Uploaded by

test user
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
56 views

Simple React Page

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.

Uploaded by

test user
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 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