npm install
npm start
You will be taken to the Home Page of the Application, which it will ask for your entry file.
What’s an entry file you may ask? It is the file in which the root component renders on top of! For you React Router users – it’s the file, which contains the “Router” attribute. In convention, the entry file is usually called “App.js” or “Index.js.”
Once loaded, you will be automatically sent to the component hierarchy view. But, if you deter from this view – just click the Route Tree tab to get you back to the tree! From this view, a solid node means the child has children yet to be un-collapsed. In addition, if you hover over the name, it will reveal which nodes that particular component has links or routes to, via lasers! These nodes will fill red so you can see them all at once.
From this view, you will be able to add a component with just a right-click! To do this, just right-click the component you will want to add a component to, and it will reveal two options through a pop-up window. Just select “Add Component,” then type in the name of the new component. Ba-da-bing ba-da-boom, check your code – you have a new component!
Additionally, from this same component tree view, you will be able to add routes with just a right-click! Just click the component in which you would the route to come from – and just tell us the name of the route, and which component to render when a user hits that route! The tree will automatically re-render, and you will see your new link, and route animation if you mouse-over the name of the component clicked!
This gives you access to your files, and lets you edit them in-app. This editor is based in Monaco, just like our beloved VS Code. Explore your files, make changes, edit your shiny new components and more!
State Store, SEO Optimization, Component Statistics coming soon!