Create React applications using a drag&drop interface

Jul 15, 2015 14:18 GMT  ·  By

Ukrainian developer Alexander Pustovalov created a visual builder that lets developers build user interfaces that run on Facebook's React JavaScript framework.

The project is named React UI Builder, is hosted on GitHub, and comes with a built-in Express server which starts a local Web page where developers can go and build their React UIs.

The visual builder features lots of reusable components which developers can mix and match to create a UI for their projects. These interfaces can then be saved to projects and stored in a gallery for later (re)use.

Besides providing a drag-n-drop tool for moving stuff around on a canvas, React UI Builder is also capable of generating the application's final code, and even allow programmers to add Flux/Reflux actions and stores for their components.

This means the interface can be set up to perform various actions, right from the UI builder.

Drag, drop, edit, combine, save, and get the JavaScript code

Additionally developers can edit the generated project's UI with external IDEs, and the builder will be able to recognize changes, updating the components accordingly.

As other developers on HackerNews observed, this tool does look like many of the similar UI builders created for Visual Basic and Delphi at the start of the Win 32 era, but they can be a valuable tool for learning React for any industry newcomer.

As somebody well put it, "Whoever owns the UI builder tool market will emerge as the victor, Facebook should hire you immediately."

Indeed a true statement, just because the JavaScript world is becoming more and more fragmented with tools like AngularJS and React, both using their own methodology when building Web applications, methodologies significantly different from the classic approach, each taking a lot of time to study and get used to.

React UI Builder is a visual Web interface for building React apps
React UI Builder is a visual Web interface for building React apps

The React UI Builder application (9 Images)

React UI Builder lets you create React UIs via drag-n-drop
React UI Builder is a visual Web interface for building React appsThe React UI Builder interface
+6more