https://github.com/dscjisu/gdg-reactify
REACTIFY-Workshop GDG on Campus
https://github.com/dscjisu/gdg-reactify
js react web-dev
Last synced: 10 months ago
JSON representation
REACTIFY-Workshop GDG on Campus
- Host: GitHub
- URL: https://github.com/dscjisu/gdg-reactify
- Owner: dscjisu
- Created: 2024-12-25T18:28:25.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-28T14:33:59.000Z (about 1 year ago)
- Last Synced: 2025-03-23T21:14:28.517Z (10 months ago)
- Topics: js, react, web-dev
- Language: JavaScript
- Homepage: https://gdg.community.dev/events/details/google-gdg-on-campus-jis-university-kolkata-india-presents-tech-winter-break-gdg-on-campus-jis-university-1/cohost-gdg-on-campus-jis-university-kolkata-india
- Size: 9.48 MB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Reactify Workshop - Overview
This repository is a part of the **Reactify Workshop** aimed at teaching key concepts of **React** development. The workshop covers various aspects of React, including component-based architecture, state management, hooks, and UI styling using **Tailwind CSS**.
In this repository, you will find a hands-on project focused on building a simple yet aesthetically appealing card component using **React**.
---
## Topics of Discussion
1. **Introduction to React**
- What is React?
- Why use React over traditional JavaScript?
- React’s component-based architecture
- JSX and its role in React
2. **React vs Traditional JavaScript**
- Key differences between React and Vanilla JavaScript
- How React simplifies UI development and state management
3. **React Components: Class vs Functional**
- Understanding Class Components and Functional Components
- Introduction to **useState** and **useEffect** hooks in functional components
4. **State Management**
- Tools like **Context API**.
5. **Tailwind CSS**
- How to use Tailwind CSS in React projects
- Utility-first CSS for building responsive and customizable UIs
6. **React Folder Structure and Best Practices**
- Best practices for organizing React projects
- File structure and naming conventions
- Reusable components and separation of concerns
7. **React Flowstate for Developers**
- Understanding workflow in React development
---
## Getting Started
### Prerequisites
- [Node.js](https://nodejs.org/) (v14 or later)
- npm or yarn package manager
### Installation
1. Clone the repository:
```bash
git clone https://github.com/your-username/reactify-project.git
cd reactify-project
```
2. Install Dependencies
```bash
npm install
```
3. Start the development server
```bash
npm start
```
## Features
- **Responsive Design**: The card component is fully responsive and adjusts based on screen size.
- **Tailwind CSS**: The project uses Tailwind CSS for utility-first styling, making it easy to customize and extend.
- **Component-Based Architecture**: React components are reusable, making it easier to maintain and scale the UI.
---
## Roadmap
```mermaid
flowchart TD
A[React Roadmap] --> B[Learn JavaScript Basics]
B --> C[Understand ES6+ Features]
C --> D[Learn JSX]
D --> E[Understand Components]
E --> F[Class Components vs Functional Components]
F --> G[State and Props]
G --> H[Hooks]
H --> I[useState and useEffect]
I --> J[React Router]
J --> K[State Management]
K --> L[Redux or Context API]
L --> M[Build Reusable Components]
M --> N[API Integration]
N --> O[Testing React Apps]
O --> P[Optimize Performance]
P --> Q[Learn Deployment]
Q --> R[Explore Advanced Topics]
R --> S[Server-Side Rendering ]
R --> T[Static Site Generation ]
T --> U[Next.js]
S --> U
```
## License
This project is licensed under the MIT License.
---
## Contact
For questions or suggestions, feel free to open an issue or contact me directly.