https://github.com/kelvintechnical/welcome-to-banking

https://github.com/kelvintechnical/welcome-to-banking

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/kelvintechnical/welcome-to-banking
• Owner: kelvintechnical
• Created: 2024-11-25T01:32:08.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-25T01:53:31.000Z (2 months ago)
• Last Synced: 2024-11-25T02:27:14.700Z (2 months ago)
• Size: 0 Bytes
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Welcome to Learning React! 🌟

This project is my **first React project**, and it was a fantastic learning experience. I built a simple React app to practice **state management**, **handling user input**, and **dynamic rendering**.

---

## 📝 Project Description

This app demonstrates a **user-friendly interface** where:

- A user can input their **name**.

- A user can input their **account balance**.

- The app dynamically displays the entered **name** and **account balance**.

It’s a basic project, but it helped me understand core concepts of React and CSS styling.

---

## 🎓 What I Learned

Through this project, I gained hands-on experience with:

1. **React Basics:**

   - Using **functional components** to structure the app.

   - Understanding **JSX** and how it makes writing UI in JavaScript simple and intuitive.

2. **React State Management:**

   - Learning about **`useState`**, React’s hook for managing state.

   - Understanding destructured arrays, where:

     - The first value stores the current state.

     - The second value is a function to update that state.

3. **Dynamic Rendering:**

   - Displaying values entered by the user dynamically in the app.

   - Using curly braces `{}` to include JavaScript variables in JSX.

4. **Event Handling:**

   - Handling user input with the **`onChange`** event to update state dynamically.

5. **CSS Styling:**

   - How to style elements globally and how global styles can unintentionally affect other elements.

   - The importance of **using class-specific styles** to avoid unexpected issues.

   - Using **Flexbox** to center elements both horizontally and vertically.

6. **GitHub Workflow:**

   - How to push a React project to GitHub, including:

     - Initializing a Git repository.

     - Committing and pushing changes to GitHub.

---

## 📂 File Structure

Here’s an overview of the key files in this project:

---

## 🛠️ Technologies Used

- **React**: For building the UI and managing state.

- **CSS**: For styling the app and making it visually appealing.

- **GitHub**: For version control and hosting the project.

---

## 🚀 How to Run This Project Locally

1. Clone the repository:

   ```bash

   git clone https://github.com//welcome-to-banking.git

## 🎉 Conclusion

This project marks the start of my React journey. It’s a small app, but it helped me build confidence with React’s core concepts. I’m excited to continue learning and working on more complex projects.

vbnet

Copy code

You can save this as a `README.md` file in your project folder and push it to your GitHub repository. Let me know if you need further assistance! 😊