ashwinrames / react-protrips

ProGrad Lab | REACT - PROBIBO

Learning Goals

In this exercise, the goal is to learn routing and forms in react:

• routing,
• forms

Getting started

1. Fork this repo
2. Clone this repo

Whenever you create a first significant change, you should make your first commit.

3. Follow these guidelines to add, commit and push changes.

In the end of this document, you will find guidelines on how to submit the exercise.

Instructions

In this lab we will try to work with routing in react and also try to use basic forms. The main idea of this lab is to store down the trip details of the form and display it. We have three components

• HomeComponent
• AddTripComponent
• ListComponent

Path to Components

• / -> HomeComponent
• /add -> AddComponent
• /list -> ListComponent s3://facenow/l5-homecomponent.png The entire application looks like this

PROGRESSION 1 | CREATE A HOME COMPONENT

Create a home component and design it as per the screenshot shown below. The home button should display the home component and and also the total trips.

PROGRESSION 2 | TRIP TIME

When you click the add trip button, You should display a form with with the following fields

• date
• place
• type
  • trek
  • tropic
  • club

The data can be stored in an array

PROGRESSION 3 | BUCKET LIST

Render the list of all the places with time and date

Bonus | TREKS TROPICS & CLUBS

Based on the selection filter out the particular type of trips.

Submission

If you didn't add, commit and push the changes you made, this is the last call. 😄

please share your github links with your Mentors. Your Mentor's will check up your work and provide feedback.

Summary

If you managed to do it, good job! 🏆

We are proud of you!

Happy Coding ProGrad ❤️!