The latest articles on DEV Community by Horatiu Mitrea (@hmitrea). https://dev.to/hmitrea https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F265950%2Fd070d33d-72e9-4dc7-829c-2e086e72511c.jpg https://dev.to/hmitrea en Horatiu Mitrea Thu, 18 Jun 2020 15:40:10 +0000 https://dev.to/hmitrea/visualizing-react-state-flow-and-component-hierarchy-39b https://dev.to/hmitrea/visualizing-react-state-flow-and-component-hierarchy-39b <h4> An extension to display React state flow and component hierarchy </h4> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gBt6IA94--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/6qlhn9dje1jny3is1dr0.gif" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--gBt6IA94--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/6qlhn9dje1jny3is1dr0.gif" alt="State change on Click"></a></p> <p>React applications are built of components which are connected with one another and to see the connection with the simple react dev tools when developing an application could be tedious and difficult.</p> <p>Because of that we decided to build an <strong>open source</strong> <a href="https://addons.mozilla.org/en-US/firefox/addon/realizeforreact/?src=search">Firefox</a> and <a href="https://chrome.google.com/webstore/detail/realize-for-react/llondniabnmnappjekpflmgcikaiilmh?authuser=0&amp;hl=en">Chrome</a> extension to aid in the viewing of the components. </p> <p>Realize for React 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.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--xkgoC54N--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/edp4w41xexykof0lv7zf.gif" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xkgoC54N--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/edp4w41xexykof0lv7zf.gif" alt="State Modification"></a></p> <h1> Functionality includes: </h1> <p><strong>Zoom &amp; Pan</strong> - Hold down shift to enable dragging and zooming on the tree (to recenter just click the center button)</p> <p><strong>Component Focus</strong> - Click on a node to view state, props and children in the right and panel</p> <p><strong>State Flow</strong> - Click the 'state' toggle to show state flow on the tree. Stateful components have blue nodes and state flow is show by blue links</p> <p><strong>Search and Highlight</strong> - Enter a component name in the search bar to see all matching nodes pulsate</p> <p>We are an <a href="https://github.com/oslabs-beta/Realize">open source project</a> where you can contribute and if you have any concerns please message any of us</p> <p><em>The Team that made it all possible:</em><br> <strong><a href="https://github.com/fan-shao">Fan Shao</a> <br> <a href="https://github.com/HpwClifford/">Harry Clifford</a> <br> <a href="https://github.com/blackhaj">Henry Black</a><br> <a href="https://github.com/hmitrea">Horatiu Mitrea</a></strong></p> webdev react opensource