John-Cassidy / react-english

A fun react playground

react-english

A fun react playground.

Based on this public GitHub Repository

Youtube Vid 01

Youtube Vid Series

Create New React Project

Frameworks

Create React App -- npx create-react-app 01basicreact

Vite

Scaffold Vite Project -- npm create vite@latest

Tailwind and Props in React JS

-- npm create vite@latest project name: 03tailwindprops

Tailwind framework guides

Vite

Follow instructions to setup your project Example... copy and run following commands to initialize tailwindcss

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Background Changer - useState

npm create vite@latest
project name: 04bgChangeer

[Vite](https://tailwindcss.com/docs/guides/vite)

Follow instructions to setup your project
Example... copy and run following commands to initialize tailwindcss

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Password Generator - useEffect, useRef and useCallback using Memoization

npm create vite@latest
project name: 05passwordgenerator

[Vite](https://tailwindcss.com/docs/guides/vite)

Follow instructions to setup your project
Example... copy and run following commands to initialize tailwindcss

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Custom hooks in React | currency Project

USD Conversion URL

EUR Conversion URL

INR Conversion URL

npm create vite@latest
project name: 06currencyconverter

[Vite](https://tailwindcss.com/docs/guides/vite)

Follow instructions to setup your project
Example... copy and run following commands to initialize tailwindcss

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

React router

React Router createBrowserRouter Main Concepts

npm create vite@latest
project name: 07reactRouter

[Vite](https://tailwindcss.com/docs/guides/vite)

Follow instructions to setup your project
Example... copy and run following commands to initialize tailwindcss

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

npm i react-router-dom

Context API

npm create vite@latest
project name: 08miniContext

Build a dark mode | light mode with Context API

npm create vite@latest
project name: 09themeswitcher

[Vite](https://tailwindcss.com/docs/guides/vite)

Follow instructions to setup your project
Example... copy and run following commands to initialize tailwindcss

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p