← Modification précédente Modification suivante →

Version du 27 octobre 2024 à 16:32

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

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

App.tsx

import './App.css';

<div
  id='d1'
  className="container"
  style={{ display: flex }}
></div>

App.css

#d1 { }
.container { }

CSS module

App.tsx

import styles from './App.css';

<div className={styles.container}></div>

App.module.css

.container { }

Palette and Color

Default colors
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'

Component libraries

@@ Ligne 115 : / Ligne 115 : @@
 = Styling =
-<filebox fn='App.tsx' lang='html'>
+<filebox fn='App.tsx'>
 import './App.css';
-import styles from './App.css';
 <div
    id='d1'
    className="container"
-  className={styles.container}
    style={{ display: flex }}
 ></div>
@@ Ligne 129 : / Ligne 127 : @@
 <filebox fn='App.css'>
 #d1 { }
+.container { }
+</filebox>
+== CSS module ==
+<filebox fn='App.tsx'>
+import styles from './App.css';
+<div className={styles.container}></div>
+</filebox>
+<filebox fn='App.module.css'>
 .container { }
 </filebox>