- You are using the code from the lesson item titled The Navbar. Your goal is to add another link to the existing code. This link should show a brand new component, named Contact. So, add a new file,
Contact.js, to the root of thesrcfolder. - Inside the
Contact.jsfile, add an ES5 function, namedContact. The theexport default Contactafter theContactfunction's closing curly brace. - Inside the body of the
Contactfunction, add a return statement with the following code:<h1>Contact me on this page.</h1>. - Inside the App.js file, import the newly-built Contact component.
- Inside the App.js file's App function's return statement, locate the
navelement, and inside of it, add another<Link>element, with thetoattribute pointing tocontact, theclassNameset to"nav-item", and the the text inside the Link element's opening and closing tags set toContact. - Inside the
Routeselement, add a third route, with thepathattribute pointing to"/contact", and theelementattribute set to{<Contact />}. - Save all your changes and view your updates in the served app. You should have three links in the top navbar, and the third link should be
Contact. Once you click the link, the sentence "Contact me on this page" should replace whatever other content was under the navbar previously.
This project was bootstrapped with Create React App.
- Open the built-in terminal
- Run
npm installto add thenode_modulesfolder - Run
npm start - Click the "Open Development server" in the bottom status bar to view the running react app in the browser.