This is a workshop to learn:
- React
- TypeScript
- Git
- GitHub
- Visual Studio Code
- Clone this repository
- Open the repository in Visual Studio Code
- Open the integrated terminal in Visual Studio Code
- Run
npm installin the terminal - Run
npm startin the terminal - Open localhost:3000 in your browser
Miracle Flights wants a basic table that they can randomly generate flight data! They want the following generated:
- Flight Number (6 digits alphanumeric)
- Origin (3 random digits alphanumeric)
- Destination (3 random digits alphanumeric)
- Departure Time (random time between 12:00am and 11:59pm)
- Arrival Time (random time between 12:00am and 11:59pm)
- Flight Duration (random integer between 1 and 8)
- Create a new branch called
[yourname]-workshop2 - In
App.tsxyou should generate a random flight using faker functions when you click a button, this should be added to a list of flights which is a state variable of typeFlight[] - In a useEffect hook, you should sort the flights and update the state variable. You can choose which value to sort it by, make sure the useEffect hook is called when the flights change. Hint: you can use something like
const newList = oldList.sort(...)function on an array to sort it, google how to sort an array in JavaScript! - Create a new component called
FlightTable.tsxand pass the flights as an array in the props to the component - In
FlightTable.tsxyou should display the flights in a table, which will be made up ofFlightRow.tsxcomponents. Give the table a header row with the column names (think about how you can reuse theFlightRow.tsxcomponent to do this) - Create a new component called
FlightRow.tsxand pass the flight as props, the row should display the flight data in the table - (optional 1) If you have time, save the flights to local storage so that when you refresh the page, the previous flights are still there
- (optional 2) If you have time, use css to make the table and webpage look nicer!
- Push you branch to GitHub and let Jake know when you're all done!
- Faker Documentation
- React Documentation
- TypeScript Documentation
- TypeScript and React examples and walk-through
- If you get stuck, ask for help!
- If you're not sure what to do, ask for help!
- If you're not sure if you're doing it right, ask for help!
- This should only take 1-2 hours, if you're spending more time than that, ask for help!