मल्टी-पेज ऐप में रिएक्ट का उपयोग करना

Question

मैं रिएक्ट के साथ खेल रहा हूं और अब तक मैं वास्तव में इसे पसंद करता हूं। मैं NodeJS के साथ एक ऐप बना रहा हूं और आवेदन के दौरान कुछ इंटरेक्टिव घटकों के लिए रिएक्ट का उपयोग करना चाहूंगा। मैं इसे सिंगल पेज ऐप नहीं बनाना चाहता।

मुझे अभी तक वेब पर कुछ भी नहीं मिला है जो निम्नलिखित प्रश्नों का उत्तर देता है:

मैं एक बहु-पृष्ठ एप्लिकेशन में अपने रिएक्ट घटकों को कैसे तोड़ या बंडल कर सकता हूं?

वर्तमान में मेरे सभी घटक एक फ़ाइल में हैं, भले ही मैं उन्हें ऐप के कुछ खंडों में लोड नहीं कर सकता।

अब तक मैं कंटेनर की आईडी खोजकर घटकों को रेंडर करने के लिए सशर्त बयानों का उपयोग करने की कोशिश कर रहा हूं जहां रिएक्ट प्रस्तुत करेगा। मैं 100% सुनिश्चित नहीं हूं कि रिएक्ट के साथ सबसे अच्छे अभ्यास क्या हैं। यह कुछ इस तरह दिखता है।

if(document.getElementById('a-compenent-in-page-1')) {
    React.render(
        <AnimalBox url="/api/birds" />,
        document.getElementById('a-compenent-in-page-1')
    );
}

if(document.getElementById('a-compenent-in-page-2')) {
    React.render(
        <AnimalBox url="/api/cats" />,
        document.getElementById('a-compenent-in-page-2')
    );
}

if(document.getElementById('a-compenent-in-page-3')) {
    React.render(
        <AnimalSearchBox url="/api/search/:term" />,
        document.getElementById('a-compenent-in-page-3')
    );
}

मैं अभी भी दस्तावेज़ीकरण पढ़ रहा हूं और मुझे बहु पृष्ठ ऐप के लिए अभी तक जो भी चाहिए वह नहीं मिला है।

अग्रिम में धन्यवाद।

Comments

आवश्यकताjj प्लगइन का उपयोग करने का प्रयास करें।

— amit_183

यदि आपको इस बात पर कोई आपत्ति नहीं है कि ReactJs एक बहुत बड़ी JS लाइब्रेरी है जिसे प्रत्येक पृष्ठ के लिए आरंभीकृत करने की आवश्यकता होगी (जैसा कि आपने कहा कि आप एक भी पेज ऐप नहीं बना रहे हैं), तो मुझे यकीन नहीं है कि यह आपके लिए मायने रखता है ' ve ने सभी घटकों को एक फ़ाइल में संयोजित किया है। इसे क्लाइंट पर कैश किया जाएगा। जब कोई पृष्ठ लोड होता है, तो उसके पास renderएक scriptब्लॉक में सही घटक होता है ।

— वायर्डपाइरी

मेरे पास एक ही मुद्दा है: मेरे पास एक ऐप है जो विभिन्न पृष्ठों पर अन्य बड़े पुस्तकालयों को लोड करता है, और मैं सिर्फ आगंतुक की जरूरतों के आधार पर, केवल मामले में चार बड़े पुस्तकालयों के आधार पर प्रतिक्रिया + एक पुस्तकालय को लोड करता हूं।

— AJFarkas

Answer 1

वर्तमान में, मैं कुछ ऐसा ही कर रहा हूं।

एप्लिकेशन एक पूर्ण प्रतिक्रिया ऐप नहीं है, मैं डायनामिक स्टफ के लिए रिएक्टबॉक्स की तरह रिएक्ट का उपयोग कर रहा हूं, जो कि ऑटार्क है। और किसी भी बिंदु पर विशेष पैरामेट्स के साथ शामिल किया जा सकता है।

हालाँकि, मेरे सभी उप ऐप्स लोड हो गए हैं और एक ही फाइल में शामिल हैं all.js, इसलिए इसे ब्राउज़र द्वारा पृष्ठों पर कैश्ड किया जा सकता है।

जब मुझे SSR टेम्प्लेट्स में एक ऐप को शामिल करने की आवश्यकता होती है, तो मुझे बस "__react-root" वर्ग और एक विशेष आईडी के साथ एक DIV को शामिल करना होगा (रेंडर किए जाने वाले रिएक्ट ऐप का नाम)

तर्क वास्तव में सरल है:

import CommentBox from './apps/CommentBox';
import OtherApp from './apps/OtherApp';

const APPS = {
  CommentBox,
  OtherApp
};

function renderAppInElement(el) {
  var App = APPS[el.id];
  if (!App) return;

  // get props from elements data attribute, like the post_id
  const props = Object.assign({}, el.dataset);

  ReactDOM.render(<App {...props} />, el);
}

document
  .querySelectorAll('.__react-root')
  .forEach(renderAppInElement)

---

<div>Some Article</div>
<div id="CommentBox" data-post_id="10" class="__react-root"></div>

<script src="/all.js"></script>

संपादित करें

चूंकि webpack पूरी तरह से कोड-बंटवारे और LazyLoading का समर्थन करता है, मैंने सोचा कि इसका एक उदाहरण शामिल करने के लिए समझ में आता है जहां आपको अपने सभी ऐप को एक बंडल में लोड करने की आवश्यकता नहीं है, लेकिन उन्हें विभाजित करें और मांग पर लोड करें।

import React from 'react';
import ReactDOM from 'react-dom';

const apps = {
  'One': () => import('./One'),
  'Two': () => import('./Two'),
}

const renderAppInElement = (el) => {
  if (apps[el.id])  {
    apps[el.id]().then((App) => {
      ReactDOM.render(<App {...el.dataset} />, el);
    });
  }
}

Comments

बहुत अच्छा लग रहा है, क्या किसी ने npm क्रिएट-रिएक्शन-ऐप का इस्तेमाल करते हुए इसे चलाया है? मुझे नहीं लगता कि यह मेरे लिए काम करेगा ... मेरे पास यह अभी 1 ऐप के साथ चल रहा है और यह देख सकता है कि यह कैसे काम कर सकता है, लेकिन मेरा निर्माण सही ढंग से काम करने वाले उत्पादन का निर्माण नहीं करेगा।

— Sprose

@Sprose को create-react-app के साथ भी काम करना चाहिए, क्या मुझे कुछ याद आ रहा है? शायद आप गितुब पर एक छोटा सा उदाहरण साझा कर सकते हैं जहां यह नहीं होता है, मुझे एक कारण नहीं दिखता है कि यह क्यों नहीं होना चाहिए

— webdeb

@ देर से जवाब देने के लिए साइन अप करें, लेकिन मुझे लगता है कि आप कुछ पूरी तरह से अलग करने की कोशिश कर रहे हैं, यह दृष्टिकोण क्या हल करने की कोशिश करता है। IMO create react appआपको कुछ आसान टूल बनाने की सुविधा देता है bundle.js। इसलिए, मेरे उत्तर का उद्देश्य समान bundle.jsउपयोग करना है और इसका उपयोग करना है मल्लाह एसएसआर साइटों पर, और एक ही पृष्ठ में कई अलग-अलग रिएक्ट एप्लिकेशन लोड करें। क्षमा करें, यदि मेरा उत्तर आपकी आवश्यकताओं के अनुरूप नहीं है, तो एक नई पोस्ट बनाने के लिए स्वतंत्र महसूस करें और वर्णन करें कि आप क्या करने की कोशिश कर रहे हैं, मैं आपकी मदद करने की कोशिश करूंगा।

— वेबडेब

@SorcererApprentice क्रेक वेबपैक का उपयोग करता है, आपको बेदखल करना होगा और फिर मूल बातें webpack.js.org/guides/getting-started/#creating-a-bundle

— webdeb

@SorcererApprentice मूल रूप से किसी ने इस पेज पर वेबपैक कॉन्फिगर पोस्ट किया: stackoverflow.com/a/41857199/5004923

— webdeb

Answer 2

आप webpack.config.js फ़ाइल में आवेदन के लिए कई प्रवेश बिंदु प्रदान कर सकते हैं:

var config = {
  entry: {
    home: path.resolve(__dirname, './src/main'),
    page1: path.resolve(__dirname, './src/page1'),
    page2: path.resolve(__dirname, './src/page2'),
    vendors: ['react']
  },
 output: {
    path: path.join(__dirname, 'js'),
    filename: '[name].bundle.js',
    chunkFilename: '[id].chunk.js'
  },
}

तब आप अपने src फोल्डर में तीन अलग-अलग HTML फाइलें अपने संबंधित js फाइलों के साथ रख सकते हैं (उदाहरण पेज 1 के लिए)।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page 1</title>
</head>
<body>
  <div id="app"></div>
  <script src="./vendors.js"></script>
  <script src="./page1.bundle.js"></script>
</body>
</html>

जावास्क्रिप्ट फ़ाइल:

import React from 'react'
import ReactDom from 'react-dom'
import App from './components/App'
import ComponentA from './components/ReactComponentA'
ReactDom.render(<div>
                  <App title='page1' />
                  <ReactComponentA/>
                 </div>, document.getElementById('app'))

अलग-अलग प्रतिक्रिया घटकों को फिर हर एक पृष्ठ के लिए लोड किया जा सकता है।

Comments

मैं वेबबेक्स पेज में नीचे के बारे में पढ़ता हूं। webpack version < 4 it was common to add vendors as separate entrypoint to compile it as separate file (in combination with the CommonsChunkPlugin). This is discouraged in webpack 4. Instead the optimization.splitChunks option takes care of separating vendors and app modules and creating a separate file. Do not create a entry for vendors or other stuff which is not the starting point of execution.तो, क्या इस नमूने को वेबपैक 4+ के लिए अद्यतन किया जाना चाहिए?

— रमेश

Answer 3

मैं जमीन से एक आवेदन तैयार कर रहा हूं और सीख रहा हूं कि मैं जा रहा हूं, लेकिन मुझे लगता है कि आप जिस चीज की तलाश कर रहे हैं वह रिएक्ट-राउटर है । रिएक्ट-राउटर आपके घटकों को विशिष्ट URL में मैप करता है। उदाहरण के लिए:

render((
    <Router>
        <Route path="/" component={App}>
            <Route path="api/animals" component={Animals}>
               <Route path="birds" component={Birds}/>
               <Route path="cats" component={Cats}/>
            </Route>
        </Route>
        <Route path="api/search:term" component={AnimalSearchBox}>
    </Router>
), document.body)

खोज मामले में, AnimalSearchBox में एक संपत्ति के रूप में 'शब्द' सुलभ है:

componentDidMount() {
    // from the path `/api/search/:term`
    const term = this.props.params.term
}

कोशिश करके देखो। यह ट्यूटोरियल वह है जिसने मुझे इस और अन्य संबंधित विषयों की मेरी समझ के मामले में शीर्ष पर रखा है।

---

मूल उत्तर इस प्रकार है:

मुझे यहाँ अपना रास्ता मिल गया और उसी उत्तर की तलाश थी। देखें कि क्या यह पोस्ट आपको प्रेरित करती है। यदि आपका आवेदन मेरा जैसा कुछ भी है, तो इसमें ऐसे क्षेत्र होंगे जो बहुत कम बदलते हैं और केवल मुख्य शरीर में भिन्न होते हैं। आप एक विजेट बना सकते हैं जिसकी जिम्मेदारी आवेदन की स्थिति के आधार पर एक अलग विजेट को प्रस्तुत करना है। एक फ्लक्स आर्किटेक्चर का उपयोग करके, आप एक नेविगेशन एक्शन भेज सकते हैं जो आपके शरीर के विजेट स्विच को राज्य को बदल देता है, प्रभावी रूप से केवल पेज की बॉडी को अपडेट करता है।

अब मैं प्रयास कर रहा हूं।

Comments

क्या होगा यदि URL पथ मेरे बैकएंड कोड (इस मामले में नोडज) द्वारा बनाया गया है? क्या Routerयह उसी तरह काम करेगा जैसे वह किसी एक पेज एप में करता है?

— जोस कैरिलो

@ यदि मैं विशेष विजेट वाले व्यवस्थापक पृष्ठ कार्यक्षमता को उजागर नहीं करना चाहता तो क्या होगा? प्रतिक्रिया का उपयोग करना वास्तविक प्रमाणीकरण के बिना देखो और महसूस को फिर से बनाना संभव है।

— कैरट केमपीरबाव

Answer 4

क्या आप सीएमएस का उपयोग कर रहे हैं? वे बदलते यूआरएल को पसंद करते हैं जो आपके आवेदन को तोड़ सकता है।

एक और तरीका रिएक्ट हैबिटेट जैसी किसी चीज का इस्तेमाल कर रहा है ।

इसके साथ, आप घटकों को पंजीकृत कर सकते हैं और वे स्वचालित रूप से डोम के संपर्क में आ सकते हैं।

उदाहरण

रजिस्टर घटक (ओं):

container.register('AnimalBox', AnimalBox);
container.register('AnimalSearchBox', AnimalSearchBox);

फिर वे इस तरह आपके डोम में उपलब्ध हैं:

<div data-component="AnimalBox"></div>

<div data-component="AnimalSearchBox"></div>

उपरोक्त को स्वचालित रूप से आपकी प्रतिक्रिया घटकों के साथ बदल दिया जाएगा।

फिर आप स्वचालित रूप से अपने घटकों में भी गुण (या प्रॉप्स) पास कर सकते हैं:

<div data-component="AnimalBox" data-prop-size="small"></div>

यह sizeआपके घटक के लिए एक प्रस्ताव के रूप में सामने आएगा । अन्य प्रकारों जैसे कि json, array's, ints, floats आदि को पास करने के लिए अतिरिक्त विकल्प हैं ।

Answer 5

मुझे पता है कि इस सवाल को पूछे जाने में कुछ समय हो गया है, लेकिन उम्मीद है कि इससे किसी को मदद मिलेगी।

जैसा कि @Cocomico ने बताया है कि आप webpack.config.js फ़ाइल में आवेदन के लिए कई प्रवेश बिंदु प्रदान कर सकते हैं। यदि आप एक साधारण वेबपैक सेटअप (कई प्रवेश बिंदुओं के विचार के आधार पर) की तलाश कर रहे हैं जो आपको स्थैतिक पृष्ठों पर प्रतिक्रियात्मक घटकों को जोड़ने की अनुमति देता है तो आप इसका उपयोग करने पर विचार कर सकते हैं: https://github.com/przemek-nowicki/multi-page -app-साथ प्रतिक्रिया

Answer 6

मेरा सुझाव है कि आप InertiaJS: https://inertiajs.com/ पर एक नज़र डालें

जड़ता के साथ आप अपनी पसंद के सर्वर-साइड वेब ढांचे के साथ हमेशा की तरह ही ऐप बनाते हैं। आप रूटिंग, कंट्रोलर, मिडलवेयर, ऑथेंटिकेशन, ऑथराइजेशन, डेटा लाने, और बहुत कुछ के लिए अपने ढांचे की मौजूदा कार्यक्षमता का उपयोग करते हैं।

केवल एक चीज जो अलग है वह है आपकी दृश्य परत। सर्वर-साइड रेंडरिंग (उदाहरण ब्लेड या ईआरबी टेम्प्लेट) का उपयोग करने के बजाय, दृश्य जावास्क्रिप्ट पेज घटक हैं। यह आपको प्रतिक्रिया, Vue या Svelte का उपयोग करके आपके पूरे फ्रंट-एंड का निर्माण करने की अनुमति देता है।