https://github.com/laruschkaj/props

This repository contains the code and documentation for the "Spacecraft Inventory System" React project. It serves as a Capstone Step 1 exercise, demonstrating the use of React props, conditional rendering, and component composition for building dynamic UI.
https://github.com/laruschkaj/props

components conditional-rendering exercises frontend inventory-management javascript jsx learning props react web-development

Last synced: 7 days ago
JSON representation

This repository contains the code and documentation for the "Spacecraft Inventory System" React project. It serves as a Capstone Step 1 exercise, demonstrating the use of React props, conditional rendering, and component composition for building dynamic UI.

• Host: GitHub
• URL: https://github.com/laruschkaj/props
• Owner: Laruschkaj
• Created: 2025-06-21T17:51:56.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2025-06-21T18:08:59.000Z (11 months ago)
• Last Synced: 2025-06-21T19:21:15.887Z (11 months ago)
• Topics: components, conditional-rendering, exercises, frontend, inventory-management, javascript, jsx, learning, props, react, web-development
• Language: JavaScript
• Homepage:
• Size: 2.93 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Props

15.2.16 Props Exercise

# Props Exercise

## Spacecraft Inventory System 🌌

Hello, future software developer! In this exercise, we will practice props in React by creating a spacecraft inventory management system. 🥹

Your mission is to showcase various items aboard a spacecraft, detailing each one's name, type, quantity, and price. But there's a twist! You'll need to implement smart messages within your application: one to warn when any item's stock is running low 🚨 and another to highlight items of high value 💎 that could attract interstellar thieves. This is how it should look: 

![Demo.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/163f1722-85e9-4a3c-adba-457a91094f00/9a8726c0-98cc-4df3-8f77-20dc6b9d82f7/Demo.png)

## Tasks 📋

- `index.html`

    - Add CDN links for React, ReactDOM, and Babel to enable JSX processing in the browser.

    - Add the message, inventory item, and app component files. Be mindful of their import order.

- `Message.js`

    - Accept `children` as props and render them as is.

- `InventoryItem.js`

    - Accept `name`, `type`, `quantity`, and `price` as props.

    - Set defaults to `quantity` and `price`.

    - Render the item's details.

    - Render a `Message` if the quantity is below the 5 threshold, indicating low stock.

    - Render a `Message` if the total value (`quantity * price`) exceeds the $1000 threshold, suggesting extra protection due to high value.

- `App.js`

    - You are given a list of inventory items. Feel free to change the list.

    - Loop through the inventory items and render an `InventoryItem` for each item in the list.

Happy coding!

## Starter Code 🌱

- `index.html` serves as the entry point for the web application. You will load React libraries and link to the React component scripts for in-browser JSX processing.

- `App.js` is the main component that you will use to aggregate the inventory list, rendering `InventoryItem` components for each item in the inventory.

- `InventoryItem.js` represents individual inventory items. You will display their name, type, quantity, and price. You will also conditionally render messages based on stock levels and value.

- `Message.js` displays warnings or notifications. You will render the wrapped messages through its children props.