reactjs - React uygulamasında bileşenler nasıl doğru şekilde içe aktarılır?

Aşağıdaki kodu buldum. @ neyi temsil ediyor, bu React'te standart mı? Bir bileşeni ithal etmenin daha iyi bir yolu nedir?

a)

import Box from '../../../components/Box '

b)

import Box from '@components/Box '

Cevap #1

Eğer Typescript kullanıyorsanız (etiket bunun kullanıldığını öneriyor) tsconfig.json dosyanızda "yol eşlemesi" ayarlamak mümkün.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@": ["./src"],
      "@/*": ["./src/*"],
      "@components": ["./src/components"]
    }
  }
}

referans: https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

Yani, tsconfig.json'daki tüm yolları güncellemek zor olduğu için ilk seçeneği kullanmayı öneririm.

Cevap #2

@components, components klasörü için bir takma addır.

Örnekteki a'ya baktığınızda, o ifadeyi kullandığınız yere bağlı olarak components klasörüne ulaşabilmek için bir sürü klasörün altına inmeniz gerektiğini görüyorsunuz, değil mi? İşte ikincil seçenek bunu çok daha basit hâle getiriyor; components klasöründen ithal edilen her şeyi @components olarak kabul ediyor, böylece artık bulunduğunuz yer ile bir klasörün nerede olduğunu karşılaştırmak konusunda endişelenmenize gerek kalmıyor.

Eğer bunu yapmayı seçtiyseniz, genellikle webpack ile daha fazla yapılandırma gerektirir. İşte nasıl ve nedenini anlatan bulduğum bir blog yazısı.

Ayrıca, orijinal soruyu yanıtlamak gerekirse, ikisi de doğrudur. a sadece bunu yapmanın daha geleneksel ve varsayılan yoludur, ve b bazı ekstra kurulum gerektirebilecek bir alternatiftir, ancak ithalatlarınızı daha düzenli ve anlaşılması daha kolay tutacaktır.