Carte à swiper JS

Version imprimable

09/08/2024, 11h44
valery.petit

Carte à swiper JS

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
09/08/2024, 23h03
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.

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:

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:

declare module 'react-swipy';

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

Code:

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:

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

09/08/2024, 23h45
mathieu

Citation:

Envoyé par valery.petit

la console est vide chez moi

vous parlez bien de la console où vous lancez la commande "npm run dev" ?
10/08/2024, 08h19
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 :mouarf:
10/08/2024, 08h29
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 ?

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

J'ai juste ça...
Code:

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/

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:

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.

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:

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

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:

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!

11/08/2024, 00h13
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.

Citation:

Envoyé par valery.petit

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.
11/08/2024, 11h18
valery.petit

Citation:

Envoyé par 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.

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?
11/08/2024, 11h37
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:

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

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:

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

11/08/2024, 19h27
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:

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....