DEV Community

Cover image for Upscale Your React App Into Next Level - Reactive Radiation - @a4arpon.me
Shahin Islam
Shahin Islam

Posted on • Updated on

Upscale Your React App Into Next Level - Reactive Radiation - @a4arpon.me

#javascript #react #professional #projectsetup

A Professional React Project Setup With BiomeJS, Bun and Vite

Intro

Like angular and vue react don't have any specific folder structure. But if you want to make a production grade web app with industry best practices. There are thousands of structures available online for react projects but today I'm teaching you another one. In this project we will choose our packages which are type safe and latest also. Listen carefully this is my own reactive project peradiam. I'm not arguing with anyone about why I use this instead of the sampler one or why I didn't use traditional packages to extend the react app. I am a huge performance freak. Every second of performance and memory byte is important for me. And I structure my project in the way that I can push updates in future without messing up with everything.

Technologies

Initiate Project With Vite 

bunx create-vite
Enter fullscreen mode Exit fullscreen mode

Install Dep 

bun add lucide-react react-helmet-async appwrite @nextui-org/react framer-motion @tanstack/react-router
Enter fullscreen mode Exit fullscreen mode

Install Dev Dep 

bun add --dev tailwindcss postcss autoprefixer @tanstack/router-vite-plugin @types/bun @biomejs/biome
Enter fullscreen mode Exit fullscreen mode

Config Setup

Vite Config For Project vite.config.ts 

// vite.config.ts

// ....
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // ...,
    // Split Vendor Chunk 
    splitVendorChunkPlugin(),
    // Tans Stack Router Config
    TanStackRouterVite()
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

TypeScript config file tsconfig.json 


{
    // .... 
    // Extra for aliases
    "paths": {
      "baseUrl": ["."],
      "@/*": ["./src/*"]
    }
}
Enter fullscreen mode Exit fullscreen mode

Setting up Tailwind CSS in a Vite project. 

bunx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

tailwind.config.js

const {nextui} = require("@nextui-org/react");

export default {
  content: [
    "./index.html",
    "./src/**/*.tsx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
}
Enter fullscreen mode Exit fullscreen mode

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Next Theme Provider

    <NextUIProvider>
      <YourApplication />
    </NextUIProvider>
Enter fullscreen mode Exit fullscreen mode

biome.json

{
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": {
        "noVar": "error"
      },
      "correctness": {
        "noUnusedVariables": "warn"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "indentWidth": 2,
    "indentStyle": "space",
    "lineWidth": 80,
    "formatWithErrors": false
  },
  "javascript": {
    "formatter": {
      "semicolons": "asNeeded",
      "trailingComma": "es5",
      "jsxQuoteStyle": "double"
    }
  },
  "files": {
    "ignore": ["routeTree.gen.ts"]
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

ahgsql profile image

Building a Better RAG: A Practical Guide to Two-Step Retrieval with LangChain

ahgsql -

iamgoncaloalves profile image

How to install React 19 Beta

Gonçalo Alves -

cylop profile image

Introducing the Enhanced @nipe-solutions/react-spring-bottom-sheet: Now Supporting React 18 and XState v5

Nicholas Petrasek -

ellis22 profile image

ES6 Spread Operator: Unleashing the Power of Modern JavaScript

Ellis -