This repository is dedicated to my journey of learning React. The project is built using Vite, styled with Tailwind CSS, and written in JavaScript.
- Hands-on practice with React concepts like components, state, props, and hooks.
- Integration of Tailwind CSS for styling.
- Built using Vite for fast development and a modern build setup.
Follow these steps to set up and run the project locally.
Ensure you have the following installed:
- Create a new Vite project:
npm create vite@latest
- When prompted, enter learning-react as the project name.
- Select React as the framework and JavaScript as the variant.
- Navigate to the project directory:
cd learning-react
- Install dependencies:
npm install
- Install Tailwind CSS:
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init
- Configure tailwind.config.js and add Tailwind directives to your src/index.css:
@tailwind base; @tailwind components; @tailwind utilities;
- Start the development server:
npm run dev
- Open your browser and navigate to http://localhost:3000 (or the port shown in your terminal).
- React: JavaScript library for building user interfaces.
- Vite: A fast and modern build tool for web projects.
- Tailwind CSS: Utility-first CSS framework for rapid UI development.
- JavaScript (ES6+): The primary programming language for the project.
learning-react/
├── public/ # Static assets
├── src/ # Source code
│ ├── components/ # React components
│ ├── pages/ # Page components
│ ├── App.jsx # Main app file
│ └── index.js # Entry point
├── tailwind.config.js # Tailwind CSS configuration
├── package.json # Project metadata and dependencies
└── vite.config.js # Vite configuration