একটি বহু-পৃষ্ঠার অ্যাপে প্রতিক্রিয়া ব্যবহার করে Using

Question

আমি প্রতিক্রিয়া নিয়ে ঘুরে বেড়াচ্ছি এবং এখনও অবধি আমার এটি পছন্দ হয়েছে। আমি নোডজেএস দিয়ে একটি অ্যাপ তৈরি করছি এবং অ্যাপ্লিকেশন জুড়ে কিছু ইন্টারেক্টিভ উপাদানগুলির জন্য প্রতিক্রিয়া ব্যবহার করতে চাই। আমি এটিকে একক পৃষ্ঠার অ্যাপ তৈরি করতে চাই না।

ওয়েবে আমি এখনও এমন কিছু পাই নি যা নীচের প্রশ্নের উত্তর দেয়:

আমি কীভাবে একটি বহু-পৃষ্ঠার অ্যাপ্লিকেশনটিতে আমার প্রতিক্রিয়া উপাদানগুলি ব্রেক আপ বা বান্ডিল করব?

বর্তমানে আমার সমস্ত উপাদানগুলি একটি ফাইলে রয়েছে যদিও আমি এ্যাপের কিছু অংশে সেগুলি লোড নাও করতে পারি।

এখন পর্যন্ত আমি কনটেইনারটি আইডি অনুসন্ধান করে উপাদানগুলি রেন্ডার করার জন্য শর্তাধীন বিবৃতি ব্যবহার করার চেষ্টা করছি যেখানে প্রতিক্রিয়া রেন্ডার হবে। প্রতিক্রিয়াটির সাথে সর্বোত্তম অনুশীলনগুলি কী তা সম্পর্কে আমি 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

প্রয়োজনীয়js প্লাগইন ব্যবহার করার চেষ্টা করুন।

— amit_183

যদি আপনি কিছু মনে করেন না যে রিঅ্যাক্টজেগুলি একটি খুব বড় জেএস লাইব্রেরি যা প্রতিটি পৃষ্ঠার জন্য সূচনা করা দরকার (যেমন আপনি বলেছিলেন যে আপনি একটি পৃষ্ঠার অ্যাপ তৈরি করছেন না) তবে আমি নিশ্চিত নই যে এটি আপনার পক্ষে গুরুত্বপূর্ণ সমস্ত উপাদান এক ফাইলে একত্রিত করেছেন। এটি ক্লায়েন্টের উপর ক্যাশে করা হবে। যখন কোনও পৃষ্ঠা লোড হয়, তখন এটি renderকোনও scriptব্লকের সঠিক উপাদান থাকে ।

— ওয়্যার্ডপ্রেই

আমার একই সমস্যা রয়েছে: আমার কাছে একটি অ্যাপ রয়েছে যা বিভিন্ন পৃষ্ঠায় অন্যান্য বড় লাইব্রেরিগুলি লোড করে এবং আমি কেবলমাত্র চারটি বড় লাইব্রেরির চেয়ে কেবল দর্শকের প্রয়োজনের উপর নির্ভর করে + একটি লাইব্রেরি লোড করব।

— এজেফারাকাস

Answer 1

বর্তমানে, আমি অনুরূপ কিছু করছি।

অ্যাপ্লিকেশনটি কোনও সম্পূর্ণ প্রতিক্রিয়া অ্যাপ নয়, আমি কমেন্টবক্সের মতো গতিশীল স্টাফের জন্য প্রতিক্রিয়া ব্যবহার করছি, যা স্বয়ংক্রিয় is এবং বিশেষ প্যারামের সাথে যে কোনও পয়েন্টে অন্তর্ভুক্ত করা যেতে পারে ..

যাইহোক, আমার সমস্ত সাব অ্যাপ্লিকেশনগুলি লোড করা এবং একটি একক ফাইলে অন্তর্ভুক্ত করা হয়েছে all.js, সুতরাং এটি ব্রাউজারের মাধ্যমে পৃষ্ঠাগুলিতে ক্যাশে করা যায়।

যখন আমাকে এসএসআর টেম্পলেটগুলিতে একটি অ্যাপ অন্তর্ভুক্ত করা দরকার তখন আমাকে কেবল "__react-root" শ্রেণি এবং একটি বিশেষ আইডি সহ একটি ডিআইভি অন্তর্ভুক্ত করতে হবে (রেকর্ড করা অ্যাপ্লিকেশনটির নাম)

যুক্তিটি সত্যই সহজ:

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>

সম্পাদন করা

যেহেতু ওয়েবপ্যাকটি পুরোপুরি কোড-বিভক্তকরণ এবং লাজিলোডিংকে সমর্থন করে, তাই আমি ভেবেছিলাম যে এমন একটি উদাহরণ অন্তর্ভুক্ত করা বুদ্ধিমানের কারণ যেখানে আপনার সমস্ত অ্যাপ্লিকেশনগুলিকে একটি বান্ডেলে লোড করার দরকার নেই, তবে সেগুলি বিভক্ত করুন এবং চাহিদা অনুযায়ী লোড করুন।

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

দুর্দান্ত দেখাচ্ছে, এনপিএম তৈরি-প্রতিক্রিয়া-অ্যাপ ব্যবহার করার সময় কেউ কি এই দৌড়াদৌড়ি পেয়েছে? আমি মনে করি না এটি আমার পক্ষে কাজ করবে ... আমি এখনই এটি 1 টি অ্যাপ দিয়ে চলছি এবং এটি কীভাবে কাজ করতে পারে তা দেখতে পাই তবে আমার বিল্ডটি এমন উত্পাদন বিল্ড তৈরি করবে না যা সঠিকভাবে কাজ করে।

— স্প্রোজ

@ প্রোসপোসেও ক্রিয়েট-রিএ্যাক্ট-অ্যাপের সাথে কাজ করা উচিত, আমি কি কিছু মিস করছি? সম্ভবত আপনি

— গিথুব এ

@ প্রসেস দেরী উত্তরটির জন্য সরি, তবে আমি মনে করি আপনি সম্পূর্ণ ভিন্নরকম কিছু চেষ্টা করছেন, এই পদ্ধতির সমাধানের চেষ্টা কী। আইএমও create react appআপনাকে তৈরি করতে কিছু সহজ সরঞ্জাম দেয় bundle.js। সুতরাং, আমার উত্তরের উদ্দেশ্য bundle.jsহ'ল একইটি ব্যবহার করা এবং এটি বহুভুজ এসএসআর সাইট জুড়ে ব্যবহার করা এবং একক পৃষ্ঠায় অনেকগুলি ভিন্ন প্রতিক্রিয়া অ্যাপ্লিকেশন লোড করা। দুঃখিত, যদি আমার উত্তরটি আপনার প্রয়োজনের সাথে খাপ খায় না, একটি নতুন পোস্ট তৈরি করতে নির্দ্বিধায় এবং আপনি যা করার চেষ্টা করছেন তা বর্ণনা করতে আমি আপনাকে সাহায্য করার চেষ্টা করব।

— ওয়েবদেব

@ সাসেরারঅপ্রেন্টিস ক্রা ওয়েবপ্যাক ব্যবহার করে, আপনাকে বের করতে হবে এবং তারপরে

— বেসিকগুলি

: @SorcererApprentice মূলত কেউ এই পৃষ্ঠাতে webpack কনফিগ পোস্ট 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'
  },
}

তারপরে আপনি আপনার এসসিআর ফোল্ডারে তাদের নিজ নিজ জেএস ফাইলগুলির সাথে তিনটি পৃথক এইচটিএমএল ফাইল রাখতে পারেন (উদাহরণস্বরূপ পৃষ্ঠা 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

আমি স্থল থেকে একটি অ্যাপ্লিকেশন তৈরি করছি এবং আমি যেতে যেতে শিখছি, তবে আমি মনে করি আপনি যা খুঁজছেন তা প্রতিক্রিয়া-রাউটার । প্রতিক্রিয়া-রাউটার নির্দিষ্ট উপাদানগুলিতে আপনার উপাদানগুলিকে মানচিত্র করে। উদাহরণ স্বরূপ:

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)

অনুসন্ধানের ক্ষেত্রে, 'টার্ম' অ্যানিমাল সার্চবক্সে সম্পত্তি হিসাবে অ্যাক্সেসযোগ্য:

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

চেষ্টা কর. এই টিউটোরিয়ালটি হ'ল এটি যা আমাকে এবং অন্যান্য সম্পর্কিত বিষয়গুলি সম্পর্কে আমার বোঝার শর্তে আমাকে শীর্ষে রাখে।

---

আসল উত্তর অনুসরণ:

আমি এখানে একই উত্তর খুঁজছেন আমার পথ খুঁজে। এই পোস্টটি আপনাকে অনুপ্রেরণা দেয় কিনা দেখুন । আপনার অ্যাপ্লিকেশনটি যদি আমার মতো কিছু হয় তবে এর মধ্যে এমন অঞ্চলগুলি থাকবে যা খুব সামান্য পরিবর্তিত হয় এবং কেবলমাত্র প্রধান শরীরে পরিবর্তিত হয়। আপনি এমন একটি উইজেট তৈরি করতে পারেন যার আবেদনের অবস্থার উপর ভিত্তি করে একটি আলাদা উইজেট সরবরাহ করা তার দায়িত্ব। একটি ফ্লাক্স আর্কিটেকচার ব্যবহার করে, আপনি কোনও নেভিগেশন ক্রিয়া প্রেরণ করতে পারেন যা আপনার বডি উইজেটটিকে রাষ্ট্র পরিবর্তন করে, কেবলমাত্র পৃষ্ঠার বডিকে কার্যকরভাবে আপডেট করে।

আমি এখন চেষ্টা করছি এই পদ্ধতির।

Comments

যদি ইউআরএল পাথটি আমার ব্যাকএন্ড কোড দ্বারা তৈরি করা হয় (তবে এই ক্ষেত্রে নোডেজগুলি)? Routerকাজটি কি একক পৃষ্ঠার অ্যাপে একইভাবে কাজ করবে?

— হোসে ক্যারিলো

@ স্কট আমি যদি বিশেষ উইজেটগুলির সাথে প্রশাসক পৃষ্ঠার কার্যকারিতাটি প্রকাশ করতে না চাই তবে কী হবে? প্রতিক্রিয়া ব্যবহার করে প্রকৃত প্রমাণীকরণ ছাড়াই চেহারা এবং অনুভূতি পুনরায় তৈরি করা সম্ভব।

— কৈরত কেম্পিরবায়েভ

Answer 4

আপনি কি সিএমএস ব্যবহার করছেন? তারা url পরিবর্তন করতে পছন্দ করে যা আপনার অ্যাপ্লিকেশনটি ভেঙে দিতে পারে।

আর একটি উপায় হ'ল রিয়েট হ্যাবিট্যাট জাতীয় ব্যবহার করা ।

এটির সাহায্যে আপনি উপাদানগুলি নিবন্ধভুক্ত করতে পারেন এবং তারা স্বয়ংক্রিয়ভাবে ডোমের সংস্পর্শে আসবে।

উদাহরণ

উপাদান (গুলি) নিবন্ধন করুন:

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, এরে এর, আপনি ints, ভাসে ইত্যাদি অন্যান্য ধরনের পাশ করার জন্য

Answer 5

আমি জানি এই প্রশ্নটি জিজ্ঞাসা করার পরে অনেক দিন হয়েছে তবে আশা করি এটি কারও সহায়ক হবে।

@ কোকোমিকো উল্লিখিত হিসাবে আপনি ওয়েবপ্যাক.কনফিগ.জেএস ফাইলটিতে অ্যাপ্লিকেশনটির জন্য বেশ কয়েকটি প্রবেশ পয়েন্ট সরবরাহ করতে পারেন। যদি আপনি একটি সাধারণ ওয়েবপ্যাক সেটআপ (একাধিক এন্ট্রি পয়েন্টগুলির ধারণার ভিত্তিতে) সন্ধান করছেন যা আপনাকে স্থিতিশীল পৃষ্ঠাগুলিতে প্রতিক্রিয়া উপাদান যুক্ত করতে দেয় যা আপনি এটি ব্যবহার করে বিবেচনা করতে পারেন: https://github.com/przemek-nowicki/m মাল্টি- পৃষ্ঠা -app-সঙ্গে-প্রতিক্রিয়া

Answer 6

আমি আপনাকে জড়তা জেএস এ একবার দেখার পরামর্শ দিই: https://inertiajs.com/

জড়তা দিয়ে আপনি অ্যাপ্লিকেশনগুলি ঠিক তেমনই তৈরি করেন যেমন আপনি সর্বদা পছন্দমতো নিজের সার্ভার-সাইড ওয়েব ফ্রেমওয়ার্কটি দিয়েছিলেন। রাউটিং, কন্ট্রোলার, মিডলওয়্যার, প্রমাণীকরণ, অনুমোদন, ডেটা আনার জন্য এবং আরও অনেক কিছুর জন্য আপনি আপনার কাঠামোর বিদ্যমান কার্যকারিতা ব্যবহার করেন।

আপনার ভিউ লেয়ারটি কেবল আলাদা আলাদা। সার্ভার-সাইড রেন্ডারিং (উদাহরণস্বরূপ ব্লেড বা ইআরবি টেম্পলেট) ব্যবহার করার পরিবর্তে দর্শনগুলি জাভাস্ক্রিপ্ট পৃষ্ঠার উপাদান। এটি আপনাকে প্রতিক্রিয়া, ভ্যু বা স্বেল্ট ব্যবহার করে আপনার পুরো ফ্রন্ট-এন্ড তৈরি করতে দেয়।