Gemini React Tutorial

A step-by-step guide to running Gemini-generated React code locally.

Prerequisites

• Node.js and npm installed on your system
• Basic knowledge of React and command line operations

Step 1: Create a New React App with Vite

1. Create a new Vite project:

   npm create vite@latest my-app

2. When prompted, select:

   • Framework: React
   • Variant: JavaScript

3. Navigate to the project folder:

   cd my-app

4. Install dependencies:

   npm install

Step 2: Set Up Tailwind CSS and Shadcn UI

1. Install Tailwind CSS and its dependencies:

   npm install -D tailwindcss postcss autoprefixer

2. Initialize Tailwind CSS:

   npx tailwindcss init -p

3. Update vite.config.js:

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   import path from 'path'
   
   export default defineConfig({
     plugins: [react()],
     resolve: {
       alias: {
         '@': path.resolve(__dirname, './src'),
       },
     },
   })

4. Create jsconfig.json:

   {
     "compilerOptions": {
       "baseUrl": ".",
       "paths": {
         "@/*": ["src/*"]
       }
     },
     "include": ["src/**/*"]
   }

5. Initialize Shadcn UI:

   npx shadcn-ui@latest init

   When prompted, select the following options:

   ✔ Would you like to use TypeScript (recommended)? › No
   ✔ Which style would you like to use? › Default
   ✔ Which color would you like to use as base color? › Slate
   ✔ Where is your global CSS file? › src/index.css
   ✔ Would you like to use CSS variables for colors? › Yes
   ✔ Are you using a custom tailwind prefix eg. tw-? › (Leave blank if not)
   ✔ Where is your tailwind.config.js located? › tailwind.config.js
   ✔ Configure the import alias for components: › @/components
   ✔ Configure the import alias for utils: › @/lib/utils
   ✔ Are you using React Server Components? › No
   ✔ Write configuration to components.json. Proceed? › Yes
   

Step 3: Install Additional Libraries and Components

1. Install required Shadcn UI components:

   npx shadcn-ui@latest add card button input

2. Install Lucide React:

   npm install lucide-react

Step 4: Add Your React Component

1. Create a new file for your component:

   touch src/components/LLMModel.jsx

2. Paste your Gemini-generated React code into src/components/LLMModel.jsx.

3. Update src/App.jsx:

   import './App.css'
   import LLMModel from './components/LLMModel'
   
   function App() {
     return (
       <>
         <LLMModel/>
       </>
     )
   }
   
   export default App

Step 5: Run the App

Start the development server:

npm run dev

Your Gemini-generated React component should now be running locally! Open your browser and navigate to the URL provided in the terminal (usually http://localhost:5173).