React dobre praktyki

Question

Witam, 

mam pytanie odnośnie dobrych praktyk w react.js, mam taki component

import React from 'react';
import ReactDOM from 'react-dom';
import ReactSwipe from 'react-swipe';
import { motion } from 'framer-motion';
import { Link, Element } from "react-scroll";


const Carousel = () => {

    let reactSwipeEl;
    const slides = [
        {
            number: 'one',
            textUp: 'Instalacje elektryczne',
            textDown: 'Układamy nowe instalacje na podstawie projektu wykonawczego lub na podstawie własnej wiedzy i doświadczenia.'
        },
        {
            number: 'two',
            textUp: 'Fotowoltaika',
            textDown: 'Układamy nowe instalacje na podstawie projektu wykonawczego lub na podstawie własnej wiedzy i doświadczenia.'
        },
        {
            number: 'three',
            textUp: 'Awarie elektryczne',
            textDown: 'Układamy nowe instalacje na podstawie projektu wykonawczego lub na podstawie własnej wiedzy i doświadczenia.'
        },
        {
            number: 'four',
            textUp: 'Serwis i naprawa',
            textDown: 'Instalacje elektryczne są bardzo trwałe i bezpieczne, ale ich użytkowanie wymaga ostrożności oraz okresowej konserwacji.'
        },
        {
            number: 'five',
            textUp: 'Pomiary elektryczne',
            textDown: 'Pomiary i badania okresowe powinny być wykonywane nie rzadziej niż co 5 lat lub co rok przy szkodliwym wpływie czynników zewnętrznych.'
        }
    ]

    const items = slides.map(item => {
        return (
            <div className={`carousel-item carousel-item-${item.number}`}>
                <div onClick={() => reactSwipeEl.prev()} className='arrow-wrapper'><i class="fas fa-angle-left"></i></div>
                < div className='item-wrapper' >
                    <motion.div animate={{ y: 120, opacity: 1 }} transition={{ ease: "easeOut", duration: 1 }} className='item item-up'>{item.textUp}</motion.div>
                    <motion.div animate={{ y: -200, opacity: 1 }} transition={{ ease: "easeOut", duration: 1 }} className='item item-down'>{item.textDown}</motion.div>
                    <motion.div animate={{ y: 105, opacity: 1 }} transition={{ ease: "easeOut", duration: 1 }} class="item-buttons">
                        <div class="button-left">Oferta</div>
                        <div class="button-right">Wycena</div>
                    </motion.div>
                </div >
                <div onClick={() => reactSwipeEl.next()} className='arrow-wrapper'><i class="fas fa-angle-right"></i></div>
            </div >
        )


    })

    return (
        <div className='carousel-container'>
            <ReactSwipe
                className="carousel"
                swipeOptions={{ disableScroll: true, continuous: true, auto: 3000, }}
                ref={el => (reactSwipeEl = el)}
            >
                {items}
            </ReactSwipe>
        </div >
    );
};
export default Carousel

w tym komponencie definiuję zmienną items która zawiera wszystkie elementy carousel  a następnie te elementy poprzez items są renderowane. Czy to jest zgodne z dobrymi praktykami czy powinienem wyrzucić to do nowego komponentu? Proszę o pomoc

 

Answer 1

Możesz skorzystać z patternu kompozycji. Zawartość callbacka (linie 41 - 52) przerzuć do osobnego komponentu Slide i zrób mapowanie bezpośrednio w linii 65.

Comments

dzieki bardzo

Answer 2

Ja nie wiem jak się powinno to robić na 100%, ale wrzuciłbym to do osobnego pliku. Dzięki temu kod lepiej by wyglądał i zyskał na czytelności. W niektórych tutorialach na youtubie różnego typu dane są dawane do osobnych plików.