React UI构建器：React UI Builder
这个工具是React JS组件的一个可视化构建器。In builder you can easily combine available components with each other, and see how they look and feel right on a web page. Then you can generate a source code of new component from the combination, and builder will include all children and dependencies. Moreover you can generate Reflux actions/store for your component.
The source code of newly created component can be edited right in the builder or in your favorite IDE it doesn't matter for builder, the source code will be automatically compiled and reloaded in builder's pages.
You can include the source code of other third-party components manually ( 'Builder's projects source code structure' section ). All newly created/included components are available for composing with other components, it means you can reuse your components and combine them with others.
Project's source code is located in local folder on your computer. But you are not intended to create project from scratch because builder can download bootstrap project from a gallery of published projects. These projects already have components or libraries of components, and other helpful things like css/less/fonts files or webpack predefined configurations, etc.
You can access the projects gallery right from the builder, also you can preview pages with components in selected project, and download source code of the project into specified local folder.
And finally, you can publish your own project into the gallery.
Before you continue reading, please, watch this Tutorial
Feel free to ask questions in React UI Builder group
Features
- A gallery of bootstrap projects with reusable components and their predefined variants.
- Generate source code for new component from any combination of other components.
- Edit source code of the project in other IDEs, builder will reload changes automatically.
- Generate Flux/Reflux actions/store for components.
- Include and use third-party components in builder.
- Publish own projects into the gallery.
Installation
npm install react-ui-builder -g
For upgrading of version it is better to uninstall and then install:
npm uninstall react-ui-builder -g
Running
Builder runs as a webserver.
react-ui-builder
Usage
-
Go to http://localhost:2222/builder in browser.
-
Browse gallery of published projects. There are a limited amount of completed projects so far, but we intensely working on a feature where any user will be available to publish project.
-
Clone project you liked by specifying absolute path to local folder where you want to see the source code of the project. This folder should exist and be empty.
-
Cloning and preparing of the project will take some time. Most time will be spent by npm installer, builder starts the installation of dependent npm modules automatically after project is downloaded.
-
Now you can compose components on page, consider page as a desk where you combine components with each other.
First look at builder's interface
Click to select a component on the page
Page consist of components which you can select/copy/paste/delete, also change component's options (properties).
Add available components into page
To add new component into page you have to open left side panel with list of available components, and select component from the list.
After you have selected component from the list builder is switched into paste mode, it means chosen component is copied into builder's clipboard
and ready to be pasted in place you indicate.
Select different variants of available components
There are a lot of variants of listed components inside.
So you can choose any other variant of any component by clicking on the browse button which appears on the selected list item.
Paste component into place
Select any component on the page where you want to place a component from the clipboard. And then choose operation from toolbar above selected component.
To stop paste mode simply click on 'Clear clipboard' button or 'Cancel' button on the component toolbar.
Change component's options (properties)
To change component's options click on the last button on the component's toolbar in selection mode.
View the structure of the page on treeview panel
To look at the page's structure you can toggle treeview panel.
Treeview is very helpful in cases if you have not visible components on page view.
All operations from component's toolbar is available in treeview as well.
Create source code from combination of components on the page
Any combination of components on the page you can define as new component, and reuse it on other pages in the project. To define a new component you have to open options of the parent component in combination, switch to 'Component' tab and enter the name and group of your component. Then just select option 'Create component' and you will see a source code of new component.
There is also a possibility to create Flux/Reflux actions/store for selected component. To create source code for Reflux actions and store, just check checkbox 'Include Reflux actions...'.
After you saved changes, new component will be available on the left-side panel in defined group.
For more information about component's source code see 'Builder's projects source code structure' section.
Merge source code of children components into existing source code of parent component
Builder gives a possibility to modify source code of the existing component by including other child components in it.
Open component source code and write {this.props.children} where you want to see new components. After that you will be available to paste components inside of the given component. After you put some components into parent component, open parent component's source code in builder (select component and open its properties). In the left top corner of the source code you will see a menu where 'Merge children into source code' options is, select this option. All children components will be included into source code, and builder will include all dependencies.
Proxying HTTP requests
If your components has to request other HTTP servers you can define a proxy for any HTTP server (except HTTPS). For example, if a component has to retrieve a JSON from some REST service which is located by address: http://localhost:3000/someService and you place this component on page in builder, it will not connect to localhost:3000 due to CORS restriction. To avoid that you can define proxy for current project, open main menu (bars in top-left corner) and choose 'Project settings' option. Specify URL of the server: 'http://localhost:3000'. After that your component will be available to connect to /someService (you should use not relative address) right from the builder's page.