Skip to content

README.md

Latest commit

 

History

History
140 lines (112 loc) · 3.85 KB

README.md

File metadata and controls

140 lines (112 loc) · 3.85 KB

⚛️ goit-react-hw-01 — React Components

This project is part of the GoIT React curriculum. It focuses on building reusable React components, working with props, component composition, and basic project structure using Vite.

🎯 Project Requirements

  • Create a repository named goit-react-hw-01
  • Build the project using Vite
  • Deploy the project and provide a Vercel live link
  • No errors or warnings in the browser console
  • Use default export for all components
  • All components must be rendered inside the <App> component
  • All props must be passed correctly
  • Code must be clean, readable, and formatted with Prettier
  • Styles must be implemented using CSS Modules

🛠️ Technologies Used

  • React — Component-based UI
  • Vite — Fast project setup and build tool
  • JavaScript (ES6+)
  • CSS Modules — Scoped component styles
  • Prettier — Code formatting

📂 Project Structure

src/
 ├── components/
 │   ├── Profile/
 │   │   ├── Profile.jsx
 │   │   └── Profile.module.css
 │   ├── FriendList/
 │   │   ├── FriendList.jsx
 │   │   └── FriendList.module.css
 │   ├── FriendListItem/
 │   │   ├── FriendListItem.jsx
 │   │   └── FriendListItem.module.css
 │   ├── TransactionHistory/
 │   │   ├── TransactionHistory.jsx
 │   │   └── TransactionHistory.module.css
 ├── App.jsx
 ├── userData.json
 ├── friends.json
 └── transactions.json

📌 Task 1 — Social Media Profile

The Profile component displays user information using props:

  • name — user name
  • tag — social tag without @
  • location — city and country
  • image — avatar URL
  • stats — followers, views, likes

User data is stored in userData.json and imported into App.jsx.

📌 Task 2 — Friend List

The FriendList component renders a list of friends based on an array of objects. Each friend is displayed using the FriendListItem component.

  • avatar — avatar image
  • name — friend name
  • isOnline — online status (true / false)

Friend data is stored in friends.json. Online status is styled conditionally using CSS classes.

📌 Task 3 — Transaction History

The TransactionHistory component displays banking transactions in a table.

  • id — unique transaction identifier
  • type — transaction type
  • amount — transaction amount
  • currency — currency code

Transaction data is stored in transactions.json and rendered dynamically.

🚀 Deployment

✅ Final Notes

This project demonstrates core React fundamentals such as component composition, props usage, reusable UI blocks, and clean project structure. It serves as a foundation for more advanced React topics.

Happy coding! 🚀