React Studio 1.0 is out now!

React Studio
3 min readMar 7, 2017

--

It’s time to take away the Beta flag from the product — we’ve published an update to React Studio, and it’s the big one-oh. Download React Studio from www.neonto.com/reactstudio and activate your monthly subscription today.

To celebrate, we’re offering React Studio for $19 /month for the first 1,000 subscribers. Act fast! 🎉

What’s new in 1.0:

  • Improved data binding UI for props (“Take value from property” UI)
  • Improved UI for Send Data interaction
  • Column layout element (check out this responsive demo)
  • Fade in and Fade out animation
  • Element styling for vector graphics and images: rounded corners, background, shadows etc.
  • Published the Plugin API for third-party party developers
  • Two new sample component plugins (Camera and Rating)
  • RSS reader data plugin
  • Lots of bugs squashed!

Take value from property UI

Take value from property

Binding data to props is now easier and more convenient. We know that in most of the use cases, the values are bound from Data sheets or Data slots. So, we replaced the text boxes with Dropdown lists that offer Data sheet columns and Data slot names. This way, small typos don’t stand in your way! You can still add any value to the value fields by clicking the “Create new” button, though.

Save data UI improvements

Sending data to Data sheet is now easier than ever. Click Interact -> Save data and choose which content is saved to which column in Data sheet.

Columns element

Real responsiveness: side-by-side or stacked elements depending on the screen size

Creating responsive design is really important, and contents should adapt to different screen sizes. The new Columns element helps in that quest — it allows you to choose whether the component blocks are shown side by side or stacked on top of each other when the device sizes change.

You can download a sample project called “Appointment” that uses columns from project templates (File menu → “New from template”). The project looks like this:
Appointment demo (try resizing the window to a narrow size)

Fade in/out animation

Here today, gone tomorrow: setting up fade in/out animations for a button element

Add a Fade in/Fade out animation for elements. Select the element on the design canvas, click on the Interact tab and scroll to the bottom of the inspector canvas. Ta-dah!

RSS Reader Data plugin

RSS data plugin

RSS data plugin is now a part of the React studio’s default installation. Just create a Data sheet and click Data plugin setup. Load data to data sheet selecting the RSS source from “Live Data from Web Service” dropdown menu.

Like what you see? Head down to www.neonto.com/reactstudio and activate your monthly React Studio subscription today.

--

--

React Studio

The premium app design tool for the most advanced JavaScript UI library — React JS www.neonto.com/reactstudio