Discussion :

[Ushuango]

Bonjour,

je débute sur ReactJs et je voudrait faire un truc tout simple ( que je peut faire en javascript ) mais
pas évident sur reactJs pour un débutant.

Code reactjs :

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
 
class Movie extends React.Component {
    render() {
        const {title, year, synopsis, director, posterUrl, casting} = this.props;
        return (
            <div className = "movie-item">
                <h2>{title}</h2>
                <div class="content">
                    <p>{year}</p>
                    <p>{synopsis}</p>
                    <p>{director}</p>
                    <ul>    
                        {posterUrl.map(p =>
                            <Poster 
                                urls={p}
                            />
                            )
                        } 
                    </ul> 
                    <ul>
                        {casting.map( c => 
                            <Casting actor={c} />
                        )}
                    </ul>
                </div>
            </div>
        )
    }
}

un composant classique et pour le composant Casting:

Code ReactJs :

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

1
2
3
4
5
6
7
8
9
10
 
class Casting extends React.Component {
    render() {
        return (
            <li> {this.props.actor} /&nbsp; </li>
        )
    }
}
 
export default Casting;

qui m'affichera tous les acteurs d'un film.
J'ai au début les imports qui vont bien et tout fonctionne !

Mais les / qui séparent les acteurs des films: je voudrais que pour le dernier acteur de la liste, il n'y ait pas de / à la fin

Il faudrait déjà que je sache comment faire un rendu conditionnel avec ReactJS et où.

Si je pouvais avoir quelques pistes de reflexion et des liens.

Merci,

Laurent.

[-Nikopol-]

Bonsoir,
Si tu débute je te conseille d'oublier react avec des classes (à moins qu'il n'y ait une raison). C'est la vielle méthode, on utilise maintenant les composants fonctionnels (tu peux aussi chercher react hooks dans google).
Ce qui donnerai un fichier Movie.js (ou movie.jsx) ressemblant à ca.

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
39
40
41
42
import React, {useEffect, useState} from 'react';
import axios from 'axios';
 
const Movie = (props) => {
    const [movie, setMovie] = useState([]);
    useEffect(() => {
            axios.get('/path_to_movie_data/')
                .then(response => response.data)
                .then(response => {
                    setMovie(response)
                })
                .catch(error => console.log(error));
        }, []
    );
    return (<>
        {movie &&
            <div>
                <h2>{movie.title}</h2>
                <div className="content">
                    <p>{movie.year}</p>
                    <p>{movie.synopsis}</p>
                    <p>{movie.director}</p>
                    <ul>
                        {movie.posterUrl.map(p =>
                            <img
                                key={p.id}
                                alt={""}
                                src={p.url}
                            />
                        )}
                    </ul>
                    <ul>
                        {movie.casting.map(c =>
                            <li key={c.id}>c.actor</li>
                        )}
                    </ul>
                </div>
            </div>}
        </>
    )
};
export default Movie;

l'appel à axios n'est peut etre pas utile si tes données sont chargées depuis le composant parent. Dnas ce cas tu les retrouveras dans les props.
Je ne trouve pas utiles des créer des composant et donc des fichiers pour juste un <li> comme tu le fais pour actors. Tu peux très bien mapper avec le li à l'interieur

l'affichage conditionnel, tu en as un dans mon exemple : {movie && <div>... la deuxième partie du teste avec le html est tjs vraie et donc cela s'affichera que si la variable movie est definie.
pour ton affichage du '/', tu peux aussi utiliser un index avec la fonction map : movie.casting.map( (c,i) => ... et faire un test sur le meme principe que précédement : { i===0 && <div>... }