Skip to content

A personal repository for learning and practicing React, powered by Vite and styled with Tailwind CSS.

Notifications You must be signed in to change notification settings

AmanRai8/learning-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Learning React

This repository is dedicated to my journey of learning React. The project is built using Vite, styled with Tailwind CSS, and written in JavaScript.

Features

  • 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.

Getting Started

Follow these steps to set up and run the project locally.

Prerequisites

Ensure you have the following installed:

  • Node.js (v14.18.0 or newer)
  • npm (comes with Node.js) or Yarn

Installation

  1. 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.
  1. Navigate to the project directory:
    cd learning-react
  2. Install dependencies:
    npm install
  3. 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;
  1. Start the development server:
    npm run dev
  2. Open your browser and navigate to http://localhost:3000 (or the port shown in your terminal).

Technologies Used

  • 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.

Folder Structure

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

About

A personal repository for learning and practicing React, powered by Vite and styled with Tailwind CSS.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published