Skip to content

workshops-de/react-typescript-workshop

Repository files navigation

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:

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:
export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
  • Replace tseslint.configs.recommended to tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked
  • Optionally add ...tseslint.configs.stylisticTypeChecked
  • Install eslint-plugin-react and update the config:
// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})

Making changes to solutions

  • use interactive rebase to make changes to certain commits
  • run: npm run generate-tags
    • will use the commit message to create tags
  • tags are used to link to solutions from workspace material

Troubleshoot

Sometimes changes from my tag were not updated as expect on GitHub. To fix this you need to delete the remote tag and upload it again.

  1. git push origin --delete <name-of-the-tag>
  • git push origin --delete 02-add-an-app-header-component
  1. git push origin tag <name-of-the-tag>
  • git push origin tag 02-add-an-app-header-component