https://github.com/gunapalanivel/react-typescript-playground

A personal playground for learning and experimenting with React and TypeScript. This repository is dedicated to understanding how to effectively integrate TypeScript with React, focusing on key concepts such as typing props and state, using React hooks with TypeScript, and building type-safe components.
https://github.com/gunapalanivel/react-typescript-playground

components-react hooks javascript typescript

Last synced: about 1 month ago
JSON representation

A personal playground for learning and experimenting with React and TypeScript. This repository is dedicated to understanding how to effectively integrate TypeScript with React, focusing on key concepts such as typing props and state, using React hooks with TypeScript, and building type-safe components.

• Host: GitHub
• URL: https://github.com/gunapalanivel/react-typescript-playground
• Owner: GunaPalanivel
• Created: 2024-08-03T17:48:30.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-08-25T15:14:48.000Z (4 months ago)
• Last Synced: 2024-08-25T16:31:56.389Z (4 months ago)
• Topics: components-react, hooks, javascript, typescript
• Language: TypeScript
• Homepage: https://react-typescript-playground.vercel.app
• Size: 43 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh

- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js

export default {

  // other rules...

  parserOptions: {

    ecmaVersion: "latest",

    sourceType: "module",

    project: ["./tsconfig.json", "./tsconfig.node.json", "./tsconfig.app.json"],

    tsconfigRootDir: __dirname,

  },

};

```

- Replace `plugin:@typescript-eslint/recommended` to `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](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list