Discussion :

[valery.petit]

Bonjour,

J'ai repris le projet suivant glané sur le web comme point de départ pour une idée d'appli web.

https://codesandbox.io/s/5x53pnrn3x?...tionHeight=675

Il est possible de faire fonctionner le projet en ligne et j'ai réussi une fois à le copier sur mon pc pour le simuler mais depuis plus rien....
En repartant de zéro j'ai systématiquement une page blanche...

rencontrez vous le même problème?

Merci d'avance

J'ai React.js 20, le problème pourrait venir de là, mais je début et ne vois absolument pas comment régler le problème de version dans le code...

Merci d'avance

[mathieu]

sur mon ordinateur, j'ai un environnement de test avec react 18 et j'ai réussi à avoir un affichage en bricolant un peu le code fourni.

regardez les messages d'erreurs dans la console, ils vous aideront à voir ce qui bloque à la compilation.

[valery.petit]

la console est vide chez moi

pourriez vous me transmette vos modification pour que je puisse regarder?

J’étais en 18 lors des premier essais.

pour ma part, j'ai modifier les extention de js en jsx.

modifié index.jsx de cette façon :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
import React, { Component } from "react";
import { createRoot } from "react-dom/client";
 
.....
 
}
const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);

ajouter un fichier "react-swipy.d.ts contenant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

declare module 'react-swipy';

ajouter un appel pour l'execution du script dans "index.htlm"

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 <div class="body">
      <div id="root"></div>
      <script type="module" src="/Vite React Swipe Card/src/index.jsx"></script>
    </div>

mis à jour "package.json
supprimé "react-scripts": "1.1.4", pour faire un projet "vite"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
  "name": "vite-react-swipe-card",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-spring": "9.7.4",
    "react-swipy": "0.0.6"
  },
  "devDependencies": {
    "@eslint/js": "^9.8.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^9.8.0",
    "eslint-plugin-react": "^7.35.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "vite": "^5.4.0"
  }
}

Encore Merci

[mathieu]

la console est vide chez moi

vous parlez bien de la console où vous lancez la commande "npm run dev" ?

[valery.petit]

oui...
et console de débogage, il ne s'y passe pas grand choses.

je suis très débutant en codage. j'ai démarré la semaine dernière

[mathieu]

oui dans la console débugage, il se passe des choses pas très claires donc avec react et les autres frameworks de ce genre, il vaut mieux regarder la console de la ligne de commande.

et donc dans cette console, il y a un bien message qui indique l'url pour voir la page ?

[valery.petit]

9a me rassure de l'entendre de la bouche de quelqu'un d'autre

J'ai juste ça...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
....\Développement\exemples\Vite React Swipe Card> npm run dev
 
> vite-react-swipe-card@0.0.0 dev
> vite
 
 
  VITE v5.4.0  ready in 332 ms
 
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Et un écran noir lorsque je vais sur : http://localhost:5173/

[mathieu]

quand vous disiez que la console est vide, je pensais que vous n'aviez même pas ce début.

et quand vous créez un projet, vous avez un affichage dans le navigateur ?

pour tester le code que vous avez montrez, je suis parti d'un projet qui fonctionne déjà, j'ai ajouté une balise <Test_swipe/> dans cet exemple et ensuite j'ai transformé le code pour avoir cela :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import React, { Component } from "react";
import { render } from "react-dom";
 
import Swipeable from "react-swipy";
 
import {Card} from "./Card.tsx";
import {Button} from "./Button.tsx";
 
 
const appStyles = {
	height: "100%",
	display: "flex",
	justifyContent: "center",
	alignItems: "center",
	width: "100%",
	minHeight: "100vh",
	fontFamily: "sans-serif",
	overflow: "hidden"
};
 
const wrapperStyles = { position: "relative", width: "250px", height: "250px" };
 
const actionsStyles = {
	display: "flex",
	justifyContent: "space-between",
	marginTop: 12
};
 
 
export function Test_swipe()
{
 
	const cards = ["First", "Second", "Third"];
 
	return (
		<div style={appStyles}>
			<div style={wrapperStyles}>
				{cards.length > 0 && (
					<div style={wrapperStyles}>
						<Swipeable
							buttons={({ right, left }) => (
								<div style={actionsStyles}>
									<Button onClick={left}>Reject</Button>
									<Button onClick={right}>Accept</Button>
								</div>
							)}
						>
							<Card>{cards[0]}</Card>
						</Swipeable>
						{cards.length > 1 && <Card zIndex={-1}>{cards[1]}</Card>}
					</div>
				)}
				{cards.length <= 1 && <Card zIndex={-2}>No more cards</Card>}
			</div>
		</div>
	);
 
 
}

et je n'ai pas modifié le fichier package.json, j'ai utilisé la commande npm install react-swipy.

[valery.petit]

Ayant fais des mise à jour, "import { render } from "react-dom";" n'est plus reconnu, j'ai du le remplacer comme décrit plus haut.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
import React, { Component } from "react";
import { createRoot } from "react-dom/client";
 
.....
 
}
const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);

je vais regarder votre code.
merci

[valery.petit]

Salut Mathieu

je ne comprend pas très bien quand tu dis que tu as ajouté une balise <Test_swipe/>, pour moi les balises prenent cette forme : <Test_swipe> </Test_swipe>

Et ici je vois l'export d'une fonction, ce qui veut dire que je dois faire un import dans index.html. je me trompe?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
export function Test_swipe()
{
 
	const cards = ["First", "Second", "Third"];
 
	return (
		<div style={appStyles}>
			<div style={wrapperStyles}>
				{cards.length > 0 && (
					<div style={wrapperStyles}>
						<Swipeable
							buttons={({ right, left }) => (
								<div style={actionsStyles}>
									<Button onClick={left}>Reject</Button>
									<Button onClick={right}>Accept</Button>
								</div>
							)}
						>
							<Card>{cards[0]}</Card>
						</Swipeable>
						{cards.length > 1 && <Card zIndex={-1}>{cards[1]}</Card>}
					</div>
				)}
				{cards.length <= 1 && <Card zIndex={-2}>No more cards</Card>}
			</div>
		</div>
	);

Merci à toi!

[mathieu]

<Test_swipe/> c'est la version raccourcie des balises quand elles n'ont pas de contenu, comme pour br, input ou img en html de base.

Et ici je vois l'export d'une fonction, ce qui veut dire que je dois faire un import dans index.html. je me trompe?

oui avec import {Test_swipe} from "./fichier";.
d'ailleurs dans mon code j'ai laissé l'import de "render" mais je ne l'utilise plus dans le fichier puisque j'utilise Test_swipe comme un composant secondaire. donc dans mes tests la racine reste toujours la même comme dans le projet de base, ça réduit les mauvaises manipulations quand je fais des essais.

[valery.petit]

<Test_swipe/> c'est la version raccourcie des balises quand elles n'ont pas de contenu, comme pour br, input ou img en html de base.


oui avec import {Test_swipe} from "./fichier";.
d'ailleurs dans mon code j'ai laissé l'import de "render" mais je ne l'utilise plus dans le fichier puisque j'utilise Test_swipe comme un composant secondaire. donc dans mes tests la racine reste toujours la même comme dans le projet de base, ça réduit les mauvaises manipulations quand je fais des essais.

Je suis désolé, je ne comprend pas très bien comment procéder ne pouvant pas importer un jsx directement dans du code html.

j'ai modifié l'extension en .js, mais ça ne fonctionne pas non plus.

est ce que tu peux me donner ton index.html s'il te plais?

[mathieu]

je n'ai pas un projet basé sur vite donc je pense que tu devrais plutôt partir d'un projet de base qui fonctionne et ajouter les éléments petit à petit.

par exemple la 1re étape serait d'ajouter un composant tout simple comme ça :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
export function Test_swipe()
{
	return (
		<div>coucou</div>
	);
}

est ce que tu as un fichier main qui ressemble à ça ?
https://stackblitz.com/edit/vitejs-v...x&terminal=dev

[valery.petit]

Je n'utilise pas de TypeScript et n'ai donc pas le package ni de document en .ts ou tsx dans mon projet.


si je comprend bien
il faudrait que je fasse l'import dans main.tsx

et ensuite juste : <Test_swipe/> dans la section body de index.html?

edit : bon gros bug, il semblerait que index.html ne soit pas chargé

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>test</p>
</body>
</html>

n'affiche rien à l'écran....

Le problème vient de vite par ce qu'avec "Go Live" ça fonctionne
je vais fouiller

[valery.petit]

ok, bon légère avancée

je suis reparti d'un projet neuf.

Il fallait retirer les {} sur les imports de Card et Button...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
import Button from "./components/Button.jsx";
import Card from "./components/Card.jsx";

j'ai des nouveau défaut qui on l'air de pointer React-Swipy.
j'ai cherché un peu sur google, je ne trouve rien sur ce package qui n'a semble t'il pas évolué de version depuis react 16...
je pense que ce sera la limite...

il vaudrait peut-être mieux que je me tourne vers un autre package....