Welcome to our penultimate lab section of the semester! We've finally gone over all the fundamentals of React and we're now ready to jump into exploring the vast ecosystem of packages and libraries that we can use to take our projects to the next level.
Today, we're going to work with a package called "React Router." This package enables us to create "multi-page" websites. Instead of holding your hand through the details of how to make it work, we're going to instead encourage you to explore the existing documentation with a group to figure it out!
This might sound a little daunting, but we wanted to expose you to this problem-solving process in class, as it's one you'll run into often in the future.
Solution: https://codesandbox.io/s/ov3n7n961y
For this lab, there will be no starter code! Instead, we'll use create-react-app to help us build a scaffold. Open up your terminal wherever you'd like to create your project and run through the following commands:
npx create-react-app react-lab10 # Creates a folder called "react-lab10"
cd react-lab10
npm install
rm yarn.lock # Optional! See Note Below
Now, open the folder that you just created in your favorite text editor and run npm start in the terminal to start up the development server! You're ready to work :)
Note: This is the same process you would use to create the scaffold for your final project and any project you work on in the future!
Form a group of 2-3 fellow students, and create a personal site for someone else in your group that has multiple "pages" to it. Now that we've spent a semester learning about web development, we wanted to revisit this assignment to inspire you to think about the possibilities!
Requirements:
React Router is a very popular React Package that implements routing (having different pages display at /about, /contact, /home). React Router isn't the only way to accomplish this, but it is one simple way to get started!
Below are some resources we recommend for getting started with React Router. We will go over some of the basics at the end of lab, but ultimately, we will leave this one up to you! In addition to the stuff below, google for yourselves, raise your hand and ask questions, and work with the people around you!