Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

md: Replace tsx by ts for highlightjs support

Browse source
This commit is contained in:
Eric NGUYEN 2022-09-23 18:10:30 +02:00
parent 3ecff4cf01
commit 8535416acc
4 changed files with 29 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

10
docs/DevDocs/Pages/BasesReact.md
View file

@ -24,7 +24,7 @@ Selon comment vous écrivez le composant, classe ou fonctionnelle, la manière d
Pour les props : Pour les props :
```tsx ```ts
// functional // functional
function Welcome(props) { function Welcome(props) {
return <h1>Hello, {props.name}</h1>; return <h1>Hello, {props.name}</h1>;
@ -112,7 +112,7 @@ Les props sont des données entrer d'un composant. Comme pour un composant html
Exemple : Exemple :
```tsx ```ts
function Welcome(props) { function Welcome(props) {
return <h1>Hello, {props.name}</h1>; return <h1>Hello, {props.name}</h1>;
} }
@ -125,7 +125,7 @@ Un composant ne possédant pas d'état est dit `stateless`.
Voici donc un exemple de composant React **avec état** : Voici donc un exemple de composant React **avec état** :
```tsx ```ts
// Clock.tsx // Clock.tsx
interface IClockProps { interface IClockProps {
} }
@ -157,7 +157,7 @@ export const Clock: React.FC<IClockProps> = (props) => {
Et voici la version **sans état** : Et voici la version **sans état** :
```tsx ```ts
// Clock.tsx // Clock.tsx
interface IClockProps { interface IClockProps {
time: Date time: Date
@ -218,7 +218,7 @@ const [value, setValue] = React.useState(defaultValue);
Revenons sur l'exemple de `useTicking`: Revenons sur l'exemple de `useTicking`:
```tsx ```ts
const useTicking = (setTime) => { const useTicking = (setTime) => {
React.useEffect(() => { React.useEffect(() => {
// componentDidMount // componentDidMount

2
docs/DevDocs/Pages/Heroicon.md
View file

@ -11,7 +11,7 @@ L'icône Home peut être importé comme tout composant React.
Il existe plusieurs type de chaque icône de Heroicon : `outline`, `solid`, `mini`. Utilisons donc `outline`. Il existe plusieurs type de chaque icône de Heroicon : `outline`, `solid`, `mini`. Utilisons donc `outline`.
```tsx ```ts
import { HomeIcon } from '@heroicons/react/outline'; import { HomeIcon } from '@heroicons/react/outline';
... ...

28
docs/DevDocs/Pages/PremierComposantReact.md
View file

@ -25,7 +25,7 @@ Par convention comme il est dit dans la section [Pour commencer](PourCommencer.m
Maintenant créons le squelette du composant. Pour rappel, on utilise la syntaxe *fonctionnelle* (i.e. une fonction = un composant). Maintenant créons le squelette du composant. Pour rappel, on utilise la syntaxe *fonctionnelle* (i.e. une fonction = un composant).
```tsx ```ts
// Home.tsx // Home.tsx
export function Home(): JSX.Element { export function Home(): JSX.Element {
return <></>; return <></>;
@ -38,7 +38,7 @@ La convention de nommage indique qu'il faut prioriser les fonctions nommées (do
Mettons le bouton html et mettons du texte dedans : Mettons le bouton html et mettons du texte dedans :
```tsx ```ts
export function Home(): JSX.Element { export function Home(): JSX.Element {
return ( return (
<button> <button>
@ -53,7 +53,7 @@ export function Home(): JSX.Element {
Pour que le bouton appelle une fonction nous allons utiliser la propriété `onClick`. Pour lui équiper d'une variable/fonction, on la met entre accolades `prop={var}`. Pour que le bouton appelle une fonction nous allons utiliser la propriété `onClick`. Pour lui équiper d'une variable/fonction, on la met entre accolades `prop={var}`.
```tsx ```ts
function GoHome(): void { function GoHome(): void {
location.reload(); location.reload();
} }
@ -79,7 +79,7 @@ On sait que l'on doit l'ajouter dans la **barre** à gauche, soit `Bar.tsx`
Commençons par importer le composant dans `Bar.tsx`: Commençons par importer le composant dans `Bar.tsx`:
```tsx ```ts
// Bar.tsx // Bar.tsx
import { Home } from '../Home/Home'; import { Home } from '../Home/Home';
... ...
@ -87,7 +87,7 @@ import { Home } from '../Home/Home';
Puis ajoutons-le dans la vue : Puis ajoutons-le dans la vue :
```tsx ```ts
// Bar.tsx // Bar.tsx
export function Bar(props: IBarProps): JSX.Element { export function Bar(props: IBarProps): JSX.Element {
return ( return (
@ -120,7 +120,7 @@ Ce que l'on veut faire est donc de renverser cette opération, autrement dit cha
Allons donc dans le composant `MainMenu.tsx` et analysons le contenu du bouton `Start from scratch`. Allons donc dans le composant `MainMenu.tsx` et analysons le contenu du bouton `Start from scratch`.
```tsx ```ts
// MainMenu.tsx // MainMenu.tsx
... ...
default: default:
@ -137,7 +137,7 @@ Allons donc dans le composant `MainMenu.tsx` et analysons le contenu du bouton `
On trouve la fonction `onClick` suivante : On trouve la fonction `onClick` suivante :
```tsx ```ts
// MainMenu.tsx // MainMenu.tsx
{ {
setWindowState(WindowState.Loading); setWindowState(WindowState.Loading);
@ -155,7 +155,7 @@ Pour rappel `setWindowState` est un setteur d'état, et qu'elle est définie **d
Regardons donc le composant parent de `MainMenu`: `App`. Regardons donc le composant parent de `MainMenu`: `App`.
```tsx ```ts
// App.tsx // App.tsx
... ...
<MainMenu <MainMenu
@ -173,7 +173,7 @@ Regardons donc le composant parent de `MainMenu`: `App`.
Cette fonction `newEditor` appelle donc une autre fonction `NewEditor`. Cette fonction `newEditor` appelle donc une autre fonction `NewEditor`.
```tsx ```ts
export function NewEditor( export function NewEditor(
setEditorState: Dispatch<SetStateAction<IEditorState>>, setEditorState: Dispatch<SetStateAction<IEditorState>>,
setLoaded: Dispatch<SetStateAction<boolean>> setLoaded: Dispatch<SetStateAction<boolean>>
@ -197,7 +197,7 @@ Cette fonction à l'air assez compliquée, mais on sait qu'elle utilise `setEdit
Donc pour renverser l'état de `App` il faut appeler soit `setEditorState` ou soit `setLoaded`. En analysant un peu plus près `App.tsx`, on remarque l'évidante condition permettant d'afficher ou non le menu principal : Donc pour renverser l'état de `App` il faut appeler soit `setEditorState` ou soit `setLoaded`. En analysant un peu plus près `App.tsx`, on remarque l'évidante condition permettant d'afficher ou non le menu principal :
```tsx ```ts
// App.tsx // App.tsx
... ...
if (isLoaded) { if (isLoaded) {
@ -220,7 +220,7 @@ Donc pour renverser l'état de `App` il faut appeler soit `setEditorState` ou so
Ainsi, on sait qu'il faut juste appeler `setLoaded` le setteur d'état de `isLoaded`: Ainsi, on sait qu'il faut juste appeler `setLoaded` le setteur d'état de `isLoaded`:
```tsx ```ts
// App.tsx // App.tsx
const [isLoaded, setLoaded] = useState<boolean>(false); const [isLoaded, setLoaded] = useState<boolean>(false);
``` ```
@ -229,7 +229,7 @@ Cependant comment appeler cette fonction depuis `Home` ? Et bien nous allons uti
Comme pour `MainMenu`, dans `Home.tsx` nous allons mettre la fonction `GoHome` dans les props : Comme pour `MainMenu`, dans `Home.tsx` nous allons mettre la fonction `GoHome` dans les props :
```tsx ```ts
import React from 'react'; import React from 'react';
interface IHomeProps { interface IHomeProps {
@ -251,7 +251,7 @@ Note: vous pouvez utiliser `Home(props: IHomeProps)` et appeler `props.goHome` c
Home est utilisé dans les composants Bar, UI, et Editor avant d'être appelé dans App. Il faut faire la même chose, ajouter la fonction dans les props et l'appeler dans le composant : Home est utilisé dans les composants Bar, UI, et Editor avant d'être appelé dans App. Il faut faire la même chose, ajouter la fonction dans les props et l'appeler dans le composant :
```tsx ```ts
// Bar.tsx // Bar.tsx
interface IBarProps { interface IBarProps {
goHome: () => void goHome: () => void
@ -272,7 +272,7 @@ export function Bar(props: IBarProps): JSX.Element {
Enfin dans `App.tsx`, créez la fonction permettant de changer `isLoaded` vers `false`: Enfin dans `App.tsx`, créez la fonction permettant de changer `isLoaded` vers `false`:
```tsx ```ts
... ...
if (isLoaded) { if (isLoaded) {
return ( return (

14
docs/DevDocs/Pages/Tailwind.md
View file

@ -27,7 +27,7 @@ Pour positionner le bouton tout en bas il faut modifier le layout de la barre
Voici le layout actuel du composant Bar. Voici le layout actuel du composant Bar.
```tsx ```ts
// Bar.tsx // Bar.tsx
<div className='bar'> <div className='bar'>
<BarIcon>(...)</BarIcon> <BarIcon>(...)</BarIcon>
@ -71,7 +71,7 @@ On va utiliser la premiere méthode, mais libre à vous la méthode.
Pour ajouter une classe sur React, on utilise le mot-clé `className`. C'est pour ne pas rentrer en conflit avec le mot-clé `class` servant de classe d'objet en JavaScript que ce mot-clé a été choisi. Pour ajouter une classe sur React, on utilise le mot-clé `className`. C'est pour ne pas rentrer en conflit avec le mot-clé `class` servant de classe d'objet en JavaScript que ce mot-clé a été choisi.
```tsx ```ts
// Bar.tsx // Bar.tsx
<div className='bar'> <div className='bar'>
<BarIcon>(...)</BarIcon> <BarIcon>(...)</BarIcon>
@ -92,7 +92,7 @@ Continuons avec les couleurs avec le curseur. Cette fois ci, on va utiliser Reac
Revenons sur le composant Home définie par un simple bouton : Revenons sur le composant Home définie par un simple bouton :
```tsx ```ts
// Home.tsx // Home.tsx
import React from 'react'; import React from 'react';
@ -115,7 +115,7 @@ Dans ce composant, initialisons la liste des couleurs que l'on veut utiliser. Le
Il nous suffit donc de juste mettre une liste de mots-clés de couleurs : Il nous suffit donc de juste mettre une liste de mots-clés de couleurs :
```tsx ```ts
// Home.tsx // Home.tsx
... ...
@ -146,7 +146,7 @@ const colors = [
Et d'en sélectionner une au hazard. Et d'en sélectionner une au hazard.
```tsx ```ts
// Home.tsx // Home.tsx
const colors = [ const colors = [
... ...
@ -187,7 +187,7 @@ Indice: Cela implique l'utilisation de `state` ;)
Suivons donc l'indice et créons un hook d'état afin de sélectionner la couleur et de pouvoir la changer quand la souris passe dans le composant Suivons donc l'indice et créons un hook d'état afin de sélectionner la couleur et de pouvoir la changer quand la souris passe dans le composant
```tsx ```ts
// Home.tsx // Home.tsx
export function Home({ goHome }: IHomeProps): JSX.Element { export function Home({ goHome }: IHomeProps): JSX.Element {
const defaultIndex = Math.floor(Math.random() * (colors.length - 1)); const defaultIndex = Math.floor(Math.random() * (colors.length - 1));
@ -209,7 +209,7 @@ export function Home({ goHome }: IHomeProps): JSX.Element {
Ensuite utilisons la propriété `onMouseEnter` pour jeter l'évent. Ensuite utilisons la propriété `onMouseEnter` pour jeter l'évent.
```tsx ```ts
// Home.tsx // Home.tsx
export function Home({ goHome }: IHomeProps): JSX.Element { export function Home({ goHome }: IHomeProps): JSX.Element {
const defaultIndex = Math.floor(Math.random() * (colors.length - 1)); const defaultIndex = Math.floor(Math.random() * (colors.length - 1));