In today's assignment we're going to practice React Router and build a complete website. It should look similar to this one: World Time
In the terminal, "cd" into the folder of your project and install dependencies by running npm install
. Once that's done, you can start the project by running npm run dev
.
- The Home Page component should contain a minimum och two Clock components.
- Create components for the About and Contact page and add a title to each.
- Make a copy of the Clock-component and name it SingleClock. Make the styles of the clock bigger.
- Enter
npm install react-router-dom
in the terminal. - Create the layout component Root.jsx that holds the navigation html code and add an component imported from react-router-dom that will represent the content of each page.
- Create the router object in the main.jsx file using the following code:
const router = createBrowserRouter([
{
element: <Root />,
path: "/",
children: [
{
path: "/",
element: <Home />,
},
{
path: "about",
element: <About />,
},
{
path: "contact",
element: <Contact />,
},
{
path: "clock/:cityKey",
element: <SingleClock />,
},
],
},
]);
-
Also in main.jsx, make sure you import all the Page-components. Then replace
<App />
in the JSX with the following code:<RouterProvider router={router} />
. ImportRouterProvider
fromreact-router-dom
. -
Update the Root.jsx component and add links to the pages Home, About and Contact using the
Link
component imported fromreact-router-dom
-
Update Home.jsx wrapping the word
bigger
of each Clock with theLink
component. Each link should contain a key from the object timeZones found in timeZones.js -
Remove the props from SingleClock.jsx and use the hook:
useParams()
fromreact-router-dom
to get the cityKey from the url. import the object in timeZones.js to get the data using the cityKey.
Learning how to think as a web developer is learning how to be an expert in problem solving. So whenever you get stuck start with step 1 and continue until problem solved.
- Google! In English, type in the error message if there is one, search within the language you're using (ie CSS, JavaScript etc).
- Ask your code buddies in your team.
- Ask your fellow students in Slack.
- Ask the teacher. Please note: we are part of a sharing community - share the answer with your fellows.
After completing this assignment you should be able to create a website with several pages in React.
Done with the main task? Here's some ideas for things to continue with:
- Add more content to each page.
- Add a footer the Root.jsx.
- Add a 404 error page.
- Add bread crumbs to SingleClock page.