{"id":26267578,"url":"https://github.com/oslabs-beta/reactree","last_synced_at":"2025-03-22T01:05:09.372Z","repository":{"id":79107996,"uuid":"594206072","full_name":"oslabs-beta/ReacTree","owner":"oslabs-beta","description":"ReacTree - VS Code extension that generates a hierarchy tree of React components with each node listing the passed down props, indicating whether it's connected the Redux store, and guiding you to the associated file with the click of a button","archived":false,"fork":false,"pushed_at":"2024-09-18T05:27:57.000Z","size":92848,"stargazers_count":155,"open_issues_count":24,"forks_count":34,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-14T04:17:19.620Z","etag":null,"topics":["developer-tool","hierarchy-structure","react","redux","vscode-extension"],"latest_commit_sha":null,"homepage":"https://reactree.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oslabs-beta.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"open-source-labs","custom":["https://donorbox.org/donations-to-oslabs-inc"]}},"created_at":"2023-01-27T21:10:47.000Z","updated_at":"2025-02-08T18:18:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"913b0455-e20a-4340-95c8-b8b5c29c1f7c","html_url":"https://github.com/oslabs-beta/ReacTree","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FReacTree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FReacTree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FReacTree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FReacTree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oslabs-beta","download_url":"https://codeload.github.com/oslabs-beta/ReacTree/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244890092,"owners_count":20527033,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["developer-tool","hierarchy-structure","react","redux","vscode-extension"],"created_at":"2025-03-14T04:17:22.470Z","updated_at":"2025-03-22T01:05:09.352Z","avatar_url":"https://github.com/oslabs-beta.png","language":"TypeScript","funding_links":["https://github.com/sponsors/open-source-labs","https://donorbox.org/donations-to-oslabs-inc"],"categories":[],"sub_categories":[],"readme":"\u003c!-- REACTREE README --\u003e\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/oslabs-beta/ReacTree\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/oslabs-beta/ReacTree/dev/src/media/icon.png\" alt=\"Logo\" height=\"250\"\u003e\n  \u003c/a\u003e\n  \u003ch1 align=\"center\"\u003e\u003cb\u003eReacTree\u003c/b\u003e\u003c/h1\u003e\n\u003c/p\u003e\n\n  \u003ch2 align=\"center\"\u003e\n    A VS Code extension with a dynamic and interactive hierarchy visualizer for React applications.\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n  \u003c/h2\u003e\n\n\u003c!-- BADGES --\u003e\n\u003cdiv align=\"center\"\u003e      \n  \u003c!-- VSCode Installs --\u003e\n    \u003cb\u003e\u003cu\u003e\u003cspan\u003e\u003ca href=\"https://marketplace.visualstudio.com/items?itemName=ReacTreeDev.reactree\"\u003e\n    Install ReacTree\u003c/a\u003e\n    \u003c/span\u003e\u003c/u\u003e\u003c/b\u003e\n    \u003cp\u003e\u003cimg src=\"https://img.shields.io/visual-studio-marketplace/v/reactreedev.reactree\"\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003chr\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails open=\"open\"\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\u003ca href=\"#overview\"\u003eOverview\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#functionality\"\u003eFunctionality\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#tech-stack\"\u003eTech Stack\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#articles\"\u003eArticles\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#meet-our-team\"\u003eMeet our Team\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\u003chr\u003e\n\u003cbr/\u003e\n\n## \u003cb\u003eOverview\u003c/b\u003e\n\n\u003cp align=\"left\"\u003e\n  ReacTree is a VS Code extension which visualizes the component hierarchy within a React application, enabling developers to quickly identify the relationships between components. The extension generates a hierarchy tree of React components, displaying the parent-child relationships and how data is passed between components.\n\u003c/p\u003e\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg  src=\"https://raw.githubusercontent.com/oslabs-beta/ReacTree/fabian/readme/src/media/navbar-controls.gif\" width=90% \u003e\n\u003c/p\u003e\n\n## \u003cb\u003eInstallation\u003c/b\u003e\n\nThe ReacTree extension can be easily installed via the \u003ca href='https://marketplace.visualstudio.com/items?itemName=ReacTreeDev.reactree'\u003eVS Code Marketplace\u003c/a\u003e. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or by using the View: Extensions command (Ctrl+Shift+X). Type ‘reactree’ in the search box and select the Install button. VS Code will download and install the extension from the Marketplace.\n\u003cbr/\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cbr/\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/oslabs-beta/ReacTree/dev/src/media/Install_ReacTree.png\" width=90% /\u003e\n\u003cbr/\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n## \u003cb\u003eGetting Started\u003c/b\u003e\n\nAfter installing the ReacTree extension in your VSCode, a ‘Start Tree’ item will be added to the Status Bar of your VS Code (bottom right). The extension can be launched by clicking on the Start Tree item on the Status Bar or by using the Command Palette (Ctrl+Shift+P) and selecting ReactTree: Show Panel.\n\u003cbr/\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cbr/\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/oslabs-beta/ReacTree/fabian/readme/src/media/status_bar_icon.png\" width=90% /\u003e\n\u003cbr/\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n## \u003cb\u003eFunctionality\u003c/b\u003e\n\n- After launching the extension, click on the Select File button and select the file you want to serve as the root. The extension generates a hierarchy tree of React components, displaying the parent-child relationships and the data passed between components.\n- Toggle the tree's nodes to view the component's props. Easily access the component files by clicking the file button, which will direct you to the corresponding file.\n\u003cp align=\"center\"\u003e\n  \u003cimg  src=\"https://raw.githubusercontent.com/oslabs-beta/ReacTree/fabian/readme/src/media/launch-props-open-files.gif\" width=90% \u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n- Customize the tree by dragging and dropping components to your preferred layout. Easily switch your view to vertical or horizontal with a click of a button. You can also lock your tree in place so you don't accidentally move your tree.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg  src=\"https://raw.githubusercontent.com/oslabs-beta/ReacTree/fabian/readme/src/media/navbar-controls.gif\" width=90% \u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n- ⇧⌘P(Mac) Ctrl+Shift+P (Windows) then type \"Preferences:Color Theme\" (or use ⌘K⌘T on Mac or Ctlr+K Ctrl+T on Windows) to change the theme of VSCode and ReacTree that best suits your preference.\n\u003cp align=\"center\"\u003e\n  \u003cimg  src=\"https://raw.githubusercontent.com/oslabs-beta/ReacTree/fabian/readme/src/media/themes.gif\" width=90% \u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## \u003cb\u003eTech Stack\u003c/b\u003e\n\n- [React](https://reactjs.org/)\n- [Typescript](https://www.typescriptlang.org/)\n- [Reactflow](https://reactflow.dev/)\n- [VSCode Extension API](https://code.visualstudio.com/api)\n- [Babel Parser](https://babeljs.io/docs/en/babel-parser)\n- [Webpack](https://webpack.js.org/)\n  \u003cbr/\u003e\n  \u003cbr/\u003e\n\n## \u003cb\u003eArticles\u003c/b\u003e\n\nCheckout out our \u003ca href=\"https://medium.com/@bnohcub/onboarding-a-dense-react-codebase-reactree-has-your-back-c29c71dd9ee2\"\u003emedium article\u003c/a\u003e for more information about ReacTree!\n\nAdditionally, we realized documentation on building a VSCode Webview Panel with React and Messaging is scarce. Don't worry, we wrote \u003ca href=\"https://medium.com/@michaelbenliyan/developers-guide-to-building-vscode-webview-panel-with-react-and-messages-797981f34013\"\u003ethis article\u003c/a\u003e which goes in depth to easily understand how to build a Webview Panel!\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## \u003cb\u003eContributing\u003c/b\u003e\n\nContributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nYou can check out more information and get started with ReacTree on its official webpage and on its \u003ca href=\"https://www.linkedin.com/company/react-tree/\"\u003eLinkedIn\u003c/a\u003e page. These pages provide useful information about the project, including how it works, its key features, and how to get started with using it.\n\nAdditionally, you can find the project’s source code, documentation, and issue tracker in Github. You can also fork the project, make changes, and submit pull requests to help improve the project.\n\nIf you like the project and find it useful, please consider giving it a star on GitHub. This can help increase visibility for the project and attract more contributors and users.\n\n  \u003cp align=\"left\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/oslabs-beta/ReacTree/issues\"\u003eReport Bug / Request Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003cbr/\u003e\n\n## \u003cb\u003eMeet Our Team\u003c/b\u003e\n\n- Justin Kim • [LinkedIn](https://www.linkedin.com/in/justin27kim/) • [Github](https://github.com/justin27kim)\n- Fabian Salazar • [LinkedIn](https://www.linkedin.com/in/fabian-salazar-260a7957/) • [Github](https://github.com/fsalazar88)\n- Brian Noh • [LinkedIn](https://www.linkedin.com/in/briannohski/) • [Github](https://github.com/dogenoh)\n- Mike Benliyan• [LinkedIn](https://www.linkedin.com/in/michaelbenliyan/) • [Github](https://github.com/MichaelBenliyan)\n- Kevin Liu• [LinkedIn](https://www.linkedin.com/in/kevindliu/) • [Github](https://github.com/K8Liu)\n\n\u003cbr/\u003e\n\n## \u003cb\u003eLicense\u003c/b\u003e\n\n\u003c!-- Make sure to add license file to master branch --\u003e\n\nReacTree is developed under the [MIT license](https://github.com/open-source-labs/ZusTime/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Freactree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foslabs-beta%2Freactree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Freactree/lists"}