React TODO Application with

• Environment Setup
• Components
• JSX Configs
• Rendering List
• useState Hooks
• Passing Props
• useRef Hooks
• useEffect Hooks
• Frond-end CSS framework: Tailwind CSS
• Storage: LocalStorage

Live Preview

https://react-todo-application-beta.vercel.app

Tips

Create React Project with Vite

• First intall Node JS to your PC.
• Open the command prompt or Terminal and navigate to the directory where you want to create a new project. Then, type : npm create vite@latest

  npm create vite@latest

• Then add a project name and select framework : react
• After that select a variant : JavaScript + SWC

Open your project using code editor

• Open the code editor terminal and type : npm install

  npm install

• After that type : npm run dev

  npm run dev

Setup Tailwind CSS to Vite React App

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

Install Tailwind CSS

• 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

  Configure your template paths

• 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}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  }
  

  Add the Tailwind directives to your CSS

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

• Then tyepe : npm run dev

  npm run dev

Start using Tailwind in your project

• Start using Tailwind’s utility classes to style your content.

  export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
  }
  

  References

Tailwind CSS : https://tailwindcss.com/
React : https://react.dev/

Thank You.