« React + Vite + TS » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
(→Hooks) |
|||
| Ligne 121 : | Ligne 121 : | ||
// setItems is a function to set a new value to items | // setItems is a function to set a new value to items | ||
const [items, setItems] = useState<Item[]>([]); | const [items, setItems] = useState<Item[]>([]); | ||
</kode> | |||
== [https://react.dev/reference/react/hooks#effect-hooks Effect] == | |||
Allows to connect a component to an external system. | |||
<kode lang='tsx'> | |||
useEffect(() => { | |||
const fetchData = async () => { | |||
const result = await axios(`${API}?query=react`); | |||
}; | |||
fetchData(); | |||
}, []); | |||
</kode> | </kode> | ||
Version du 26 octobre 2024 à 15:35
Links
Description
React is a library. It lets you put components together, but it doesn’t prescribe how to do routing and data fetching.
To build an entire app with React, we recommend a full-stack React framework like Next.js or Remix.
Command line
|
# create a new project (framework: React, variant: TypeScript) npm create vite@latest # install the packages npm install # run the project npm run dev |
Basic App
| public/index.html |
<body>
<!-- hosts the React application -->
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
|
| src/main.tsx |
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<h1>My App</h1>
</StrictMode>,
)
|
| package.json |
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@eslint/js": "^9.13.0",
"@types/react": "^18.3.11",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react": "^4.3.3",
"eslint": "^9.13.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.13",
"globals": "^15.11.0",
"typescript": "~5.6.2",
"typescript-eslint": "^8.10.0",
"vite": "^5.4.9"
}
}
|
Component
| src/App.tsx |
import { useState } from 'react'
import './App.css'
function App() {
const [count, setCount] = useState(0)
return (
<>
<h1>My App</h1>
</>
)
}
export default App
|
| src/main.tsx |
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)
|
Styling
ClassName
| App.tsx |
<div className="container"></div> |
| App.css |
.container { }
|
Hooks
State
Allows to store values.
|
// items is the variable used to store the items // setItems is a function to set a new value to items const [items, setItems] = useState<Item[]>([]); |
Effect
Allows to connect a component to an external system.
|
|
useEffect(() => {
const fetchData = async () => {
const result = await axios(`${API}?query=react`);
};
fetchData();
}, []);
|
Visual Studio Code
Debug
Install the Debugger for Firefox extension.
| .vscode/launch.json |
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Firefox against localhost",
"type": "firefox",
"request": "launch",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}"
}
]
}
|
Naming convention
- file name: PascalCase
|
|
// use the filename as the component name, so PascalCase import App from './App.tsx' |
