How I start my React projects

Imma be quick and succinct to save you time. Just follow me verbatim…

• yarn init: I feel that yarn is better. Also, Yarn performs parallel installation.

• Prettier Config: Using a Prettier configuration is a good practice for maintaining consistent code formatting.

• Vite for Frontend Tooling: Vite is an excellent choice for fast and efficient frontend development. Its speed during development is a significant advantage.

• Setup Absolute imports: To avoid the complexity of dealing with multiple dot-dot (../../../) structures in your import paths, commonly known as “dot hell.” and maintain consistent paths across different files and directories.

• Setup Vite Config: I setup path aliases when I use absolute imports.

// Vite configuration file
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'node:path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },

  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    },
  },
})

• Setup Absolute Imports: Absolute imports can make your import statements cleaner and more readable. They also help in avoiding long relative import paths.

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

• Make"noUnusedLocals": false in the TSconfig [for dev environment]: It essentially turns off the TypeScript compiler's check for unused local variables. In the early stages of development or during rapid prototyping, you might be creating variables for testing or experimentation. Turning off this check can be convenient during such phases.

• Setup Vercel Config:
  {“rewrites”: [{ “source”: “/(.*)”, “destination”: “/” }]}This configuration essentially redirects any incoming request to the root path of your application, regardless of the original path. This is useful in scenarios where you want to serve a single-page(SPA) application deployed on Vercel(a popular cloud platform) or handle all routing on the client-side.

• Setup Index Files for Each Component Folder: Organizing your components with index files is a good way to have a clear entry point for each directory. It helps in better code structure and discoverability.

• Adding .vscode to .gitignore: A sensible choice to avoid pushing IDE-specific settings to version control.

• Use CSS Modules: CSS Modules provide local scoping for your styles, preventing global style conflicts. They are an excellent choice for component-based styling.

• Less Default Exports: Default Exports are Naming Nightmares, can impede tree shaking efficiency and are difficult to analyze by automated tools or provide code language server(more about Language Server Protocols in a separate story) code autocompletion.

Even better.:

Use NextJS to not get bogged down In many of the details involved in application building. It adds things like Error Boundaries, Routing and much more, providing a sweet dx(developer experience).

Do note that too much abstraction can make it hard for you to learn the fundamentals of web dev. anyways, happy coding! ＜（＾－＾）＞