Skip to content

Commit a9d429b

Browse files
vineethtrvvineethtrv
committed
feat: Initialize React application with Vite and TypeScript
- Added main application structure with App component. - Created Header and Footer components with styles. - Implemented Outlet component for rendering nested routes. - Developed Tile component for displaying loading animations. - Introduced SCSS for styling and organized styles into modules. - Set up Vite configuration for React and TypeScript support. - Removed legacy SCSS file and replaced it with modular styles. - Added SVG icon for Vite. - Configured TypeScript settings for strict type checking and module resolution.
1 parent b929559 commit a9d429b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+4113
-13099
lines changed

‎.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎README copy.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# React + TypeScript + Vite
2+
3+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4+
5+
Currently, two official plugins are available:
6+
7+
- [@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
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9+
10+
## Expanding the ESLint configuration
11+
12+
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13+
14+
```js
15+
export default tseslint.config({
16+
extends: [
17+
// Remove ...tseslint.configs.recommended and replace with this
18+
...tseslint.configs.recommendedTypeChecked,
19+
// Alternatively, use this for stricter rules
20+
...tseslint.configs.strictTypeChecked,
21+
// Optionally, add this for stylistic rules
22+
...tseslint.configs.stylisticTypeChecked,
23+
],
24+
languageOptions: {
25+
// other options...
26+
parserOptions: {
27+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
28+
tsconfigRootDir: import.meta.dirname,
29+
},
30+
},
31+
})
32+
```
33+
34+
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
35+
36+
```js
37+
// eslint.config.js
38+
import reactX from 'eslint-plugin-react-x'
39+
import reactDom from 'eslint-plugin-react-dom'
40+
41+
export default tseslint.config({
42+
plugins: {
43+
// Add the react-x and react-dom plugins
44+
'react-x': reactX,
45+
'react-dom': reactDom,
46+
},
47+
rules: {
48+
// other rules...
49+
// Enable its recommended typescript rules
50+
...reactX.configs['recommended-typescript'].rules,
51+
...reactDom.configs.recommended.rules,
52+
},
53+
})
54+
```

‎css/styles.css

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎eslint.config.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
},
28+
)

‎images/Cooking.mp4

-115 KB
Binary file not shown.

‎images/Loader-one.png

-4.78 KB
Binary file not shown.

‎images/Loader-screen.png

-54.3 KB
Binary file not shown.

‎index.html

Lines changed: 10 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,13 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
6-
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
7-
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
8-
<link rel="manifest" href="site.webmanifest">
9-
<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#ffffff">
10-
<meta name="msapplication-TileColor" content="#da532c">
11-
<meta name="theme-color" content="#ffffff">
12-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
137
<title>CSS loaders and Spinners</title>
14-
15-
<!-- Search Engine -->
16-
<meta name="title" content="CSS loaders and spinner">
17-
<meta name="description" content="CSS Loader is a collection of different types of loaders, spinners and their source code. There are no image dependencies in this. It's is done using pure CSS. Hence it is easily customization too.">
18-
<meta name="keywords" content="css, loader, spinners , loading , waiting, css loading, cssloaders, css loaders, css3 loaders, css spinners, css3spinners, , css3 spinners, , cssspinners, HTML, CSS3">
19-
<meta name="author" content="Vineeth TR">
20-
21-
<!-- Schema.org for Google -->
22-
<meta itemprop="name" content="CSS loaders and spinner">
23-
<meta itemprop="description" content="CSS Loader is a collection of different types of loaders, spinners and their source code. There are no image dependencies in this. It's is done using pure CSS. Hence it is easily customization too.">
24-
<meta name="image" content="https://cssloaders.github.io/images/Loader-screen.png">
25-
26-
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
27-
<meta name="og:title" content="CSS loaders and spinners">
28-
<meta name="og:description" content="CSS Loader is a collection of different types of loaders, spinners and their source code. There are no image dependencies in this. It's is done using pure CSS. Hence it is easily customization too.">
29-
<meta name="og:image" content="https://cssloaders.github.io/images/Loader-screen.png">
30-
<meta name="og:url" content="https://cssloaders.github.io/">
31-
<meta name="og:site_name" content="CSS loaders and spinners">
32-
<meta name="fb:admins" content="https://www.facebook.com/vinithtrv">
33-
<meta name="og:type" content="website">
34-
35-
<!-- Twitter -->
36-
<meta name="twitter:card" content="summary">
37-
<meta name="twitter:title" content="CSS loaders and spinners">
38-
<meta name="twitter:description" content="CSS Loader is a collection of different types of loaders, spinners and their source code. There are no image dependencies in this. It's is done using pure CSS. Hence it is easily customization too.">
39-
<meta property="twitter:url" content="https://cssloaders.github.io/">
40-
<meta name="twitter:creator" content="@vineethtrv">
41-
<meta name="twitter:image:src" content="https://cssloaders.github.io/images/Loader-screen.png">
42-
43-
<link rel="stylesheet" href="css/styles.css">
44-
45-
46-
<!-- Global site tag (gtag.js) - Google Analytics -->
47-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4F1SESL3HZ"></script>
48-
<script>
49-
window.dataLayer = window.dataLayer || [];
50-
function gtag() { dataLayer.push(arguments); }
51-
gtag('js', new Date());
52-
53-
gtag('config', 'G-4F1SESL3HZ');
54-
</script>
55-
</head>
56-
<body>
57-
<header>
58-
<span class="brand">L &nbsp; aders</span>
59-
60-
<nav>
61-
<a class="nav-btn codepen" target="_blank" href="https://codepen.io/vineethtrv/pen/NWxZqMM"></a>
62-
<a class="nav-btn git" target="_blank" href="https://github.com/vineethtrv/css-loader"></a>
63-
</nav>
64-
</header>
65-
66-
<main id="main"></main>
67-
68-
69-
<footer>
70-
<a href="https://vineethtrv.github.io/" target="_blank" >
71-
<span>👨&zwj;💻</span>
72-
Vineeth TR
73-
</a>
74-
</footer>
75-
76-
77-
<div class="overlay">
78-
<div class="popup">
79-
<button class="btn-close">&times;</button>
80-
<div class="showcase"></div>
81-
<div class="code-content">
82-
<div class="code-area">
83-
<div class="code-header">
84-
HTML
85-
<button class="copy" data-id="markup">Copy</button>
86-
</div>
87-
<code id="markup"></code>
88-
</div>
89-
<div class="code-area">
90-
<div class="code-header">
91-
CSS
92-
<button class="copy" data-id="css">Copy</button>
93-
</div>
94-
<code id='css'></code>
95-
</div>
96-
</div>
97-
</div>
98-
</div>
99-
100-
<script type="module" src="./js/app.js"></script>
101-
</body>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
10213
</html>

‎js/app.js

Lines changed: 0 additions & 115 deletions
This file was deleted.

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy