https://github.com/xelo04/react-basics
React Basics is a personal project showcasing the fundamentals of React, TypeScript, and Bootstrap. It demonstrates reusable components, state management, and modern UI design in a React application.
https://github.com/xelo04/react-basics
bootstrap react reactjs typescript
Last synced: 3 months ago
JSON representation
React Basics is a personal project showcasing the fundamentals of React, TypeScript, and Bootstrap. It demonstrates reusable components, state management, and modern UI design in a React application.
- Host: GitHub
- URL: https://github.com/xelo04/react-basics
- Owner: Xelo04
- License: mit
- Created: 2025-03-28T16:29:38.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-28T20:44:18.000Z (over 1 year ago)
- Last Synced: 2025-03-28T21:31:08.736Z (over 1 year ago)
- Topics: bootstrap, react, reactjs, typescript
- Language: TypeScript
- Homepage:
- Size: 37.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Basics
React Basics is a personal project designed to showcase the fundamentals of **React**, **TypeScript**, and **Bootstrap**. This project demonstrates the creation of reusable components, state management, and event handling in a modern React application.
---
## 📖 Table of Contents
- [🚀 Features](#-features)
- [📂 Project Structure](#-project-structure)
- [🛠️ Technologies Used](#️-technologies-used)
- [🌟 Key Functionalities](#-key-functionalities)
- [⚙️ Installation and Usage](#️-installation-and-usage)
- [🤝 Contributing](#-contributing)
- [📜 License](#-license)
---
## 🚀 Features
- **Reusable Components**: Modular and reusable React components like `Button`, `Alert`, and `ListGroup`.
- **State Management**: Demonstrates the use of React's `useState` hook for managing component state.
- **TypeScript Integration**: Strongly typed components and props for better developer experience.
- **Bootstrap Styling**: Clean and responsive design using Bootstrap.
---
## 📂 Project Structure
```
ReactBasics/
│── public/
│ └── vite.svg # Public assets
│── src/
│ ├── assets/
│ │ └── react.svg # React logo
│ ├── components/ # Reusable React components
│ │ ├── Alert.tsx # Alert component
│ │ ├── Button.tsx # Button component
│ │ └── ListGroup.tsx # ListGroup component
│ ├── App.tsx # Main application component
│ ├── App.css # Global styles
│ ├── Message.tsx # Message component
│ ├── main.tsx # Entry point of the application
│ └── vite-env.d.ts # Vite environment types
│── index.html # HTML entry point
├── package.json # Project dependencies and scripts
├── tsconfig.json # TypeScript configuration
├── tsconfig.node.json # TypeScript configuration for Vite
├── vite.config.ts # Vite configuration
└── README.md # Project documentation
```
---
## 🛠️ Technologies Used
- **React**: For building user interfaces.
- **TypeScript**: For type safety and better code maintainability.
- **Bootstrap**: For responsive and modern styling.
- **Vite**: For fast development and build tooling.
---
## 🌟 Key Functionalities
1. **Alert Component**:
- Displays dismissible alerts with custom content.
- Example usage: ` {}}>My Alert`.
2. **Button Component**:
- Customizable buttons with different colors and click handlers.
- Example usage: ` {}}>Click Me`.
3. **ListGroup Component**:
- Displays a list of items with click functionality.
- Example usage:
```tsx
console.log(item)}
/>
```
4. **State Management**:
- Demonstrates the use of `useState` for managing visibility and selection states.
---
## ⚙️ Installation and Usage
1. Clone the repository:
```bash
git clone https://github.com/your-username/ReactBasics.git
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Open the application in your browser at
```bash
http://localhost:5173
```
---
## 🤝 Contributing
Contributions are welcome! If you have suggestions or improvements, feel free to fork the repository and submit a pull request.
---
## 📜 License
This project is under the MIT License - see the [LICENSE](./LICENSE) file for details.