https://github.com/pranto113015/myreact

Learn React v18.3.1 with Gp Academy & CodersTrust | MERN Practise | 2024
https://github.com/pranto113015/myreact

daisy-ui react reactbootstrap tailwindcss vite

Last synced: 7 days ago
JSON representation

Learn React v18.3.1 with Gp Academy & CodersTrust | MERN Practise | 2024

• Host: GitHub
• URL: https://github.com/pranto113015/myreact
• Owner: pranto113015
• Created: 2024-08-31T05:38:04.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-09-15T05:22:48.000Z (2 months ago)
• Last Synced: 2024-09-15T09:29:19.529Z (2 months ago)
• Topics: daisy-ui, react, reactbootstrap, tailwindcss, vite
• Language: JavaScript
• Homepage:
• Size: 217 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## First time react project environment setup with vite 

### Prerequisite to install react : npm which is included with "Node.js"

#### First create the folder and open by vs code editor.Then open the vs code terminal and follow the command :

**Step-1 :** 

```sh 

npm create vite@latest

```

**Step-2 :** Then choose the project name like "myreact"

**Step-3 :** Then select a framwork like "React"

**Step-4 :** Then select a variant  like "JavaScript"

**Step-5 :** Now again open the terminal and write the code first enty the project folder so write code :

```sh   

cd myproject

```

**Step-6 :** Now this is right folder location and again write the code :

```sh        

npm install

```

**Step-7 :** Some time waiting to some file and folder node_moduls come this folder.

 

**Step-8 :**  Then open the terminal and write the code for Run the project

```sh

npm run dev

```

**Step-9 :**  Then will provide the local port address link copy the link and past the browser to see the project. `Done`

---

## Using react project Install Tailwind CSS with Vite setup process

#### First create the react project file like `up instruction` then follow the bellow step :

**Step-1 :**  Write the command in vs code terminal

```sh

npm install -D tailwindcss postcss autoprefixer

```

**Step-2 :**  Write the command in vs code terminal

```sh

npx tailwindcss init -p

```

**Step-3 :** Open the `tailwind.config.js` file and paste the below code

```js

/** @type {import('tailwindcss').Config} */

export default {

  content: [

    "./index.html",

    "./src/**/*.{js,ts,jsx,tsx}",

  ],

  theme: {

    extend: {},

  },

  plugins: [],

}

```

**Step-4 :** Go to the `src` folder open the `index.css` and paste the below code

```css

@tailwind base;

@tailwind components;

@tailwind utilities;

```

Now it is well. `Done`

---

## Using component library for Tailwind CSS (daisyUI) in react vite project setup guide

#### First follow the `up instruction` then follow the bellow step :

**Step-1 :**  Write the command in vs code terminal

```sh

npm i -D daisyui@latest

```

**Step-2 :** Now add daisyUI to `tailwind.config.js` :

```sh

module.exports = {

  //...

  plugins: [

    require('daisyui'),

  ],

}

```

Now it is fair. `Done`