How to set up modern React App (SPA)

Edward-Fedoruk — Thu, 26 Sep 2024 19:30:18 +0000

Defining Our Core Frontend Stack

Here's the core stack we'll be using:

React - as the view library
Zustand - for global state management
Vite - as the bundler
Tailwind CSS - for styling

Setting Up the Frontend App

Let's get started with the frontend setup. Begin by creating the project folder and initializing a Vite project:

cd ./project
npm create vite@latest
✔ Project name: … ./
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC
npm install

Cool! We have App with the following structure (or similar one if in the future templae changes)

project-root/
│
├── node_modules/
│
├── public/
│
├── src/
│   ├── assets/
│   │   ├── App.css
│   │   ├── App.tsx
│   │   ├── index.css
│   │   ├── main.tsx
│   │   └── vite-env.d.ts
│
├── .gitignore
│
├── README.md
│
├── eslint.config.js
│
├── index.html
│
├── package-lock.json
│
├── package.json
│
├── tsconfig.app.json
│
├── tsconfig.json
│
├── tsconfig.node.json
│
├── vite.config.ts

Let’s add port config so our app runs every time with the same

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

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

Tweaking ESLint

Firstly, we need to tweak ESLint. The default template sets recommended settings, which do not enforce a specific code style strictly. So let's improve this by updating the eslint.config.js file with:

import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint";

export default tseslint.config(
    { ignores: ["dist"] },
    {
        extends: [js.configs.recommended, ...tseslint.configs.recommended],
        files: ["**/*.{ts,tsx}"],
        languageOptions: {
            ecmaVersion: 2020,
            globals: globals.browser,
        },
        plugins: {
            "react-hooks": reactHooks,
            "react-refresh": reactRefresh,
        },
        rules: {
            ...reactHooks.configs.recommended.rules,
            "react-refresh/only-export-components": [
                "warn",
                { allowConstantExport: true },
            ],
            "@typescript-eslint/no-explicit-any": "error"
        },
    }
);

Adding Prettier

To ensure a consistent code style, let's add prettier. Create a .prettierrc file with the following contents:

{
    "tabWidth": 4,
    "useTabs": false,
    "jsxSingleQuote": false,
    "bracketSpacing": true,
    "jsxBracketSameLine": false
}

Now after you run the project npm run dev you should see starting screen like this one

Configuring Tailwind CSS

Here comes tailwind configurations. Firstly Install tailwind:

npm install -D tailwindcss postcss autoprefixer
npm install @heroicons/react
npx tailwindcss init -p

You should see a couple new configurational files in the root not

tailwind.config.js
postcss.config.js

to the index.html we will add link to tailwind font:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Money manager</title>

        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
    </head>

    <body>
        <div id="root"></div>
        <script type="module" src="/src/main.tsx"></script>
    </body>
</html>

Secondly, add configurations inside tailwind.config.js so that the library knows where is our code place

const defaultTheme = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [],
}

Thirdly, import tailwind library in index.css to have styles availiable in our bundle

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally we are going to test our changes. Inside of the App.tsx write a hello world with tailwind classes

function App() {
    return (
        <>
            <h1 className="text-3xl font-bold underline">Hello world!</h1>
        </>
    );
}

export default App;

If you see screen like this after reloading the project you’ve done everything right!

Clean Up

Delete any predefined template files and folders you don't need. Your final folder structure should look like this:

node_modules
public
src
  ├─ App.tsx
  ├─ index.css
  ├─ main.tsx
  ├─ vite-env.d.ts
.gitignore
.prettierignore
.prettierrc
README.md
eslint.config.js
index.html
package-lock.json
package.json
postcss config.js
tailwind.config.js
tsconfig.app.json
tsconfig.json
tsconfig.node.json
vite.config.ts

In case you face some issues or bugs you can copy code for this first lessong from this link:

This concludes the setup for our frontend app.
Happy coding!