反応JSで回転木馬アプリをつくる方法

カルーセルアプリ作成create-react-appを使用してカルーセルアプリを作成して起動します.あなたがこれをすることに関する知識がないならば、あなたはCreate react app link hereで彼らのドキュメンテーションを訪問することができます.彼らには詳細な説明があります.
最後には、我々のアプリとは、モジュールが含まれてフォルダを持つ必要があります.すべてのコードは、アプリケーションに書き込まれます.srcフォルダにあるjsファイル

アプリを編集します.以下のコードのように見えるJSファイル

    import React from "react"

    export default function Carousel() {
        return (
            <div>This is our carousel container</div>
        )
    }

アプリに我々のイメージを追加
Webpackにはいくつかのビルドの問題があります.この問題の周りで最も簡単で最も簡単な作業は、パブリックフォルダ(私たちのindex . htmlが見つかりました)で我々のイメージを保存することです、これはウェブ・パックにビルドプロセスの間、我々のイメージを含めさせます.

我々は、すべてのカルーセルイメージを保持するためにパブリックフォルダの中にイメージフォルダを作成します.よく、あなたはどんな問題も引き起こさないパブリックディレクトリに直接彼らを置くことに決めることができました、しかし、特定のコンベンションに従うために、あなたはイメージフォルダに彼らを入れました.

export default function Carousel() {
    const gallery = ['/images/bark-cake-bg.jpg','/images/birthday-cake.jpg','/imageschocolate.jpg/','/images/cupcakes3.jpg']
    const currentImg = gallery[0]
        return (
            <div>
                <img src={currentImg} alt="slide" />
            </div>
        )
}

    import React, {useState, useEffect} from "react"

    export default function Carousel() {
        const [count, setCount] = useState(0)
        const gallery = ['/images/bark-cake-bg.jpg','/images/birthday-cake.jpg','/imageschocolate.jpg/','/images/cupcakes3.jpg']
        const currentImg = count
        return (
            <div>
                <img src={currentImg} alt="slide" />
            </div>
        )
}

    const callback = () => {
        //Can read new state and props
        setCount(count + 1)
        //when count is already greater than our array size go back to the first index.
        if (previousCount > gallery.length - 2)
        setCount(0)
    }

    function useInterval(callback) {
        useEffect(() =>
            {
                let timer = setInterval(callback, 1000)
                return () => clearInterval(timer)
            }
        )
    }

    useInterval(callback)

    function useInterval(callback) {
        //create my reference object
        const savedCallback = useRef()

        useEffect(() => {
            //after every render save the newest callback our reference object
            savedCallback.current = callback
        })

    function useInterval(callback) {
        //create my reference object
        const savedCallback = useRef()

        useEffect(() => {
            //after every render save the newest callback our reference object
            savedCallback.current = callback
        })

        function tick() {
            //call the latest timer 
            savedCallback.current();
        }

        let timer = setInterval(tick)
        return () => clearInterval(timer)
    }

    const [isRunning, setIsRunning] = useState(true)

    function useInterval(callback, delay) {
        //create my reference object
        const savedCallback = useRef()

        useEffect(() => {
        //after every render save the newest callback our reference object
        savedCallback.current = callback
        })

        useEffect(() => {
            function tick() {
                //call the latest timer 
                savedCallback.current();
            }

            /*Using delay instead of isRunning because useEffect won't trigger a re-render when a boolean changes
            Whereas delay here is a parameter which isn't a boolean, and changes depending on isRunning state. 
            */
            if (delay !== null) {
                let timer = setInterval(tick, delay)
                return () => clearInterval(timer)
            }
        }, [delay])
    }

    useInterval(callback, isRunning ? 5000 : null)