Coding problem 32

Create a new React application called ‘myApp’ and display just “Hello world” in the web page. You
need to clean up the default files and code a bit to achieve this.

The output should look like this:

Solution:

Use npx create-react-app myApp to create the app.

Then, clean up the App.js file, to end up with the following:

function App() {
return (
<div className="App">
<h1>Hello world!</h1>
</div>
);
}

export default App;

Finally, use npm start to start a development server to look at the output.

Full Stack Development Specialization Training Page 1 of 16

 Coding problem 33

The output should look like this (the styles can be very simple, since I just want you to learn how to apply
CSS styles to React components):
In the same React app, add your introduction, and pretty it up as you like. You need to import CSS
to achieve any kind of styling effect.

Solution:

App.js:

import './App.css';

function App() {
return (
<div className="App">
<h1>My Introduction</h1>
<h2>I'm Aarthi. I'm a programmer.</h2>
</div>
);
}

export default App;

App.css:

Full Stack Development Specialization Training Page 2 of 16

 .App {
width: 70%;
height: auto;
text-align: center;
background-color: #ff6666;
margin: 70px auto;
padding: 20px;
border: 2px solid brown;
border-radius: 5px;
}

.App h1 {
font-size: 5em;
color: #fff;
text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
}

Coding problem 34

Create 3 components called Header, Body and Footer, add content to them, and inject them all into
the root component. You don’t have to design the components. This is just to test if you can
create components and inject them in another component.

The output should look something like this:

Full Stack Development Specialization Training Page 3 of 16

 Solution:

Header.js

function Header() {
return (
<div className="Header">
<h1>Header Content</h1>
</div>
);
}

export default Header;

Footer.js
function Footer() {
return (
<div className="Footer">
<h4>Copyright &copy; 2022</h4>
</div>
);
}

export default Footer;

Full Stack Development Specialization Training Page 4 of 16

 Body.js

function Body() {
return (
<div className="Body">
<h2>Body Title</h2>
<h3>Body Subtitle</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed mauris
non sem semper rutrum ut sed neque. Curabitur rhoncus massa nibh, in consectetur nulla
tempus a. Vestibulum diam enim, tincidunt vestibulum scelerisque sit amet, ornare nec
lacus. Duis ut erat sed ex posuere pellentesque. Curabitur et eleifend ipsum. Nulla
tristique sit amet diam nec aliquet. Proin tellus enim, pellentesque at augue quis,
blandit convallis arcu. Cras sit amet diam at eros pellentesque lacinia eget ut massa. In
elit mi, tempor non dolor a, iaculis convallis sapien. In et libero sed felis commodo
cursus volutpat at ex. Vestibulum augue nunc, mollis eget ante nec, placerat semper
arcu.</p>
<p>Mauris nibh velit, molestie a luctus eu, pulvinar sed turpis. Vestibulum vel
maximus purus. In nec congue lacus, sed interdum lorem. Ut viverra at ex vitae elementum.
Nullam sed porta magna. Curabitur vel massa volutpat, consectetur mi a, elementum lectus.
Ut ac urna tincidunt, feugiat justo et, tempus est. Sed suscipit nisl ut mi suscipit
condimentum. Proin malesuada mattis augue quis venenatis. Integer tincidunt, nisi eu
imperdiet facilisis, arcu sem condimentum justo, eget elementum ipsum augue a felis.
Vivamus tortor neque, malesuada et ligula non, pulvinar viverra dolor. Vivamus faucibus
ultrices leo, ut egestas tellus tincidunt ut. Curabitur ullamcorper massa eu odio
sodales, id consectetur arcu consectetur. Cras viverra diam eu pellentesque
tincidunt.</p>
<p>Proin semper condimentum nisi a suscipit. Nunc feugiat volutpat elit et
maximus. Mauris et feugiat lacus. Pellentesque varius aliquam ex quis efficitur. Fusce
laoreet leo quis sem fermentum accumsan. Suspendisse est leo, accumsan sed urna ut,
mattis cursus orci. Maecenas lacus massa, blandit at sapien at, tristique pharetra orci.
Praesent dolor nulla, blandit et orci eget, cursus blandit urna. Nunc blandit tellus
vitae sapien mattis, sit amet cursus nibh venenatis. Donec vitae lorem id dui dapibus
ornare non nec dui. Morbi vitae tempus quam, ut molestie urna. Vestibulum sed nibh non
justo viverra interdum. Quisque hendrerit, enim at porttitor facilisis, nunc risus
commodo augue, in pellentesque lacus augue vel nisl. Vestibulum eu eros metus.</p>
</div>
);
}

export default Body;

App.js

Full Stack Development Specialization Training Page 5 of 16

 import './App.css';
import Header from './Header';
import Footer from './Footer';
import Body from './Body';

function App() {
return (
<div className="App">
<Header/>
<Body/>
<Footer/>
</div>
);
}

export default App;

Full Stack Development Specialization Training Page 6 of 16

 Coding problem 35

Continuing from the last code exercise, from the root component, send prop data for the following:
“Header title”, “Blog title” and “Copyright year” and dynamically display them in the components.

The output should look the same as before, but the data should have been sent from App.js for the 3
instances mentioned above.

Solution:

Header.js

function Header(prop) {
return (
<div className="Header">
<h1>{prop.content}</h1>
</div>
);
}

export default Header;

Full Stack Development Specialization Training Page 7 of 16

 Footer.js
function Footer(prop) {
return (
<div className="Footer">
<h4>Copyright &copy; {prop.year}</h4>
</div>
);
}

export default Footer;

Body.js

function Body(prop) {
return (
<div className="Body">
<h2>{prop.title}</h2>
<h3>Body Subtitle</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed mauris
non sem semper rutrum ut sed neque. Curabitur rhoncus massa nibh, in consectetur nulla
tempus a. Vestibulum diam enim, tincidunt vestibulum scelerisque sit amet, ornare nec
lacus. Duis ut erat sed ex posuere pellentesque. Curabitur et eleifend ipsum. Nulla
tristique sit amet diam nec aliquet. Proin tellus enim, pellentesque at augue quis,
blandit convallis arcu. Cras sit amet diam at eros pellentesque lacinia eget ut massa. In
elit mi, tempor non dolor a, iaculis convallis sapien. In et libero sed felis commodo
cursus volutpat at ex. Vestibulum augue nunc, mollis eget ante nec, placerat semper
arcu.</p>
<p>Mauris nibh velit, molestie a luctus eu, pulvinar sed turpis. Vestibulum vel
maximus purus. In nec congue lacus, sed interdum lorem. Ut viverra at ex vitae elementum.
Nullam sed porta magna. Curabitur vel massa volutpat, consectetur mi a, elementum lectus.
Ut ac urna tincidunt, feugiat justo et, tempus est. Sed suscipit nisl ut mi suscipit
condimentum. Proin malesuada mattis augue quis venenatis. Integer tincidunt, nisi eu
imperdiet facilisis, arcu sem condimentum justo, eget elementum ipsum augue a felis.
Vivamus tortor neque, malesuada et ligula non, pulvinar viverra dolor. Vivamus faucibus
ultrices leo, ut egestas tellus tincidunt ut. Curabitur ullamcorper massa eu odio
sodales, id consectetur arcu consectetur. Cras viverra diam eu pellentesque
tincidunt.</p>
<p>Proin semper condimentum nisi a suscipit. Nunc feugiat volutpat elit et
maximus. Mauris et feugiat lacus. Pellentesque varius aliquam ex quis efficitur. Fusce
laoreet leo quis sem fermentum accumsan. Suspendisse est leo, accumsan sed urna ut,
mattis cursus orci. Maecenas lacus massa, blandit at sapien at, tristique pharetra orci.
Praesent dolor nulla, blandit et orci eget, cursus blandit urna. Nunc blandit tellus
vitae sapien mattis, sit amet cursus nibh venenatis. Donec vitae lorem id dui dapibus

Full Stack Development Specialization Training Page 8 of 16

 ornare non nec dui. Morbi vitae tempus quam, ut molestie urna. Vestibulum sed nibh non
justo viverra interdum. Quisque hendrerit, enim at porttitor facilisis, nunc risus
commodo augue, in pellentesque lacus augue vel nisl. Vestibulum eu eros metus.</p>
</div>
);
}

export default Body;

App.js

import './App.css';
import Header from './Header';
import Footer from './Footer';
import Body from './Body';

function App() {
return (
<div className="App">
<Header content="Header Content"></Header>
<Body title="Body Title"></Body>
<Footer year="2022"></Footer>
</div>
);
}

export default App;

Coding problem 36

Full Stack Development Specialization Training Page 9 of 16

 In the same website model you’ve been creating so far, add bootstrap to your React application
and create a beautiful navigation bar in place of the header content (you can use one of the
premade Bootstrap navbar templates).

The output should look like this:

Solution:

Include bootstrap (both CSS and JS reference in the index.html file in the public folder), and then
update the Header.js file like this:

import './App.css';

function Header(prop) {
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark d-flex justify-space-
between">
<a className="navbar-brand" href="/">{prop.content}</a>

<div>
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="/">Home</a>
</li>
<li className="nav-item">
<a className="nav-link" href="/">Blog</a>

Full Stack Development Specialization Training Page 10 of 16

 </li>
<li className="nav-item">
<a className="nav-link" href="/">Contact</a>
</li>
</ul>
</div>
</nav>

)
}

export default Header;

Coding problem 37

Full Stack Development Specialization Training Page 11 of 16

 In the same website model you’ve been creating so far, in the navigation bar you created in the
last coding problem, add at least 1 route using React’s Router.

The output should look like this:

Clicking on Contact in the Home page should lead to the contact page, like this:

Solution:

To achieve the above output, you need to make a number of changes to the files in your React
application.

Full Stack Development Specialization Training Page 12 of 16

 To start with, remove the current code in the App.js file, and replace that with the Router code.
Before that, create 2 components, Home.js and Contact.js and import them to App.js. Your App.js
file should look like this at the end:

App.js
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import './App.css';
import Contact from './Contact';
import Home from './Home';

function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="contact" element={<Contact/>}/>
</Routes>

</BrowserRouter>
</div>
);
}

export default App;

Home.js

Add the previous code in App.js in the Home.js, which will act as the Home page.

import Header from './Header';

import Footer from './Footer';
import Body from './Body';

function Home() {
return (
<div className="Home">
<Header content="Header Content"></Header>
<Body title="Body Title"></Body>
<Footer year="2022"></Footer>

Full Stack Development Specialization Training Page 13 of 16

 </div>
);
}

export default Home;

Header.js

Footer.js and Body.js will remain the same. In Header.js, add the new Route to Contact.

import './App.css';

function Header(prop) {
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark d-flex justify-space-
between">
<a className="navbar-brand" href="/">{prop.content}</a>

<div>
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="/">Home</a>
</li>
<li className="nav-item">
<a className="nav-link" href="/">Blog</a>
</li>
<li className="nav-item">
<a className="nav-link" href="/contact">Contact</a>
</li>
</ul>
</div>
</nav>

)
}

export default Header;

Full Stack Development Specialization Training Page 14 of 16

 Coding problem 38

Create a simple form that should get the details of a message (just a single line). Display the
updated message below the input box using useStates, also create a submit button which when
clicked, displays the message entered in the input box onto the console.

Output :

Solution:

import React, { useState } from 'react'

const App = () => {

const [message, setMessage] = useState("");
const > e.preventDefault();
console.log(message);

}
return (
<form > <label>Enter your Message : </label>
<input value={message} > <h4>Your message is : {message} </h4>
<button type="submit">Submit</button>

Full Stack Development Specialization Training Page 15 of 16

 </form>
)
}

export default App

Full Stack Development Specialization Training Page 16 of 16