Andy Nguyen

How I Start a Personal React Project in 2022

Recently, I wrapped up two personal React projects: Payday Calendar Generator and Personal Finance Prime Directive, and wanted to share this reference sheet on how I would start a React project, specifically a SPA, in 2022.

Main Technologies

Let's get started and open the terminal!

Initial Project Setup

  • Run npm create vite@latest <project-name> -- --template react to create a boilerplate files using Vite with the React template
  • Run cd <project-name>
  • Run npx install-peerdeps --dev eslint-config-wesbos ; my preference for linters configuration
  • Run code . -n to opens VScode in new window
  • Clean up package.json
    • set "version": 0.0.0,
    • update "description": "",
    • set "author": "Andy Nguyen <13814584+AndyN9@users.noreply.github.com>",
    • finish linters setup
      • "scripts": {
  ...
  "lint": "eslint .",
  "lint:fix": "eslint . --fix"
},
"eslintConfig": {
  "extends": [
    "wesbos"
  ]
},
"browserslist": [
  "defaults"
],
    • clean up starter files
      • lint files
      • remove SVGs
  • git init
  • Ready to code !

Prepping Vite for GitHub Pages

After I'm done with the project, I like to go ahead and build the project files into the /docs folder and commit them to the repository so the project can be hosted on GitHub Pages. In order to do that, these settings need to be made to the Vite config file.

/* eslint-disable import/no-extraneous-dependencies */
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  base: './', // to rewrite assets to correct paths
  plugins: [react()],
  build: {
    outDir: 'docs', // build out the project to docs directory
  },
});

Then go ahead and run npm run build and commit everything (the docs folder) to the repo and push itto GitHub. In order for the project to get picked up by GitHub Pages, follow these instructions to change the publishing source.

Wrap Up

This quick and easy setup is good for testing React ideas. Vite is blazing fast, but another alternative is the tried and true create-react-app. Otherwise, if I were building a more serious project or needed more capabilities, I would lean towards Gatsby or Next.js.