« React + Vite + TS » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
Ligne 108 : | Ligne 108 : | ||
</filebox> | </filebox> | ||
< | <kode lang='tsx'> | ||
import App from './App.tsx' | import App from './App.tsx' | ||
<App /> | <App /> | ||
</ | </kode> | ||
= Styling = | = Styling = |
Version du 27 octobre 2024 à 16:17
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 { CssBaseline } from '@mui/material'; import './index.css' createRoot(document.getElementById('root')!).render( <StrictMode> <CssBaseline /> <h1>My App</h1> </StrictMode>, ) |
src/index.css |
body { display: flex; min-height: 100vh; } #root { margin: 0 auto; padding: 2rem; text-align: center; } |
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' export default function App() { const [count, setCount] = useState(0) return ( <> <h1>My App</h1> </> ) } |
import App from './App.tsx' <App /> |
Styling
ClassName
App.tsx |
<div className="container"></div> |
App.css |
.container { } |
Palette and Color
Value | Color |
---|---|
primary | blue |
secondary | violet |
error | red |
warning | orange |
info | blue |
success | green |
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(); }, []); |
Responding to Events
export default function Button() { function handleClick() { alert('You clicked me!'); } return ( <button onClick={handleClick}> Click me </button> ); } |
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' |