/react-router-examples

This is an example project for my students

Primary LanguageJavaScript

👋 React Router Example

What is this?

This project is for my teaching curriculum for my students to follow.

This is a very no frills project! Unfortunately, no attractive UI to be spoken of here. However, this will teach you the basis of React Router that you will need for the rest of the projects within my curriculum. This covers the fundamentals of how routes work, which are a very important part of web applications.

The project itself uses the following libraries:

  • React
  • React Router

📚 What you will learn

In this project you'll be learning the basics of how components and routes work. Completing this project will teach you:

  • How to create a basic route with its own component/view
  • To create a route that accepts parameters like so: /test-route/:param-here
  • To nest components and routes within each other.
  • To navigate through routes programatically, without links

I'd typically expect students to be able to finish this project in under a week. However, everyone is different and it's completely fine to get stuck. Don't worry if this happens! React Router can be a little intimidating and confusing to begin with. Everyone has their different strenghts and strifes, and I will work alongside you to support you through anything you get stuck on.

ℹ️ Advice

Please only use my code as a reference, do not copy it (as in copy and paste, obviously it will be a useful reference!). Feel free to change it up a little bit, be inspired by my code and make some changes! Thats what programming is about and its also how you learn. Learn from my code, don't copy it. Chances are, you can probably do better than me in a lot of areas!

I also suggest that my students don't work any longer than 30 minutes at a time to begin with, take 10 minute breaks after half an hour and continue. I intend my students to work with what is called the Pomodoro Technique if its at all possible for them to follow. This is because programming is a very cognitively intense task, and the pomodoro technique will help keep your brain fresh, prevent burnout and allow for more time to consider your aproaches.