A simple and responsive pizza menu built with the React library. This project demonstrates the fundamentals of creating React components, passing props, conditional rendering, and handling lists.
This application displays a menu of pizzas with their names, ingredients, prices, and images. It also indicates when a pizza is sold out and informs about the pizzeria's opening hours, allowing (in the future) for online ordering.
- React: A JavaScript library for building user interfaces.
- JSX: A syntax extension to JavaScript recommended for use with React.
- CSS: For styling the components (the
index.css
file is included).
- Conditional rendering using the ternary operator to show alternative UI elements.
- Using template literals for dynamic class names in JSX.
- Component-based architecture with clear separation of concerns.
- Handling lists and keys properly when rendering arrays in React.
- Managing component props for reusable and clean code.
- Make sure you have Node.js and npm (or yarn) installed on your machine.
- Clone this repository to your computer:
git clone <YOUR_REPOSITORY_URL>
- Navigate to the project directory in your terminal:
cd pizza-menu
- Install the dependencies:
npm install # or yarn install
- Start the development server:
npm start # or yarn start
- Open your browser at http://localhost:3000 to see the application running.
- Display of a list of pizzas with name, ingredients, price, and image.
- Visual indication of sold-out pizzas.
- Information about the pizzeria's opening hours.
- An "Order" button (future functionality).
- Implement the functionality of the "Order" button.
- Add a shopping cart.
- Improve styling and responsiveness.
- Potentially integrate data from a backend.
This project is part of my React learning journey and serves as practice for understanding component lifecycle, data manipulation, and building dynamic interfaces.
As this is a personal learning project, external contributions are not expected at this time.
Feel free to copy and paste this content into your README.md
file. Remember to replace <YOUR_REPOSITORY_URL>
with the actual URL of your repository on GitHub.