Realize for React란 무엇입니까?

Realize for React은(는) Realize for React에 의해 개발된 Chrome 확장 프로그램으로, 주요 기능은 "A React component tree visualizer"입니다.

확장 프로그램 스크린샷

Realize for React 확장 프로그램 CRX 파일 다운로드

크롬 확장 프로그램을 crx 형식으로 다운로드하여 브라우저에 수동으로 설치하거나 crx 파일을 친구들과 공유하여 쉽게 크롬 확장 프로그램을 설치하세요.

확장 프로그램 사용 설명서

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" }