Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hashi7412/react-ts-vite

react-ts-vite coding structure for beginners
https://github.com/hashi7412/react-ts-vite

beginner hashi7412 ide react shinobi ts vite

Last synced: 29 days ago
JSON representation

react-ts-vite coding structure for beginners

Awesome Lists containing this project

README 

        
# React-TypeScript-Vite



React, Vite, and TypeScript offer several advantages when used together such as faster development, better code quality, and improved error handling. React allows developers to build complex UI components, Vite provides an efficient development experience, while TypeScript offers static type checking and better IDE support. The combination of React and TypeScript improves overall developer experience with features like autocompletion and error highlighting, while Vite's integration with TypeScript allows for realtime type checking during development.



```

|—— .gitignore

|—— index.html

|—— README.md

|—— package.json

|—— tsconfig.json

|—— vite.config.json

|—— src

|    |—— App.tsx

|    |—— index.tsx

```



## Bundle JavaScript with Vite



```

❯ yarn init

yarn init v1.22.17

question name (react-ts-vite): react-ts-vite

question version (1.0.0):

question description:

question entry point (index.js):

question repository url:

question author:

question license (MIT):

question private:

success Saved package.json

✨  Done in 22.51s.

```



#### Install Vite



```

  yarn add -D vite

```



#### Create HTML file

```



  

    

    

    React-TS-Vite

  

  

    


    

  



```



#### main.js

```

document.querySelector('#app').innerHTML = `

  


    hello

  


`

```



#### Create Package.json

```

{

  ...

  "scripts": {

    "dev": "vite"

  },

  ...

}

```



With ```yarn dev```, you can see hello like below:



## Build with React

```

yarn add react react-dom

```

#### Install transpiler of React JSX

```

yarn add -D @vitejs/plugin-react

```

#### vite.config.js

```

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'



export default defineConfig({

  plugins: [react()],

})

```

#### Update main.js



Rename ```main.js``` to ```index.jsx```



```

import React from 'react'

import ReactDOM from 'react-dom/client'

import { App } from './App'



ReactDOM.createRoot(document.getElementById('app')).render(

  

    

  ,

)

```



#### Add App.jsx

```

export const App = () => (

    
Hello React


);

```

#### Change index.html a bit

```



  

    

    

    React-TS-Vite

  

  

    


      

  



```

With ```yarn dev```, you can see the resule like below:

[Uploading 0_B9DsdP8-HIMc4ruK.webp…]()



## Add TypeScript



#### Install typescript

```

yarn add -D typescript

```

#### Create tsconfig.json



```

{

  "compilerOptions": {

    "target": "ESNext",

    "useDefineForClassFields": true,

    "lib": ["DOM", "DOM.Iterable", "ESNext"],

    "allowJs": false,

    "skipLibCheck": true,

    "esModuleInterop": false,

    "allowSyntheticDefaultImports": true,

    "strict": true,

    "forceConsistentCasingInFileNames": true,

    "module": "ESNext",

    "moduleResolution": "Node",

    "resolveJsonModule": true,

    "isolatedModules": true,

    "noEmit": true,

    "jsx": "react-jsx"

  },

  "include": ["src"]

}

```



#### Add type declaration of React app

```

yarn add -D @types/react @types/react-dom

```

#### Update jsx files



Let's rename ```main.jsx``` to ```main.tsx``` and ```App.jsx``` to ```App.tsx```



index.tsx

```

import React from 'react';

import { createRoot } from 'react-dom/client';

import { App } from './App';



ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(

  

    

  ,

)

```

App.tsx

```

import React from "react";



export const App: React.FC = () => (

    
Hello React


);

```

index.html

```



  

    

    

    React-TS-Vite

  

  

    


     

  



```



## Add Type Checking



#### Add type check command in package.json

```

{

  ...,

  "scripts": {    

    "dev": "vite",

    "tscheck": "tsc" // add here

  }

  ...

}

```

If you run ```yarn tscheck```, type error is detected by tsc like below.

```

❯ yarn tscheck

yarn run v1.22.17

$ tsc

✨  Done in 1.26s.

```

If you want to get a type error as soon as possible, you could add -w option. It will watch your code changes and notify type error.

```

❯ yarn tscheck -w

```

## Production Build



```

{

  ...

  "scripts": {

    "dev": "vite",

    "build": "yarn tscheck && vite build",

    "tscheck": "tsc"

  },

}

```



## Legacy Browser

```

Add @vitejs/plugin-legacy

```