React’te Etkili Bulabileceğiniz 6 Uygulama – JSManifest

React'te Etkili Bulabileceğiniz 6 Uygulama – JSManifest

Facebook mühendisleri tarafından oluşturulan bir kitaplık olan React, karmaşık kullanıcı arayüzleri oluşturmayı mümkün kılar. Eğer benim gibiyseniz, pratikte bildirimsel doğası nedeniyle reaksiyon ile geliştirirken asla sıkılmazsınız.

Zamanla kendinizi geliştirirken izlemek çok daha eğlenceli hale gelir, çünkü siz geliştikçe bileşenleriniz de gelişir (kodsal). Ve sonra kendin hakkında iyi hissediyorsun – bu benim sevdiğim duygu.

Bu yazıda, React’te Etkili Olabileceğini Bulabileceğiniz 6 Uygulamadan geçeceğiz.

1. Özyinelemeli Kenar Çubuğu

Kenar çubuğu, kullanıcıların uygulamada gezinmelerine yardımcı olduğu için bir web sayfasının en önemli bölümlerinden biridir. Ayrıca üçüncü taraf bağlı kuruluşların reklamlarını, son makalelerinizi vb. görüntülemek gibi diğer önemli amaçlar için de yaygın olarak kullanılır.

Neyse ki, tepki olarak sağlam bir kenar çubuğu geliştirmenin birçok iyi yolu var.

Bu örnek kullanarak bir yaklaşım kullanır özyinelemeve şaşırtıcı bir şekilde, uygulanması için yalnızca 35 satır kod kullanıyor.

İşte nasıl:

import React from 'react'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import Button from '@material-ui/core/Button'

function SidebarItem({ children, ...rest }) {
  return (
    <ListItem
      component={Button}
      style={{ textTransform: 'none' }}
      variant="outlined"
      color="primary"
      {...rest}
    >
      {children}
    </ListItem>
  )
}

function Sidebar({ items, defaultDepth = 0, step = 6, ...props }) {
  const nextDepth = defaultDepth + step
  return (
    <List
      style={{ marginLeft: defaultDepth === 0 ? 0 : nextDepth }}
      disablePadding
      dense
    >
      {items.map((item) => (
        <React.Fragment key={item.title}>
          <div style={{ marginBottom: 4 }}>
            <SidebarItem {...item}>{item.title}</SidebarItem>
          </div>
          {item.items && (
            <Sidebar items={item.items} defaultDepth={nextDepth} step={step} />
          )}
        </React.Fragment>
      ))}
    </List>
  )
}

Ve burada kusursuz çalışıyor:

Bu yaklaşım, ihtiyaç duyduğu tek bağımlılık olduğundan dinamik ve akıcı kenar çubukları oluşturmanıza olanak tanır. props.items iç öğelerinin konumlandırılması zaten Sidebar. Dizideki herhangi bir öğe değişirse, kenar çubuğu buna göre güncellenir. sadece ne zaman props.items gerekliyse, CSS’nin nasıl uygulanacağına karar vermek size kalmış.

Bunun anlamı, bu kenar çubuğu bileşenini birden çok sayfa için yeniden kullanabilmenizdir ve bileşen dinamik olduğundan, her sayfa, öğe olarak ne ilettiğinize bağlı olarak tamamen farklı veriler içeren bir kenar çubuğunu kolayca gösterebilir.

Pratikte özyineleme, daha önce açıklandığı gibi, birçok yerde başka yerlerde faydalı olabilir!

İç içe menü içeren bir açılır menü gibi:

import React from 'react'
import Button from '@material-ui/core/Button'
import Menu from '@material-ui/core/Menu'
import MenuItem from '@material-ui/core/MenuItem'
import './styles.css'

const items = [
  { to: '/home', label: 'Home' },
  { to: '/blog', label: 'Blog' },
  { to: '/about', label: 'About' },
  { to: '/contact', label: 'Contact' },
  {
    to: '/help-center',
    label: 'Help Center',
    items: [
      { to: '/privacy-policy', label: 'Privacy Policy' },
      { to: '/tos', label: 'Terms of Service' },
      { to: '/partners', label: 'Partners' },
      {
        to: '/faq',
        label: 'FAQ',
        items: [
          { to: '/faq/newsletter', label: 'Newsletter FAQs' },
          { to: '/faq/career', label: 'Employment/Career FAQs' },
        ],
      },
    ],
  },
]

const MyMenu = React.forwardRef(
  ({ items, anchorEl: anchorElProp, createOnClick, onClose }, ref) => {
    const [anchorEl, setAnchorEl] = React.useState(null)

    return (
      <Menu
        ref={ref}
        open={Boolean(anchorElProp)}
        onClose={onClose}
        anchorEl={anchorElProp}
        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
      >
        {items.map((item) => (
          <div key={item.to}>
            <MenuItem onMouseEnter={item.items && createOnClick(setAnchorEl)}>
              {item.label}
            </MenuItem>
            {item.items && (
              <MyMenu
                key={item.to}
                items={item.items}
                anchorEl={anchorEl}
                createOnClick={createOnClick}
                onClose={() => setAnchorEl(null)}
              />
            )}
          </div>
        ))}
      </Menu>
    )
  },
)

function App() {
  const [anchorEl, setAnchorEl] = React.useState(null)
  const createOnClick = (callback) => {
    return (e) => {
      e.persist()
      return callback(e.currentTarget)
    }
  }
  return (
    <div>
      <Button onMouseEnter={createOnClick(setAnchorEl)} variant="outlined">
        View More
      </Button>
      <MyMenu
        items={items}
        anchorEl={anchorEl}
        createOnClick={createOnClick}
        onClose={() => setAnchorEl(null)}
      />
    </div>
  )
}

iç içe menüler özyineleme ile açılır menü tepki

2. Birden Fazla Sağlayıcıyı Birleştirme

Birden çok sağlayıcıya sarılması gereken gerçekten büyük bir tepki bileşenine (hatta bir uygulamaya) sahip olmanız gerekiyorsa, bunu normal şekilde yapabilirsiniz:

import { Provider } from 'react-redux'
import { ThemeProvider } from '@material-ui/core/styles/ThemeProvider'
import AppProvider from './components/AppProvider'
import NavbarProvider from './components/NavbarProvider'
import SidebarProvider from './components/SidebarProvider'
import FooterProvider from './components/FooterProvider'
import BlogsProvider from './components/BlogsProvider'
import SentryProvider from './components/SentryProvider'
import BlogsProvider from './components/BlogsProvider'
import store from '../app/store'
import theme from '../app/theme'
import Homepage from './Homepage'

const AllProviders = ({ children }) => (
  <Provider store={store}>
    <ThemeProvider theme={theme}>
      <SentryProvider>
        <AppProvider>
          <NavbarProvider>
            <SidebarProvider>
              <FooterProvider>
                <BlogsProvider>{children}</BlogsProvider>
              </FooterProvider>
            </SidebarProvider>
          </NavbarProvider>
        </AppProvider>
      </SentryProvider>
    </ThemeProvider>
  </Provider>
)

function App() {
  return (
    <AllProviders>
      <Homepage />
    </AllProviders>
  )
}

export default App

Bu %100 iyidir, ancak bunları bir arada oluşturmak için yalnızca normal JavaScript kavramlarını kullanabileceğinizi unutmayın:

function combineProviders(...providers) {
  return ({ children }) =>
    providers.reduce(
      (prev, CurrentProvider) => <CurrentProvider>{prev}</CurrentProvider>,
      children,
    )
}

Kod satırlarını kaydedersiniz ve daha az şişkin görünür:

const CombinedProviders = combineProviders(
  SentryProvider,
  NavbarProvider,
  SidebarProvider,
  FooterProvider,
  BlogsProvider,
)

function App() {
  return (
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <CombinedProviders>
          <Homepage />
        </CombinedProviders>
      </ThemeProvider>
    </Provider>
  )
}

export default App

3. HTML Etiket Adına Sahip Bileşenleri Dize Olarak Bildirme

Henüz bilmiyorsanız, bir HTML öğesi etiketini temsil eden basit dizelerle normal bir tepki DOM bileşeni oluşturabilirsiniz. Daha doğrusu, bir HTML DOM öğesinin etiket adını temsil eden bir dize.

Örneğin, dizeyi atayarak tepki bileşenleri oluşturabilirsiniz. 'div' şöyle bir değişkene:

import React from 'react'

const MyComponent = 'div'

function App() {
  return (
    <div>
      <h1>Good Morning and Welcome to my Palace!</h1>
      <hr />
      <MyComponent>
        <h3>I am inside a {'<div />'} element</h3>
      </MyComponent>
    </div>
  )
}

React sadece arayacak React.createElement ve öğeyi dahili olarak oluşturmak için bu dizeyi kullanın. Güzel değil mi?

Gibi bileşen kitaplıklarında yaygın olarak kullanılır Malzeme-UIbeyan edebilirsiniz component arayanın bileşenin kök düğümünün değeri olacağına karar verebileceği prop props.component şöyle:

function MyComponent({ component: Component = 'div', name, gender, email }) {
  return (
    <Component>
      <h1>Hi {name}</h1>
      <div>
        <h6>You are a {gender}</h6>
        <small>Your email is {email}</small>
      </div>
    </Component>
  )
}

Bunu şu şekilde kullanabilirsiniz:

function App() {
  return (
    <div>
      <MyComponent component="div" name="Ralph" gender="male" email="myemailthatineverread@gmail.com">
    </div>
  )
}

Kök düğüm olarak kullanılacağı özel bileşeninizi de iletebilirsiniz:

function Dashboard({ children }) {
  return (
    <div style={{ padding: '25px 12px' }}>
      {children}
    </div>
  )
}

function App() {
  return (
    <div>
      <MyComponent component={Dashboard} name="Ralph" gender="male" email="myemailthatineverread@gmail.com">
    </div>
  )
}

Yararlı olmasının nedeni, bir tepki bileşenini yeniden kullanılabilir hale getirmek istediğinizde ve son derece özelleştirilebiliryapmak istiyorsun barebone mümkün olduğunca. Varsayılan olarak bir div geliştirici için en barebone formuna koyarsınız, aksi takdirde onu bazı uygulama ayrıntılarına sahip başka bir bileşene varsayılan olarak ayarlamanız gerekir (bilgisayarınızın kullanıcısı muhtemelen ihtiyaç duymayacaktır çünkü kendi ).

4. Bileşenleri İhracat Yoluyla Eşleştirme

Bazen bir girdi alan ve ondan belirli bir bileşen döndüren bir anahtar durumunuz olduğunda, bunları her seferinde anahtar durumlarına girmek oldukça gereksiz hale gelebilir.

Bugün tepki olarak böyle bir şey görmemiz nadir değildir:

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { Modal } from 'components/common'
import LogoutPrompt from './modalComponents/LogoutPrompt'
import CreateFrenchFries from './modalComponents/CreateFrenchFries'
import CreateMashedPotatoes from './modalComponents/CreateMashedPotatoes'
import DeleteFrenchFries from './modalComponents/DeleteFrenchFries'
import DeleteMashedPotatoes from './modalComponents/DeleteMashedPotatoes'
import EditMashedPotatoes from './modalComponents/EditMashedPotatoes'
import UpdatePassword from './modalComponents/UpdatePassword'
import SigninSignup from './modalComponents/SigninSignup'
import * as c from '../constants'

function AppModal() {
  const modal = useSelector(selectModal)
  const dispatchRedux = useDispatch()
  const isLoggedIn = true

  function closeModal() {
    if (isLoggedIn) {
      dispatchRedux(toggle({ opened: false, context: '' }))
    }
  }

  let Component: React.ElementType<any>

  switch (modal.context) {
    case c.LOGOUT_PROMPT:
      Component = LogoutPrompt
      break
    case c.CREATE_FRENCH_FRIES:
      Component = CreateFrenchFries
      break
    case c.CREATE_MASHED_POTATOES:
      Component = CreateMashedPotatoes
      break
    case c.DELETE_FRENCH_FRIES:
      Component = DeleteFrenchFries
      break
    case c.DELETE_MASHED_POTATOES:
      Component = DeleteMashedPotatoes
      break
    case c.EDIT_MASHED_POTATOES:
      Component = EditMashedPotatoes
      break
    case c.UPDATE_PASSWORD:
      Component = UpdatePassword
      break
    default:
      break
  }
}


let Component: React.ElementType<any> = modalComponents[modal.context]

if (!Component) {
  if (!isLoggedIn) {
    Component = SigninSignup
  } else {
    Component = 'div'
  }
}

return (
  <Modal opened={modal.opened || !isLoggedIn} onClose={closeModal}>
    <>
      <Component {...modal} closeModal={closeModal} />
    </>
  </Modal>
)

Bileşene geçirilen sahne öğelerinin her seferinde aynı şekle sahip olacağından eminseniz, bunları bu şekilde yazmak muhtemelen gereksizdir. Yedeklemeyi, bunları bir dosyadan dışa aktarma olarak bildirerek ortadan kaldırabilirsiniz; bu, geçiş durumlarını veya if/else koşullarını kullanmaktan kaçınmanıza yardımcı olur:


export { default as LOGOUT_PROMPT } from './LogoutPrompt'
export { default as CREATE_FRENCH_FRIES } from './CreateFrenchFries'
export { default as CREATE_MASHED_POTATOES } from './CreateMashedPotatoes'
export { default as DELETE_FRENCH_FRIES } from './DeleteFrenchFries'
export { default as DELETE_MASHED_POTATOES } from './DeleteMashedPotatoes'
export { default as EDIT_MASHED_POTATOES } from './EditMashedPotatoes'
export { default as UPDATE_PASSWORD } from './UpdatePassword'

Bu ayarlandıktan sonra, onları içe aktarın ve kodun aynı şekilde çalışmasını sağlarken kolayca kullanın:

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { Modal } from 'components/common'
import SigninSignup from './modalComponents/SigninSignup'
import { toggle } from './appModalSlice'
import { selectModal } from './selectors'
import * as modalComponents from './modalComponents'

function AppModal() {
  const modal = useSelector(selectModal)
  const dispatchRedux = useDispatch()
  const isLoggedIn = true

  function closeModal() {
    if (isLoggedIn) {
      dispatchRedux(toggle({ opened: false, context: '' }))
    }
  }

  let Component: React.ElementType<any> = modalComponents[modal.context]

  if (!Component) {
    if (!isLoggedIn) {
      Component = SigninSignup
    } else {
      Component = 'div'
    }
  }

  return (
    <Modal opened={modal.opened || !isLoggedIn} onClose={closeModal}>
      <>
        <Component {...modal} closeModal={closeModal} />
      </>
    </Modal>
  )
}

export default AppModal

5. Bileşenlerin Başka Yerlerde Kontrol Edilmesine İzin Verin

Yatay bir sekme listesi gibi ortak bileşenler geliştirdiğinizde, bileşenin, kullanıcı tıkladığında yalnızca kontrol altında tutmak için belirli bir öğeyi vurgulaması oldukça yararlıdır. Yaygın ancak kullanışlı bir yöntem, seçilen bir öğeye ayırt edici bir renk eklemektir.

Bu bileşen için uygulama ayrıntılarını geliştirirken, bu işlevi bileşene koymaya karar vermiş olabilirsiniz. Ancak, bu bileşenin gelecekte başka bir bileşenle el ele gidebileceği yerde faydalı olabileceğini düşünüyorsanız, bileşeninizin kullanıcısı isterse, kontrolü ebeveynine geçirmesine izin vermek iyi bir fikir olabilir.

Örneğin, aşağıdaki kod, kullanıcı onu seçtiğinde bir öğenin mor renkli olduğu basit bir gezinme çubuğunu temsil eder:

import React from 'react'
import './styles.css'

function Navbar({
  items,
  selectedItem: selectedItemProp,
  onSelect: onSelectProp = () => {},
}) {
  const { current: isControlled } = React.useRef(selectedItemProp !== undefined)
  const [selectedItem, setSelectedItem] = React.useState(
    isControlled ? selectedItemProp : '/home',
  )

  function onClick(value) {
    return (e) => {
      if (isControlled) {
        onSelectProp(value, e)
      } else {
        setSelectedItem(value)
      }
    }
  }

  const selectedItemResult = isControlled ? selectedItemProp : selectedItem

  return (
    <ul>
      {items.map((item) => (
        <li
          key={item.to}
          onClick={onClick(item.to)}
          style={{
            listStyle: 'none',
            display: 'inline-block',
            marginRight: 15,
            color: selectedItemResult === item.to ? 'purple' : undefined,
          }}
        >
          {item.label}
        </li>
      ))}
    </ul>
  )
}

function App() {
  const [selectedItem, setSelectedItem] = React.useState('/home')

  const items = [
    { to: '/home', label: 'Home' },
    { to: '/blog', label: 'Blog' },
    { to: '/about', label: 'About' },
    { to: '/contact', label: 'Contact' },
  ]
  return (
    <div>
      <Navbar
        items={items}
        selectedItem={selectedItem}
        onSelect={setSelectedItem}
      />
    </div>
  )
}

export default App

kontrollü veya kontrollü navbar tepki bileşeni

Bu, iki temel nedenden dolayı yararlıdır:

  1. Artık yeniden kullanılabilme özelliğine sahiptir.
  2. Kontrolü başka bir yerden geçirebildikleri için artık modül oluşturmak için diğer bileşenlerle oluşturulabilir.

Pratikte, bu kavram o kadar güçlüdür ki, oradaki birçok tepki kitaplığında kullanılmaktadır, örneğin vites küçültmek.

Kenar çubuğu snippet’imize geri dönersek ve genişletme/daraltma işlevine sahip iç içe öğeleri uygularsak ve başka bir yerde kontrol edilmesini destekliyorsa, çok daha güçlü hale gelir çünkü artık diğer bileşenlerin iç içe geçmiş öğeleri genişletmesine/daraltmasına izin verebilirsiniz ve bunun tersi de geçerlidir. İmkanlar sonsuzdur!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.