Discussion :

[Ushuango]

Bonjour,

Je précise au cas où, je suis sur du Symfony du coup ma page est en twig au départ:

Code html :

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

1
2
3
4
5
{% extends 'layouts/base.html.twig' %}
 
{% block body %}
    <div id="reactApp"></div>
{% endblock %}

Ceci permet initier mon application React, donc le header et le footer de la page sont également en twig et ne changent pas.

Après avoir fait mon ReactDOM.render(<HelloApp />, document.getElementById('reactApp'))Je démarre ma page d'accueil comme ceci:

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
class HelloApp extends React.Component 
{  
    render() {
        return <>
                <div className="form-group my-5">
                    <FormResearch />
                </div>
                <CardList />
            </>
 
    }
}
 
export default HelloApp

Qui fonctionne bien: un champ de formulaire s'affiche , ainsi qu'une liste de carte ( des animaux ).
lorsque je clique sur une carte, j'affiche un console.log pour dire que j'ai cliqué ( je suis débutant en React, ...).

Par la suite , il faudrait que lors du clic, cette page affiche un titre avec le nom de l'animal sur lequel on a cliqué...
le formulaire et la liste disparaissent !
Et la , je ne vois pas comment faire ?

Il faudrait afficher la page avec liste selon une condition: si on a cliqué sur une carte ou non
Si on a cliqué on affiche la carte, sinon, on affiche la liste.

Est-ce la bonne démarche , ou bien y a t-il une façon plus simple de s'y prendre ?
je voudrais d'abord être sûr de la démarche , je verrai le côté technique ensuite.

Merci,
Laurent.

[Ushuango]

Bon , finalement je me suis débrouillé, ça donne ça :

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
import React from "react";
import CardList from "./CardList.jsx"
import FormResearch from "./FormResearch.jsx";
import AnimalCard from "./AnimalCard.jsx";
 
class HelloApp extends React.Component 
{  
    constructor(props) {
        super(props)
        this.state = {
            onlyOne: false,
            animalId: null,
            detail: false
        }
    }
 
    handleOneAnimal = (value, animalId) => {
        this.setState({
            onlyOne: value,
            animalId: animalId
        })
    }
 
    handleDetail = (value) => {
        this.setState({
            detail: value
        })
    }
 
    render() {
        return <div>
                {this.state.onlyOne && <AnimalCard  animalId={this.state.animalId}/>}
                {!this.state.onlyOne && !this.state.detail && <div>
                    <div className="form-group my-5">
                        <FormResearch wantDetail={this.handleDetail}/>
                    </div>
                    <CardList wantOneAnimal={this.handleOneAnimal}/>
                </div>}
                {!this.state.onlyOne && this.state.detail && <div>En détail</div>}
            </div>
 
    }
}
 
export default HelloApp

Avec wantOneAnimal={this.handleOneAnimal} et wantDetail={this.handleDetail} des callbacks.
C'est tout ce que je sait faire pour l'instant, et ça me connvient.
Maintenant , s'il y a mieux et plus classique, je veux bien voir le code !

Laurent.

[-Nikopol-]

Si tu débute autant commencer avec la nouvelle façon de proceder avec React. Utilise plutot les composants fonctionnels plutôt que les classes.

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
31
32
33
34
35
36
37
38
import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import {Switch, Route, BrowserRouter} from "react-router-dom";
 
import '../css/app.css';
 
 
import HomePage from "./pages/HomePage";
import Landing from './pages/Landing';
import AproposPage from './pages/AproposPage';
import FAQPage from "./pages/FAQPage";
import InformationsPage from "./pages/InformationsPage";
 
import {createBrowserHistory} from 'history';
import InformationsPage from "./pages/InformationsPage";
 
AuthAPI.setUp();
const App = () => {
    const [user, setUser] = useState(AuthAPI.getUser());
 
        return(
            <BrowserRouter>
                <NavBar user={user} setUser={setUser} history={history}/>
                <Switch>
                    <Route exact path="/landing" component={Landing} />
                    <Route path="/faq" component={FAQPage} />
                    <Route path="/conditions-generales-de-vente" component={InformationsPage} />
                    <Route path="/mentions-legales" component={InformationsPage}/>
                    <Route path="/" render={props => (<HomePage user={user} setUser={setUser} {...props} />)}/> />
 
                </Switch>
            </BrowserRouter>
        )
    };
 
const rootElement = document.querySelector('#app');
ReactDOM.render(<App/>, rootElement);
export default App;

voici une façon de faire simple pour gérer les routes pour débuter

[Ushuango]

Nouvelle façon, je n'ai rien contre mais ... est-ce que c'est mieux !

D'autre part , lorsqu'on arrive sur lapage de React , les Tutos ne présentent pas cette façon de faire, ça vient bien après !
Je m'y retrouve bien: c'est assez intuitif, lorsque j'écris mon code, ça me paraît simple et je pense plus facilement en composant et classes.

Les Hooks, je n'en suis pas rendu là encore, mais à voir.

Et j'ai expliqué que mon header et le footer sont faits dans le twig de la page ... donc pas à refaire en React.
Dans ma page , je ne fais, pour ainsi dire, que le main en React, le reste est déjà fait.
Et j'utilise api PlateForm de Symfony pour gérer mes tables , sauf une ... la table User.
Les users Sont gérés avec Symfony: le CRUD classique en Symfony.

react-router-dom , c'est indispensable pour ce que je veux faire: une simple page ?
Parce que, pour l'instant je suis sur l'apprentissage de React. Je ne vais pas tout de suite commencer par une autre librairie.

J'avoue franchement que le code que tu me montres ne me parle pas du tout...je n'ai pas l'impression que ça correspond à ce que je veux faire.

Pour l'instant , je vais rester sur quelque chose que je comprends , tant que ce que j'écris est correct.
Merci quand même.

Laurent.

[-Nikopol-]

je suis aussi en symfony pour le backend des mes app et react en front. Je ne vois pas l'interet de mettre le header et le footer dans le twig, c'est plus logique de tout faire en react et d'avoir un composant header et un footer, et d'avoir la séparation complete du back et du front. Après si tu veux rester sur les classes libre à toi, je trouve les composant plus lisible, mais ca ce n'est que mon avis. la syntaxe n'est pas plus compliquée https://www.twilio.com/blog/react-co...ionnels-classe

[Ushuango]

Merci pour le lien, exactement ce qu'il me fallait !

Pour ce qui est du front en React complètement, oui je suis d'accord, ça na aucun sens de ne faire qu'une partie.
Mais ce que je fais est un exercice: j'apprends tout ce que je peux avec cet exercice.
Du coup , j'ai commencé par quelques pages twig classiques avec mes controller Symfony. Puis je me suis dit: " pourquoi pas faire du React" , avec API plateform.
L'idée est de mettre dans cet exercice un maximum de frameworks qui pourrons me servir d'exemples de "comment on fait".
Exemples que j'ai codé moi même: plus facile à se rappeler !

Et bien sûr , il faudra que j'essaye plus tard de tout faire en React, c'est prévu...Et j'imagine que les pages twig doivent être plus légères !