matthewaubert/react-app-workflow.md

## react-app-workflow.md

      
    Raw
  

              react-app-workflow.md
            
          
    React App Workflow

Last updated: 4 May 2024

Note: Replace all following instances of <project-name> with the name of your current project

Scaffold React App With Vite


Reference: https://www.theodinproject.com/lessons/node-path-react-new-setting-up-a-react-environment

Reference: https://vitejs.dev/


cd into the appropriate parent directory and enter the following command:

For a JavaScript project:
npm create vite@latest <project-name> -- --template react


For a TypeScript project:
npm create vite@latest <project-name> -- --template react-ts


If you see the following output, enter y and press enter:
Need to install the following packages:
  create-vite@5.X.X
Ok to proceed? (y)


Once the command has begun executing, it should output the next steps for you to follow:

Note: The first line should actually say cd <project-name> but code <project-name> should instead be used in order to open a new workspace in VSCode for the new repo (or use the File menu)

code <project-name>
npm install
npm run dev


Provided that everything has gone according to plan, head over to localhost:5173, where you’ll be greeted with the following page:


Note: If you close this server, simply run npm run dev to re-open

Initialize Github Repo


Create a new repo on Github website
Follow the instructions to create a new repository on the command line:
git init
git add .
git commit -m "First commit"
git branch -M main
git remote add origin git@github.com:<username>/<project-name>.git
git push -u origin main


Set up Prettier and ESLint

Set up Prettier


Reference: https://gist.github.com/ManonLef/2d3de90cbbdf9db563cbc786c21ae1cc

Reference: https://medium.com/@kiran.jasvanee/prettier-auto-formatting-in-visual-studio-code-beab1c026b13


npm install --save-dev --save-exact prettier
echo -e "{\n  \"singleQuote\": true\n}"> .prettierrc.json to create a .prettierrc.json file (needed to recognize this repo uses prettier). When opened, it should look like the following:
{
  "singleQuote": true
}

cp .gitignore .prettierignore to create a .prettierignore file with the contents from .gitignore (or compose otherwise as needed)
(Be sure Prettier VSCode extension is installed)
If not already set up in global settings, create a settings.json file within the workspace .vscode directory and add the following in order to format on save:
{
  "editor.formatOnSave": true
}
Or open workspace settings wih VSCode command palette, go to "Workspace" tab, select "Text Editor" dropdown, select "Formatting", check "Format on Save"

Set up ESLint


Note: The Vite + React starter project comes with ESLint already pre-installed

Reference: https://typescript-eslint.io/users/configs/


If you're developing a TypeScript production application, follow Vite's recomendations in the README.md:

In the .eslintrs.cjs, configure the top-level parserOptions property like this:
module.exports = {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
  // other rules...
};

Replace plugin:@typescript-eslint/recommended with plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
Optionally add plugin:@typescript-eslint/stylistic-type-checked
Install eslint-plugin-react
npm install eslint eslint-plugin-react --save-dev


Add plugin:react/recommended & plugin:react/jsx-runtime to the extends list
One example configuration of the extends array could look like this:
extends: [
  'eslint:recommended',
  'plugin:@typescript-eslint/recommended-type-checked',
  'plugin:react-hooks/recommended',
  'plugin:react/recommended',
  'plugin:react/jsx-runtime',
],


Customize the .eslintrc.cjs rules object. For example:
rules: {
  ...
  'consistent-return': 'off',
  'import/extensions': ['error', 'always'],
  'no-console': 'off',
  'no-else-return': ['error', {
    'allowElseIf': true,
  }],
  'no-param-reassign': ['error', {
    'props': false,
  }],
  'no-plusplus': 'off',
  'no-unused-expressions': ['error', {
    'allowTernary': true,
  }],
  'no-use-before-define': ['error', {
    'functions': false,
    'classes': false,
  }],
}


Make ESLint and Prettier Play Nice


Make ESLint and Prettier work together without conflict:
npm install --save-dev eslint-config-prettier


Add 'prettier' to the end of the extends array in your .eslintrc.cjs file. For example:
extends: [
    ...
    'prettier',
],

To see if there are conflicts (replace <path/to/main.js> with your main.js file path):
npx eslint-config-prettier <path/to/main.js>


Set up Tailwind CSS


Reference: https://tailwindcss.com/docs/guides/vite


Install tailwindcss and its peer dependencies. Then generate your tailwind.config.js and postcss.config.js files.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p


Add the paths to all of your template files in your tailwind.config.js file.
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  // other config stuff
};

Add the Tailwind directives to your ./src/index.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;

Add the following to your .vscode/settings.json file:
{
  // other rules...
  {
    "editor.quickSuggestions": {
    "strings": "on"
  },
  "files.associations": {
    "*.css": "tailwindcss"
  }
}


Set up Testing with Vitest and React Testing Library


Reference: https://www.theodinproject.com/lessons/node-path-react-new-introduction-to-react-testing

Reference: https://www.robinwieruch.de/vitest-react-testing-library/


npm install vitest --save-dev to install Vitest (Vite-native testing framework)
Add the following line to the "scripts" object in your package.json file: "test": "vitest"
npm install jsdom --save-dev to install jsdom (a library which enables HTML in Vitest)
npm install @testing-library/react @testing-library/jest-dom --save-dev to install React Testing Library (provides functions like render) and jest-dom (provides custom Jest matchers to test state of DOM)
Create a tests folder in your project root directory and add a test setup file called setup.js containing the following:
import { expect, afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';
import * as matchers from "@testing-library/jest-dom/matchers";

expect.extend(matchers);

afterEach(() => {
  cleanup();
});

Configure testing in the defineConfig object argument in your vite.config.js file as follows:
export default defineConfig({
  ...
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './tests/setup.js',
  },
});

npm install @testing-library/user-event --save-dev to install the userEvent API (simulates user interactions with the webpage)
Add jest: true to the env object in your .eslintrc.cjs file (so ESLint doesn't show errors when using Vitest functions). For example:
module.exports = {
  ...
  env: { browser: true, es2020: true, jest: true },
  ...
};


Enable Type Checking with PropTypes


Reference: https://www.theodinproject.com/lessons/node-path-react-new-type-checking-with-proptypes

Reference: https://legacy.reactjs.org/docs/typechecking-with-proptypes.html

Reference: https://blog.logrocket.com/validate-react-props-proptypes/


npm install --save prop-types to install PropTypes
Add import PropTypes from 'prop-types' to the top of any component you'd like to type check

Enable Client-Side Routing with React Router


Reference: https://www.theodinproject.com/lessons/node-path-react-new-react-router

Reference: https://reactrouter.com/en/main


npm install react-router-dom to install React Router
Follow the instructions in the first reference for basic use of this library

Deploy App via Cloudflare Pages


Reference: https://www.theodinproject.com/lessons/node-path-react-new-cv-application#cloudflare-pages

Reference: https://developers.cloudflare.com/pages/framework-guides/deploy-anything/#deploy-with-cloudflare-pages

Reference: https://vitejs.dev/guide/static-deploy.html#cloudflare-pages


Push app to GitHub
If you don't already have an account at Cloudflare:

Go to the homepage to create one and log in
Select "Workers & Pages" > "Pages" > "Connect to Git"
Connect to GitHub and select your GitHub repository


If you do already have an account at Cloudflare:

Go to your Cloudflare Dash
Select "Workers & Pages" > "Create application" > "Pages" > "Connect to Git"
Click the "Cloudflare Pages" link under "If your repository is not shown, configure repository access for the Cloudflare Pages app on GitHub."
Add repositories under "Select repositories" and save
Select your GitHub repository


Under "Set up builds and deployments", set npm run build as the build command, and dist as the build output directory
Under "Environment variables (advanced)" > "Add variable", add a variable named NODE_VERSION and set its value to be the version number of Node that you are using. (You can find this by executing node -v in your terminal.)
Hit "Save and Deploy" and watch it come to life!