WORKSHOP | React Router 6

Repo created created for the workshop given as part of the BeCode web development training

Workshop Initiators

• Elena
• Elise
• Fidelys
• Florian

Learning Objectives

• Architect your React project
• Use React
  • Component function
  • Seen hooks : useState, useEffect
• Transform your React application into a Single Page Application
• Install and use React Router 6
  • Seen components : <BrowserRouter>, <Routes>, <Route>, <Link>, <Outlet>, <NavLink>
  • Seen hooks : useMatch, useParams

Workshop Plan

1. Set up

   • First step : install React
   • Second step : architect the project

2. React Router

3. Create different routes

   • First step : connect the URL
   • Second step : build the routes

4. Create a component Layout and use <Outlet>

5. Styling header items with <NavLink> or by creating a component

   • First step : <NavLink>
   • Second step : create a <CustomLink> component

6. Create sub-routes

   • First step: import dummy articles with useState and useEffect
   • Second step: create a Singlepage and its corresponding route
   • Third step: useParams
   • Fourth step: add the possibility to create an article
   • Fifth step: add the possibility to edit articles

Useful Links

Used API : https://jsonplaceholder.typicode.com/posts

Detailed course of the workshop