Skip to content

Commit

Permalink
Primeiras configurações
Browse files Browse the repository at this point in the history
  • Loading branch information
mateusaraujos committed May 22, 2024
1 parent 68407b6 commit dbf5234
Show file tree
Hide file tree
Showing 14 changed files with 57 additions and 168 deletions.
31 changes: 2 additions & 29 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,30 +1,3 @@
# React + TypeScript + Vite
# Mateus Araújo Silva

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'],
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
## Em construção...
6 changes: 3 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<title>Menu | Mateus Araújo Silva</title>
</head>
<body>
<div id="root"></div>
Expand Down
Binary file added public/favicon.ico
Binary file not shown.
Binary file added public/me.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion public/vite.svg

This file was deleted.

42 changes: 0 additions & 42 deletions src/App.css

This file was deleted.

34 changes: 3 additions & 31 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,7 @@
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
const [count, setCount] = useState(0)

export default function App() {
return (
<>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
<h1>Mateus Araújo Silva</h1>
</>
)
);
}

export default App
1 change: 0 additions & 1 deletion src/assets/react.svg

This file was deleted.

Binary file added src/fonts/Ubuntu-Bold.ttf
Binary file not shown.
Binary file added src/fonts/Ubuntu-BoldItalic.ttf
Binary file not shown.
Binary file added src/fonts/Ubuntu-Italic.ttf
Binary file not shown.
Binary file added src/fonts/Ubuntu-Regular.ttf
Binary file not shown.
86 changes: 34 additions & 52 deletions src/index.css
Original file line number Diff line number Diff line change
@@ -1,25 +1,44 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
@font-face {
font-family: "Ubuntu";
src: url("./fonts/Ubuntu-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}

color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
@font-face {
font-family: "Ubuntu";
src: url("./fonts/Ubuntu-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}

@font-face {
font-family: "Ubuntu";
src: url("./fonts/Ubuntu-Italic.ttf") format("truetype");
font-weight: 400;
font-style: italic;
}

@font-face {
font-family: "Ubuntu";
src: url("./fonts/Ubuntu-BoldItalic.ttf") format("truetype");
font-weight: 700;
font-style: italic;
}

:root {
font-family: "Ubuntu", sans-serif;
line-height: 1.5;
font-weight: 400;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}

body {
Expand All @@ -29,40 +48,3 @@ body {
min-width: 320px;
min-height: 100vh;
}

h1 {
font-size: 3.2em;
line-height: 1.1;
}

button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
24 changes: 15 additions & 9 deletions src/main.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
const rootElement = document.getElementById("root");

if (rootElement) {
ReactDOM.createRoot(rootElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
} else {
console.error("Elemento com id 'root' não encontrado no documento.");
}

0 comments on commit dbf5234

Please sign in to comment.