प्रतिक्रिया में आयात नरक को कैसे संभालना है?

Question

मैं नोड के माध्यम से अपना प्रतिक्रिया ऐप चला रहा हूं। क्या इस आयात नरक को आसानी से संभालने का कोई तरीका है?

मैं

./node_modules/.bin/babel-node --presets react,es2015 server/server.js 

चल रहा हूँ NPM शुरुआत के रूप में। और server.js एक साधारण एक्सप्रेस सर्वर में कार्य करता है कि एक ReactDOMServer.renderToString(<MyApp />)

मेरी प्रतिक्रिया के कुछ घटकों में कुछ इस तरह है:

import GenericTemplate from "../../templates/GenericTemplate/GenericTemplate"; 
import Footer from "../../organisms/Footer/Footer"; 
import Header from "../../organisms/Header/Header"; 
import Hero from "../../organisms/Hero/Hero"; 
import MainMenu from "../../organisms/MainMenu/MainMenu"; 
import TodoList from "../../organisms/TodoList/TodoList"; 

इस संभावना है त्रुटि के लिए, एक changement निर्देशिका नाम की तरह मैन्युअल रूप से प्रवेश करने में परिणाम होगा इसे अद्यतन करने के लिए हर फ़ाइल।

क्या आपको पता है कि मैं इसे कैसे ठीक कर सकता हूं। आदर्श रूप में मेरे पास ऐसा कुछ होगा:

import { Footer, Header, Hero, MainMenu, TodoList } from "myComponents" 

क्या यह संभव है? कैसे?

धन्यवाद!

Answer 1

आप इसे प्राप्त करने के लिए अपने organisms निर्देशिका में एक सामान्य घटक फ़ाइल बना सकते हैं।

export Footer from "./Footer/Footer"; 
export Header from "./Header/Header"; 
export Hero from "./Hero/Hero"; 
export MainMenu from "./MainMenu/MainMenu"; 
export TodoList from "./TodoList/TodoList"; 

फिर अपने अन्य फ़ाइल में

:: बस एक नया common.js या जो भी नाम निम्नलिखित के साथ बनाने के

import { Footer, Header, Hero, MainMenu, TodoList } from "path to common.js" 

Answer 2

यह भी मेरे लिए बहुत बेहतर नहीं लगती है:

import { Footer, Header, Hero, MainMenu, TodoList } from "myComponents" 

... क्योंकि ऐसा करने के लिए, जब भी आप कोई नया घटक बनाते हैं, तो आपको "myComponents" को निर्यात/आयात करने की आवश्यकता होती है।

आपके उदाहरण में जो मुख्य मुद्दा मैं देखता हूं वह यह है कि आयात के लिए सापेक्ष पथों का उपयोग करके आपके कोड आधार को बनाए रखना बहुत मुश्किल हो जाता है।

रिएक्ट में "आयात नरक" से बचने के लिए, एक लोकप्रिय विकल्प सापेक्ष पथ के बिना आयात विवरण बनाना है।

अपनी वेबपैक कॉन्फ़िगरेशन में मामूली बदलाव के साथ, आप इसे ऐप रूट से संबंधित फ़ाइलों को लोड करने के लिए प्राप्त कर सकते हैं। here देखें और here और पढ़ें।