Simple react frontend

How to setup simple react frontend

Prerequisites

Before you start, you need Node.js and pnpm (Performant npm) installed on your computer.

• What are they?
  • Node.js: A runtime environment that lets you run JavaScript code outside of a web browser. It’s needed for build tools like Vite and package managers like pnpm.
  • pnpm: A fast, disk space-efficient package manager. (Refer to the “npm vs. pnpm” section below for more details).
• How to check if you have Node.js: Open your terminal or command prompt and type: bash node -v If you see a version number, you should be good. If not, download and install Node.js from nodejs.org (LTS version is recommended).
  • Try to ensure that your Node.js uses the lates version to mitigate possible issues during development
• How to install and check pnpm: If you have Node.js (which usually includes npm), you can install pnpm using npm: bash npm install -g pnpm Then check its version: bash pnpm -v Alternatively, visit pnpm.io/installation for other installation methods.

---

Step 1: Create the React + TypeScript Project with Vite 🚀

Vite is a modern build tool that provides a significantly faster and leaner development experience compared to older tools like Create React App (which is now deprecated).

1. Open your terminal or command prompt. Navigate to the directory where you want to create your new project folder.

2. Run the Vite creation command:

   pnpm create vite my-react-app --template react-ts

• Explanation:
  • pnpm create vite: This is pnpm’s command to scaffold (set up) a new project using Vite.
  • my-react-app: This is the name you’re giving to your project folder. You can change this to any name you like (e.g., weather-app, name-of-your-react-project).
  • --template react-ts: This flag tells Vite to use its pre-configured template for a React project with TypeScript. Vite has many other templates for different frameworks and plain JavaScript/TypeScript.
• What happens during this step?
  • Vite quickly creates a new directory named my-react-app.
  • It sets up a minimal project structure with the essential files for a React + TypeScript application. Unlike older tools, it doesn’t install dependencies at this stage, making this step very fast.
  • Key files created include:
    • index.html: Located in the project root, this is the main entry point of your application for the browser.
    • src/main.tsx: The JavaScript/TypeScript entry point where your React application is initialized and mounted to the DOM.
    • vite.config.ts: The configuration file for Vite, though for basic React + TS setup, you often don’t need to touch this initially.
    • package.json: Pre-filled with necessary dependencies (like React, ReactDOM, TypeScript) and scripts.

Manual Setup using pnpm create vite@latest (Should generate the same template project )

1. Open your terminal or command prompt.

2. Navigate to the directory where you want to create your new project folder.

3. Run the following command:

   Bash

   pnpm create vite@latest

   • Using @latest ensures you are using the most recent version of the Vite scaffolding tool.

After running the command, Vite will ask you a few questions:

4. Project name: ? Project name: ›

   • Type the name for your project folder (e.g., my-react-app) and press Enter.

5. Select a framework: ? Select a framework: › - Use arrow keys. Return to submit.

   • Use the Up/Down arrow keys to highlight React.

   • Press Enter.

     Vanilla
     Vue
   ❯ React
     Preact
     Lit
     Svelte
     Solid
     Qwik
     Others

6. Select a variant: ? Select a variant: › - Use arrow keys. Return to submit.

   • Use the Up/Down arrow keys to highlight TypeScript (or TypeScript + SWC if available - SWC is a faster Rust-based compiler that Vite can use). For most cases, either is fine; “TypeScript + SWC” might offer slightly faster compile times.

   • Press Enter.

     JavaScript
     TypeScript  <-- Choose this
     JavaScript + SWC
     TypeScript + SWC <-- Or choose this

• What happens: Vite creates the project directory (my-react-ts-vite-app or whatever you named it) with the necessary files and configuration for a React + TypeScript project based on your selections.

---

Step 2: Navigate into Your Project Directory 📂

1. Change directory: bash cd my-react-app (Replace my-react-app with the actual name you used.)

---

Step 3: Install Dependencies 📦

Now that you are inside your project directory, you need to install the dependencies listed in the package.json file.

1. Install dependencies using pnpm: bash pnpm install

• Explanation:
  • pnpm install: This command reads the package.json file and downloads/links all the necessary packages (React, ReactDOM, TypeScript, Vite itself as a development dependency, etc.) into a node_modules directory using pnpm’s efficient storage mechanism. It will also create a pnpm-lock.yaml file to ensure consistent installations.

---

Step 4: Start the Development Server ▶️

With dependencies installed, you can run the local development server.

1. Run the development script: bash pnpm dev

• Explanation:
  • pnpm dev: This command runs the "dev" script defined in your package.json (which Vite sets up to vite).
• What happens during this step?
  • Vite starts its highly optimized development server. It’s known for its extremely fast startup time and Hot Module Replacement (HMR) that updates your application in the browser almost instantly when you save changes, without losing component state.
  • It will typically open your default web browser automatically, navigating to a local address like http://localhost:5173 (the port may vary if 5173 is in use (5173 is the default)).
  • You’ll see the default Vite + React starter page.

---

Step 5: Explore and Edit Your Code ✍️

1. Open the project folder (my-react-app) in your favorite code editor (like Visual Studio Code, Cursor, etc.).
2. Key files and folders to note in a Vite + React project:
   • index.html: (In the project root) The main HTML file. Vite injects your JavaScript into this.
   • public/: For static assets that are copied directly to the build output directory without processing (e.g., favicon.ico, robots.txt).
   • src/: Contains your source code.
     • main.tsx: The entry point where React is initialized (ReactDOM.createRoot(...).render(...)).
     • App.tsx: The main application component. This is a good place to start modifying.
     • vite-env.d.ts: TypeScript type definitions for Vite-specific environment variables.
     • assets/: Often used for assets like images or fonts that are imported by your JavaScript/CSS.
   • package.json: Lists project dependencies and scripts (dev, build, lint, preview).
   • pnpm-lock.yaml: pnpm’s lockfile for deterministic dependency resolution.
   • tsconfig.json & tsconfig.node.json: TypeScript configuration files.
   • vite.config.ts: Vite’s configuration file. You can customize Vite’s behavior here (e.g., add plugins).

Now you can start editing files like src/App.tsx. Save your changes, and the browser page should update instantly! 🎉

---

Step 6: Choosing a Styling Method 🎨

Vite has excellent built-in support for various styling methods. Here are some popular options:

---

1. Tailwind CSS (Utility-First Framework)

• Description: A popular utility-first CSS framework. You build designs directly in your JSX by applying pre-defined utility classes.
• How to Use (Vite Setup):

  1. Install Dependencies: bash pnpm add -D tailwindcss postcss autoprefixer

  2. Generate Config Files: bash pnpm tailwindcss init -p (This creates tailwind.config.js and postcss.config.js)

  3. Configure Template Paths: In tailwind.config.js, tell Tailwind where your component files are: js /** @type {import('tailwindcss').Config} */ export default { // Note: Vite typically uses ES module syntax for config files content: [ "./index.html", // Include the root HTML file "./src/**/*.{js,ts,jsx,tsx}", // Include all relevant files in src ], theme: { extend: {}, }, plugins: [], }

  4. Add Tailwind Directives: Create a main CSS file (e.g., src/index.css or src/style.css) and add the Tailwind directives: css @tailwind base; @tailwind components; @tailwind utilities;

  5. Import the CSS file: Import this CSS file in your main entry point, src/main.tsx:

     // src/main.tsx
     import React from 'react'
     import ReactDOM from 'react-dom/client'
     import App from './App.tsx'
     import './index.css' // Or your chosen main CSS file name
     
     ReactDOM.createRoot(document.getElementById('root')!).render(
       <React.StrictMode>
         <App />
       </React.StrictMode>,
     )

  6. Apply Classes: Use Tailwind utility classes directly in your JSX.

• Pros: Rapid UI development, consistent design system, highly customizable, avoids naming things, excellent for component-based frameworks, optimized production builds.
• Cons: Can make JSX look “busy,” requires setup, learning curve for utility classes.
• Can be enhanced further by using UI Component Libraries, e.g. Material UI

---

2. CSS Modules (.module.css or .module.scss)

• Description: CSS (or SCSS/Sass) files where all class names and animation names are scoped locally to the component importing them. Vite supports this out-of-the-box with a specific file naming convention.
• How to Use:
  1. Create a file named with the .module.css or .module.scss extension (e.g., src/MyComponent.module.css or src/MyComponent.module.scss).
     • If using .module.scss, ensure sass is installed (pnpm add -D sass).
  2. Write CSS/SCSS rules (e.g., .title { color: blue; }).
  3. Import the styles as an object into your component file: import styles from './MyComponent.module.css';.
  4. Use the class names via the imported object: className={styles.title}. Vite automatically generates unique class names behind the scenes.
• Pros: Solves the global scope problem (no naming collisions); keeps styles modular and colocated; works with plain CSS or preprocessors.
• Cons: Requires accessing class names via the styles object (styles.someClass); combining multiple conditional classes can be a bit more verbose.

---

3. Plain CSS & CSS Preprocessors (Sass/SCSS)

• Description:
  • Plain CSS: Standard CSS in .css files.
  • Sass/SCSS: A CSS preprocessor that adds features like variables, nesting, mixins, and functions. SCSS is the more common syntax (CSS-like), while Sass uses indentation. Vite handles the compilation for you.
• How to Use (Plain CSS):
  1. Create a CSS file (e.g., src/App.css or src/styles/main.css).
  2. Write standard CSS rules.
  3. Import it into a component or your main entry file (src/main.tsx): import './App.css'; or import './styles/main.css';.
  4. Use class names in your JSX: className="my-custom-class".
• How to Use (Sass/SCSS):
  1. Install Sass: bash pnpm add -D sass
  2. Create an SCSS file (e.g., src/App.scss or src/styles/main.scss).
  3. Write SCSS rules (e.g., $primary-color: blue; .my-element { color: $primary-color; }).
  4. Import it just like a CSS file: import './App.scss'; or import './styles/main.scss';. Vite will automatically compile it to CSS.
• Pros: Simple and familiar (CSS); powerful features and better organization (Sass/SCSS); Vite handles compilation seamlessly.
• Cons (Plain CSS & often basic Sass/SCSS): Styles are global by default, which can lead to naming conflicts in larger applications if not managed carefully (e.g., with BEM methodology).

---

Other Popular Options (Briefly):

• CSS-in-JS (e.g., styled-components, Emotion): Write actual CSS code within your JavaScript/TypeScript files. Allows for easy dynamic styling based on component props and provides scoped styles. Requires installing specific libraries (e.g., pnpm add styled-components and pnpm add -D @types/styled-components).
  • Pros: Scoped styles, dynamic styling, colocation of logic and styles.
  • Cons: Potential runtime overhead, can add bundle size, specific library syntax.
• UI Component Libraries (e.g., Material UI (MUI), Chakra UI, Ant Design): Pre-built sets of styled React components. You install the library (e.g., pnpm add @mui/material @emotion/react @emotion/styled) and use its components.
  • Pros: Very fast development for standard UIs, consistency, accessibility often handled.
  • Cons: Adds dependencies, might require learning the library’s API/theming, potential for generic look if not customized.

Recommendation for Beginners with Vite:

• Start with Plain CSS or SCSS for familiarity, and combine with CSS Modules for scoping as your project grows. Vite makes this combination very easy.
• If you value rapid prototyping and a utility-driven approach, Tailwind CSS is an excellent choice once you’re past the initial setup.

Choose the method that best fits your project’s needs and your team’s preferences!

---

npm vs. pnpm: Key Differences Explained

(This section remains relevant as it explains the package manager choice)

Both npm and pnpm are package managers for Node.js projects, but they have different approaches:

1. Disk Space Efficiency:
   • npm (v3+): Creates a “flat” node_modules. Duplicates packages across projects.
   • pnpm: Uses a content-addressable store and links packages. Saves significant disk space.
2. Installation Speed:
   • npm: Can be slower.
   • pnpm: Often significantly faster due to its linking strategy and efficient caching.
3. node_modules Structure & Phantom Dependencies:
   • npm: Hoists dependencies, potentially allowing access to undeclared “phantom dependencies.”
   • pnpm: Creates a strict, non-flat node_modules. Prevents phantom dependencies, making projects more robust.
4. Strictness & Determinism:
   • pnpm: Generally stricter and more deterministic due to its unique node_modules structure and pnpm-lock.yaml.
5. Lock Files:
   • npm: package-lock.json.
   • pnpm: pnpm-lock.yaml.

Why choose pnpm? * Significant disk space savings. * Faster installations and updates. * More robust projects due to the prevention of phantom dependencies. * Strictness can lead to better dependency management.