Realize for Reactคืออะไร?

Realize for React เป็นส่วนขยายของ Chrome ที่พัฒนาโดย Realize for React และคุณลักษณะหลักของมันคือ "A React component tree visualizer"

ภาพหน้าจอของส่วนขยาย

ดาวน์โหลดไฟล์ CRX ของส่วนขยาย Realize for React

ดาวน์โหลดไฟล์ส่วนขยาย Realize for React ในรูปแบบ crx และติดตั้งส่วนขยาย Chrome ด้วยตนเองในเบราว์เซอร์หรือแชร์ไฟล์ crx กับเพื่อนๆ เพื่อติดตั้งส่วนขยาย Chrome อย่างง่ายดาย

คำแนะนำในการใช้ส่วนขยาย

As React applications scale, it becomes more difficult to track state and to have a holistic overview of the component hierarchy. Realize is a tool to help developers visualize the structure and state flow of their React applications, especially when they are growing in scale and complexity. It currently supports React v.16.8.

Prerequisites
1. You must have React Dev Tools installed to use Realize for React. Install it from the Chrome store
2. Realize is best used on non-deployed applications. This uglification of deployed websites makes the component structure pretty unreadable.

How to use
1. Click the blue 'Add to Chrome' button
2. Once installed, navigate to your React website
3. Open the dev tools window and click on the Realize panel
4. Trigger a state change to populate the component tree

Functionality:
- Utilize the search bar to search for any component that exists in the tree.
- Clicking a node component will display information about state, children, props, and hooks in the right hand panel.
- You can zoom and pan the tree by holding shift and dragging/scrolling
- Click the 'State' button to view the flow of state through the component tree

ข้อมูลพื้นฐานของส่วนขยาย

ชื่อ	Realize for React
ID	llondniabnmnappjekpflmgcikaiilmh
URL อย่างเป็นทางการ	https://chromewebstore.google.com/detail/realize-for-react/llondniabnmnappjekpflmgcikaiilmh
คำอธิบาย	A React component tree visualizer
ขนาดไฟล์	160 KB
จำนวนการติดตั้ง	5,086
เวอร์ชันปัจจุบัน	1.0.0.0
อัปเดตครั้งล่าสุด	2020-06-20
วันที่เผยแพร่	2020-06-20
คะแนน	1.88/5 รวมทั้งหมด 8 คะแนน
ผู้พัฒนา	Realize for React
อีเมล	[email protected]
ประเภทการชำระเงิน	free
เว็บไซต์ส่วนขยาย	http://www.realizeforreact.com
URL หน้าช่วยเหลือ	http://www.realizeforreact.com
ภาษาที่รองรับ	en-US
manifest.json
{ "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx", "manifest_version": 2, "name": "Realize for React", "version": "1.0.0.0", "description": "A React component tree visualizer", "icons": { "16": "16.png", "32": "32.png", "48": "48.png", "128": "128.png" }, "permissions": [ "activeTab", "" ], "background": { "scripts": [ "background.js" ] }, "web_accessible_resources": [ "hook.js" ], "devtools_page": "devtools-root.html" }