11528 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Affichage du contenu

Bonjour, depuis peu je m'intéresse à react. Dans mon code j'ai créé un slideshow d'image en regardant un tuto. Le problème c'est que je n'arrive pas à importer le contenu dans mon fichier d'affichage index.php. 
import React from 'react';
import { Slide } from 'react-slideshow-image'
import img1 from './img/nature.png'
import img2 from './img/goupil.png'
import img3 from './img/globule.png'
import img4 from './img/car-n-co.png'

const proprietes = {
    duration: 5000,
    transitionDuration: 500,
    infinite: true,
    indicators: true,
    arrows: true, 

}

const Slideshow = () => {
    return (
        <div className="containerSlide">
            <Slide {...proprietes} >
                <div className="each-slide">
                    <div>
                        <img src={img1} alt="FQ"/>
                    </div>
                </div>
                <div className="each-slide">
                    <div>
                        <img src={img2} alt="Goupil"/>
                    </div>
                </div>
                <div className="each-slide">
                    <div>
                        <img src={img3} alt="Globule"/>
                    </div>
                </div>
                <div className="each-slide">
                    <div>
                        <img src={img4} alt="Co-voiturage"/>
                    </div>
                </div>
            </Slide>
        </div>
    )
}
export default Slideshow;


import React from 'react';
import Slideshow from './Slide';

function App() {
    return ( 
        <div className="App">
            <Slideshow/>
        </div>
    );
}
export default App;




<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Site de présentation">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen">
    <script src="script.js" type="text/javascript"></script>
    <script src="App.js" type="text/javascript"></script>
    <title>foooo</title>
</head>
<body onload="App()">
    <div id="wrap">
<main>

    <div id="slide">

    </div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</main>



</div>
</body>
</html>


Merci d'avance
Sujet clos
Aller à