Spaceship App
In this exercise, you will practice some basic React skills (creating class and functional components, passing props, accessing props). As you work through this exercise, pay attention to the data flow and how front-end applications can be put together.
Objectives
- Initialize state appropriately
- Create nested components as necessary (stateful and / or functional)
- Dynamically render data
- Handle user input and appropriately respond to that input
- Create a diagram of the data flow of this application
Getting Started
In this exercise, you'll be making an app that shows current spaceships in our fleet and allows us to add new spaceships.
- Initial setup:
npm install - Run the app: In a new terminal tab, start the application with
npm start - Make sure you
addandcommitfrequently!
Minimum Requirements
- Create a diagram of the data flow of this app
- Complete all the user stories
Advanced Content
Coming Soon
User Stories
As a user, when I first see the landing page, I should be able to see all my spaceships.
Acceptance Criteria:
- Displays all spaceships (use dummyData.js)
- Dynamically renders all spaceships (no hardcoding, please)
- Creates any appropriate components and correctly utilizes them
As a user, I should be able to create a new spaceship.
- Should handle input submit from a user
- When user correctly submits a new spaceship, that spaceship should be added to the list and rendered