ব্রাউজারে রানটাইম চলাকালীন কেউ কীভাবে প্রতিক্রিয়ার সংস্করণ বলতে পারে?

Question

ব্রাউজারে প্রতিক্রিয়াটির রানটাইম সংস্করণটি জানার কোনও উপায় আছে কি?

Comments

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

— theaccordance

প্রতিক্রিয়া বিকাশকারী সরঞ্জামগুলির সাথে আপনার ক্রোম কনসোলে,__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.values().next()["value"]["version"]

— যশ করণেকে

Answer 1

React.version আপনি যা খুঁজছেন তা

যদিও এটি অজস্রচিতিযুক্ত (যতদূর আমি জানি) তাই এটি কোনও স্থিতিশীল বৈশিষ্ট্য নাও হতে পারে (অর্থাত্ এটি অসম্ভব হলেও এটি অদৃশ্য হয়ে যায় বা ভবিষ্যতে মুক্তি পেতে পারে)।

Reactএকটি স্ক্রিপ্ট হিসাবে আমদানি সঙ্গে উদাহরণ

const REACT_VERSION = React.version;

ReactDOM.render(
  <div>React version: {REACT_VERSION}</div>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Reactএকটি মডিউল হিসাবে আমদানি সঙ্গে উদাহরণ

import React from 'react';

console.log(React.version);

স্পষ্টতই, আপনি যদি Reactমডিউল হিসাবে আমদানি করেন তবে এটি বিশ্বব্যাপী সুযোগে থাকবে না। উপরের কোডটি আপনার বাকী অ্যাপ্লিকেশন, যেমন ওয়েবপ্যাক ব্যবহার করে বান্ডিল করার উদ্দেশ্যে । এটি কোনও ব্রাউজারের কনসোলে ব্যবহৃত হয় না (এটি খালি ইনপুট ব্যবহার করছে) virt

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

Comments

সংস্করণটি পেতে আমি আমার প্রোগ্রামের এন্ট্রি পয়েন্টে কনসোল.লগ (প্রতিক্রিয়া। রূপান্তর) করতে

— পেরেছি

@gotofritz না? আমি মাত্র 16.0.0 প্রতিক্রিয়া দিয়ে পরীক্ষা করেছি এবং এটি এখনও কাজ করে যাচ্ছিল। আপনি কি প্রতিক্রিয়া সংস্করণ ব্যবহার করছেন? আপনি এটি কীভাবে আমদানি করবেন?

— কোয়ান্টিন রায়

অ্যাপ্লিকেশনটি কীভাবে প্যাকেজ করা হয়েছে তার উপর নির্ভর করে। তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন সহ কোনও গ্লোবাল রিঅ্যাক্ট অবজেক্ট নেই।

— gotofritz

না। যদি আপনি মডিউল হিসাবে প্রতিক্রিয়া আমদানি করে থাকেন তবে কোনও প্রতিক্রিয়া বিশ্বব্যাপী নেই। সেক্ষেত্রে আপনাকে প্রথমে মডিউলটি আমদানি করতে হবে এবং মডিউলটির versionসম্পত্তি আনতে হবে ।

— কোয়ান্টিন রায়

এটি এমন সাইটগুলিতে কাজ করে না যেগুলি রিঅ্যাক্টজেএস ব্যবহার করে এবং আপনি সংস্করণটি সন্ধান করার চেষ্টা করছেন। আমি বেশ কয়েকটি সাইটে এটি চেষ্টা করেছি এবং আমি ত্রুটিটি পেতে থাকি: Uncaught ReferenceError: require is not definedএবংUncaught ReferenceError: React is not defined

— পিক্সেল 67

Answer 2

কমান্ড লাইন থেকে:

npm view react version
npm view react-native version

Answer 3

Chrome ডিভাইস সরঞ্জামগুলি সমতুল্য করুন এবং require('React').versionকনসোলে চালান ।

এটি ফেসবুকের মতো ওয়েবসাইটেও কাজ করে যা তারা কী সংস্করণ ব্যবহার করছে তা নির্ধারণ করতে।

Comments

এটি চেষ্টা করে ... আমার অ্যাপ্লিকেশনটি দিয়ে কাজ করে না ... চালিত সংস্করণটি রিট্যাক্ট-ডোম ভি 16 করে।

— ব্যবহারকারীর 101068

ফায়ারফক্সে:ReferenceError: require is not defined

— জন স্নাইডার

এর কারণ আপনি যে সাইটে এটি পরীক্ষা করছেন সেটি প্রয়োজনীয় ব্যবহারগুলি ব্যবহার করে না। @ জনস্কিনিডার

@ উইলহসকিংস: আকর্ষণীয় পর্যবেক্ষণ। এর আশপাশে যাওয়ার কোনও উপায় আছে, না আমরা আটকে আছি?

— হোল্ডঅফহাঙ্গার

@ হোল্ডঅফহাঙ্গার আন-রিট্যাক্ট না করে বিশ্বব্যাপী সুযোগকে "প্রতিক্রিয়া" বৈশ্বিকভাবে দূষিত করে, আমি জানি না।

Answer 4

রিএ্যাক্ট ডিভলটুলগুলি ইনস্টল করার মাধ্যমে আপনি এটি ব্রাউজার কনসোল থেকে চালাতে পারেন:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.forEach(r => console.log(`${r.rendererPackageName}: ${r.version}`))

যা এরকম কিছু তৈরি করে:

react-dom: 16.12.0

Comments

কোনও ওয়েবসাইটে ব্যবহৃত প্রতিক্রিয়া সংস্করণ সন্ধানের জন্য এটিই কেবল কার্যত সমাধান বলে মনে হচ্ছে।

— জারি তুর্কিয়া

Answer 5

এটি নির্দিষ্ট নয় যে কোনও বিশ্বব্যাপী ইসমাস্ক্রিপ্ট ভেরিয়েবলগুলি রফতানি করা হয়েছে এবং এইচটিএমএল / সিএসএস অগত্যা প্রতিক্রিয়া নির্দেশ করে না। সুতরাং .js দেখুন।

পদ্ধতি 1: ECMAScript এ দেখুন:

সংস্করণ নম্বরটি দুটি মডিউল প্রতিক্রিয়া-ডোম এবং প্রতিক্রিয়া দ্বারা রফতানি করা হয় তবে সেই নামগুলি প্রায়শই বান্ডিলিং দ্বারা সরিয়ে ফেলা হয় এবং এক্সিকিউশন কনটেক্সটের ভিতরে লুকানো সংস্করণ যা অ্যাক্সেস করা যায় না। একটি চৌকস ব্রেক পয়েন্টটি সরাসরি মানটি প্রকাশ করতে পারে, বা আপনি ECMAScript সন্ধান করতে পারেন:

1. ওয়েব পৃষ্ঠাটি লোড করুন (আপনি https://www.instagram.com চেষ্টা করতে পারেন তারা মোট কুলাইডার)
2. উত্স ট্যাবে Chrome বিকাশকারী সরঞ্জাম খুলুন (নিয়ন্ত্রণ + শিফট + i বা কমান্ড + শিফট + i)
   1. উত্স ট্যাবে খোলা আছে ডিভাইস
3. উপরের মেনু বারের একেবারে ডানদিকে উল্লম্ব উপবৃত্তাকার ক্লিক করুন এবং সমস্ত ফাইল অনুসন্ধান করুন
4. তিনি মূল বাক্সে বাম প্রকারের আগুনের বাক্সে অনুসন্ধান বাক্সে , চেকবাক্সটিকে উপেক্ষা করুন সাফ করুন, এন্টারটি টাইপ করুন
   1. এক বা একাধিক ম্যাচ নীচে প্রদর্শিত হবে। সংস্করণটির মতো দেখতে অনুসন্ধানের স্ট্রিংয়ের খুব কাছাকাছি একটি রফতানি : "16.0.0"
5. যদি সংস্করণ নম্বরটি তাত্ক্ষণিকভাবে দৃশ্যমান না হয়: একটি লাইন নম্বর দিয়ে শুরু হওয়া একটি লাইনে ডাবল ক্লিক করুন
   1. ECMAScript মাঝের ফলকে প্রদর্শিত হবে
6. যদি সংস্করণ নম্বরটি তাত্ক্ষণিকভাবে দৃশ্যমান না হয়: ECMAScript ফলকের নীচে বাম দিকে দুটি ব্রেসকে ক্লিক করুন }}
   1. ECMAScript পুনরায় ফর্ম্যাট করা হয়েছে এবং পড়তে সহজ
7. যদি সংস্করণ নম্বরটি তাত্ক্ষণিকভাবে দৃশ্যমান না হয়: এটি খুঁজে পেতে কয়েকটি লাইন উপরে এবং নীচে স্ক্রোল করুন বা অন্য কোনও অনুসন্ধান কী চেষ্টা করুন
   1. যদি কোডটি মাইনযুক্ত না করা হয় তবে রি্যাক্ট ভার্সন অনুসন্ধান করুন একই মান সহ 2 টি হিট হওয়া উচিত
   2. যদি কোডটি মিন্ট করা হয় তবে SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED বা প্রতিক্রিয়া-ডোম অনুসন্ধান করুন
   3. অথবা নিজেই সম্ভবত সংস্করণটির স্ট্রিং অনুসন্ধান করুন: "15. বা " 16। বা এমনকি "0.15

পদ্ধতি 2: একটি ডোম ব্রেকপয়েন্ট ব্যবহার করুন:

1. প্রতিক্রিয়া দ্বারা সরবরাহিত পৃষ্ঠাটি লোড করুন
2. একটি প্রতিক্রিয়া উপাদান (ডায়াল করুন, কোনও ইনপুট ক্ষেত্র বা একটি বাক্সের মতো) এবং নির্বাচন করুন Inspect Element
   1. ক্রোম বিকাশকারী সরঞ্জামগুলি Elementsফলকটি প্রদর্শন করে
3. নির্বাচিত উপাদান থেকে যতটা সম্ভব গাছের উপরে যত বেশি উচ্চতর, তবে প্রতিক্রিয়া মূল উপাদানটির চেয়ে বেশি নয় (প্রায়শই আইডি মূলের সাথে দেহের অভ্যন্তরে একটি ডিভ: <div id = "রুট"> ) ডানদিকে ক্লিক করুন এবং নির্বাচন করুনBreak On… - subtree modifications
   1. দ্রষ্টব্য: নেটওয়ার্ক ট্যাবে একই পুনঃসূচীর প্রতিক্রিয়াটির সাথে এলিমেন্ট ট্যাব (DOM বর্তমান অবস্থা) এর সামগ্রীর তুলনা করা সম্ভব। এটি প্রতিক্রিয়াটির মূল উপাদানটি প্রকাশ করতে পারে
4. ঠিকানা বারের বামদিকে পুনরায় লোড ক্লিক করে পৃষ্ঠাটি পুনরায় লোড করুন
   1. ক্রোম বিকাশকারী সরঞ্জাম ব্রেক ব্রেকপয়েন্টে থামে এবং Sourcesফলকটি প্রদর্শন করে
5. ডানদিকের ফলকে, Call Stackসাব-ফলকটি পরীক্ষা করুন
6. কল স্ট্যাক যতদূর সম্ভব নিচে, একটি renderএন্ট্রি হওয়া উচিত , এটিReactDOM.render
7. নীচের লাইনটি ক্লিক করুন render, অর্থাত্‍। কোড যে রেন্ডার আহ্বান
8. মধ্যম ফলকটিতে এখন ধারণকারী একটি অভিব্যক্তি সঙ্গে নাম ECMAScript প্রদর্শন .render হাইলাইট করা
9. রেন্ডার আহ্বান করতে ব্যবহৃত বস্তুর উপর মাউস কার্সারটি হওর করুন is react-domমডিউল রপ্তানির বস্তুর
   1. যদি কোড লাইন চলে যায়: অবজেক্ট (u.reender) (… , তোমার উপরের দিকে ঘোরাও
10. একটি সরঞ্জামদণ্ড উইন্ডো প্রদর্শিত হয় version: "15.6.2", অর্থাত। সমস্ত মান দ্বারা রফতানিreact-dom

সংস্করণটি প্রতিক্রিয়া দেব সরঞ্জামগুলিতেও ইনজেক্ট করা হয়েছে, তবে যতদূর আমি জানি না কোথাও প্রদর্শিত হয় নি।

Answer 6

কনসোলটি খুলুন, তারপরে চালান window.React.version।

এটি 0.12.2 থেকে 16.2.0 এ আপগ্রেড করার সময় সাফারি এবং ক্রোমে আমার পক্ষে কাজ করেছে।

Comments

ক্রোম 73 এ আমার জন্য কাজ করে

— রোডরিক

উইন্ডো.অ্যাক্ট অবধারিত।

— ফ্রান্সিসকো ডি'আঙ্কোনিয়া

Answer 7

Index.js ফাইলে কেবল অ্যাপের উপাদানটিকে "React.version" দিয়ে প্রতিস্থাপন করুন । যেমন

ReactDOM.render(React.version, document.getElementById('root'));

আমি প্রতিক্রিয়া v16.8.1 দিয়ে এটি পরীক্ষা করেছি

Answer 8

ক্রিয়েট-রিএ্যাক্ট-অ্যাপ দিয়ে তৈরি করা একটি অ্যাপের জন্য আমি সংস্করণটি পরিচালনা করতে সক্ষম হয়েছি:

1. Chrome ডিভাইস / ফায়ারফক্স ডেভ সরঞ্জামগুলি খুলুন,
2. মেইনএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্স.জেএস ফাইল সন্ধান করুন এবং খুলুন যেখানে XXXXXXXX বিল্ড হ্যাশ / আলাদা হতে পারে,
3. Alচ্ছিক: ফর্ম্যাট উত্সটি ফর্ম্যাট উত্সটি দেখানোর জন্য {clicking এ ক্লিক করে,
4. রিট্যাক্ট-ডোমের জন্য উত্সের ভিতরে পাঠ্য হিসাবে সন্ধান করুন,
5. ক্রোমে পাওয়া গিয়েছিল: "প্রতিক্রিয়া-ডোম": "^ 16.4.0",
6. ফায়ারফক্সে পাওয়া গেছে: 'রিঅ্যাক্ট-ডোম': '^ 16.4.0'

অ্যাপ্লিকেশনটি উত্স মানচিত্র ছাড়াই মোতায়েন করা হয়েছিল।

Answer 9

একটি বিদ্যমান প্রকল্পে প্রতিক্রিয়া সংস্করণটি দেখার একটি সহজ উপায় হ'ল যে renderকোনও উপাদানগুলির একটি পদ্ধতিতে গিয়ে যুক্ত করা:

<p>{React.version}</p>

এটি ধরে নেয় আপনি এই জাতীয় প্রতিক্রিয়া আমদানি করুন: import React from 'react'

Answer 10

ইনস্টল না থাকলে প্রথমে ডিভ সরঞ্জামগুলি ইনস্টল করুন এবং তারপরে ব্রাউজার কনসোলে কোডের নীচে রান ব্যবহার করুন:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version