This exercise is based on the FreeCodeCamp's tutorial How to Code Your React App with TypeScript - YouTube video: React & TypeScript - Course for Beginners. At all this is my first touch with TypeScript.
-
TypeScript: Everyday Types | Basic Types (deprecated version).
-
UseHooks-TSa React hooks library, ready to use, written in typescript. -
Drag and drop: React Beautiful DnD.
- Note, this library will not be maintained in the feature, so probably React DnD will be better choice for the future projects.
- Or just use Hello Pangea DnD which is a maintained fork of React Beautiful DnD. SO Ref.
- Move the todos from left to right when mark them as done.
- Move the todos from right to left when edit them them.
- Implement useReducer Hook with Typescript:
- React & TypeScript - Course for Beginners [1:03:23]
- React Shopping Cart Tutorial | Context API with useReducer Hook in React JS
- React Context & Hooks Tutorial #19 - Reducers, Actions & State
npm create vite@latest
# ✔ Project name: … exc-ts-react-todo-app
# ✔ Select a framework: › React
# ✔ Select a variant: › TypeScript
cd exc-ts-react-todo-app/
npm install-
Create start command in
package.jsonfile as follows:"scripts": { "start": "vite --host 0.0.0.0 --port 3000", }
-
Clean the
src/andpublic/directories and start working on the project.
npm i --save-dev tailwindcss postcss autoprefixer
npx tailwindcss init -pnpm i @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio
npm i @headlessui/react
npm i react-icons
npm i @heroicons/reactnpm i react-beautiful-dnd
npm i @types/react-beautiful-dndnpm i @hello-pangea/dndReferences:
- https://tailwindui.com/
- https://react-icons.github.io/react-icons/
- https://headlessui.com/
- https://heroicons.com/
git config --global init.defaultBranch master
git init
git add -A
git commit -m "Initial commit"
git branch -M master
git remote add origin git@github.com:metalevel-tech/exc-ts-react-todo-app.git
git push -u origin master