Home
Getting Started
Short Tutorial
Try to write a brief tutorial of how to use the most bright features of Structor:
- Quick install from scratch - explain that this is just for a trying purpose, Stuctor works with any type of the React App project with the only one restriction related to the React/Redux file structure.
- Add/Copy/Paste components on the page.
- Style components on the page.
- Generate new component (Scaffolds).
- Install package of the components through the gallery (future feature).
- Export project (future feature).
Documentation
Introduction
- What is Structor? - we need to describe Structor as a development tool aka "what is Structor, and what Structor is not"
- Why do I need Structor? - we should briefly explain why Structor can help in the UI/React/Redux development. See some examples of the expressions here https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation
Running Structor
- Install/Update Structor - each version may update intelligently the metadata folder.
- Describe how to run Structor with different options.
- Troubleshoot Structor.
Folder Structure
- The top level project's source code structure -
<APP_SOURCE_CODE>folders, what they are for. - The structure of the components source code - groups, assets, group reducers (future feature), group sagas (future feature).
- Here is the best explanations of how to use namespaces/modules of components in the folder structure: https://jaysoo.ca/2016/12/12/additional-guidelines-for-project-structure/#what-to-do-with-common-components
Structor's Workspace
A very friendly description of each part of Structor's workspace - use screenshots, pointers. The main purpose of this section is to describe how quick a user can arrange/stylize components on the page.
- Page manipulation section (top toolbar)
- Two modes (left toolbar): editing, live preview
- List of groups panel (left toolbar) (+installed packages from the future point of view)
- Add/Copy/Paste/Replace/Delete operations (top toolbar + components toolbar + treeview panel)
- Multiple selection and clipboard operations (top toolbar + treeview panel)
- Navigation breadcrumbs (top toolbar)
- Treeview panel (left toolbar)
- Quick style/props panel (left toolbar)
- Component's properties modal
- Scaffold generators - just brief description, this will be described in the following chapters
- Package gallery - just brief descriptions, this will be described further
- Main menu - just brief description: export, proxy, saving, etc. will be described further
Generating Component Scaffold
- What is this, why we need that in Structor. Where to find the source code of the new component. How it integrates into the application source code (both React/Redux)
Installing Components Package
- New feature - will be a lot of new info.
Exporting Pages
- How to export the entire pages from and create a standalone project structure - it's very helpful when user does not integrate components into own project but uses Structor as quick prototype tooling.
Deep Dive Into Structors Guts
....