jeromeabel

Deploy React App

Steps with Vite and React-router

On Github Pages

• Install gh-pages : pnpm i -D gh-pages
• Add scripts to package.json:
  • "build-for-deploy": "tsc && vite build && cp dist/index.html dist/404.html",
  • "predeploy": "yarn run build-for-deploy",
  • "deploy": "gh-pages -d dist",
• Add homepage to package.json:

jeromeabel

Node And MongoDB Primer

Installation

• Install Node
• Install MongoDB Driver locally or create a MongoDB Atlas account (see below)
• Optional : install Compass

Create a project

$ mkdir project && cd project

jeromeabel

Redux Toolkit Primer #1 - Counter 📖

A simple example of a Counter to remind me the basic usage of Redux Toolkit. The Counter React component displays its value ("state") and allows to change it with three different buttons ("actions").

File structure :

• ./main.jsx
• ./App.jsx
• ./app/store.js

jeromeabel

Redux Toolkit Primer #2 - Cart 🛒

A simple example of a Cart to remind me the basic usage of Redux Toolkit. We need to use two features : "products" and "cart". The Products React Component displays a list of products and add it to the cart. The Cart Component displays the number of items and the total score.

File structure :

• ./main.jsx
• ./App.jsx
• ./app/store.js

jeromeabel

RTK Query Primer

File structure :

• ./main.jsx
• ./app/store.js
• ./app/apiSlice.js
• ./App.jsx
• ./components/PokemonList.jsx

jeromeabel

React testing setup with Vite

Sources:

• Manny : Quick Vitest Setup With ViteJS, React, & TypeScript
• Luke Twomey : What is Vite and Why Should You Use It Instead of Create React App?

Stack : pnpm, vite, vitest, react, typescript

Prerequisites

• Node, npm

jeromeabel

ARIA hide/show content

Best practices to hide visual content and show it for screenreaders

.screenreader-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
  -webkit-clip-path: inset(50%) !important;
 clip-path: inset(50%) !important; /* 2 */

jeromeabel

Tailwind Primer

Ref

• Effortlessly Build Modern UIs with React and TailwindCSS: A Complete Guide

Installation

pnpm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

jeromeabel

Astro Primer

Ref

• Astro Crash Course

INSTALLATION

• ✔ pnpm create astro@latest
• ✔ Answer: recommended+Typescript/strict+Git
• ✔ VsCode : extension Astro

jeromeabel

Adding an existing project to GitHub

Ref

• add_existing_project_to_git-md

Simple steps to add existing project to Github.

1. Create a new repository on GitHub.

In Terminal, change the current working directory to your local project.