We have some news that all you app builders are going to LOVE!

We’ve just launched a new integration with Xano, the no-code backend that lets you have a complete backend for your project within minutes.

Some highlights of this integration:

  • Connect your React Studio project to a robust backend in just a few clicks.
  • Create robust apps with login screens linked to a powerful backend that is ready to scale when you need it.
  • File upload plugin lets you easily and safely upload files from your React app to your Xano backend.
  • You’re in control. Easily spin up a…

We’ve added two new animation plugins to Plugin store. Install Plugins simply by opening the Plugin store on your React Studio and click on the Lottie + Particles.js.

These two plugins cover adding Lottie and Particles.js animations to your project and are dead simple to use; just place and align the plugin element onto screen and input the animation JSON to plugin settings.

Events view in ´Google analytics

We’ve published an update to React Studio’s Firebase plugin. This update adds new “Log event” interaction. Logging events is crucial for optimising your app usage.

Logged events are automatically sent to Firebase analytics and Google analytics. You simply need to update your Firebase plugin from React Studio’s Plugin manager and attach events to your app’s buttons.

Make sure you have the “measurementId” property added to your Firebase config. You’ll find it from your Firebase console or your Google analytics. Read more about config settings here https://firebase.google.com/docs/analytics/get-started

We’re excited to announce that we’ve added React Router to React Studio code generation. No more “lost pages” when user clicks browser back button and welcome url parameters! React Router code generation is available in React Studio Version 1.7.15 (383).

You’ll get the update automatically when you open the app. Install React Studio free from www.reactstudio.com. For older projects you need to regenerate the code to make your app fully react router compatible.

P.S. In case you’r using Firebase on your project you need to update the Firebase plugin to latest version (version 22 or higher) to make it work…

Project map Thumbnail view

We’ve released a major update to React Studio (Version 1.7.15 build 383). Update comes up automatically when you open the app.

Whats new?

  • React router
  • New project map views and filtering (standard, thumbnails, list)
  • Clear list item states
  • Lots of bug fixes + minor improvements

Read the complete change log here: https://docs.neonto.com/reactstudiochangelog/

React Router

We’ve added support for React Router code our generation. This means that every screen will have unique url. Router supports parameters and multiple routes for single screen. There’s also support for 404 screen.

Read more detailed post about React router from here.

P.S. In case you’r using Firebase on your…

Firebase plugin is updated to support path to specific document. This means that you can point Data sheet path to single document without having to make query. You’ll get the update when you go to Plugins->Show Plugin manager->Update.

Check this short video to see the plugin in action.

Download React Studio free from www.reactstudio.com

Other interesting stories about React Studio

Photo by Markus Spiske on Unsplash

We’ve released an update (Version 1.7.10 (373) to React Studio. You’ll get the update automatically by opening the React Studio app. If you don’t have the app you can download it from www.reactstudio.com App is currently Mac only (sorry Windows and Linux users)

This update is all about improving UX for custom scripts, data linkages and localization keys. Thanks heaps for everyone suggesting improvements and features on our forum.

Whats new!

  • Completely revamped Script editor
  • Localization key drop-down menu
  • Filtering for Data runtime linkage popup
  • Web content element Source URL linkage
  • Add background to screens by default

Script editor

This update introduces totally revamped…

React Studio projects have built in localisation feature which is really powerful even though many users don’t even know that it exists.

Let’s get down to business.

Every React Studio project has a “Localization” data sheet by default. This data sheet holds all translations for basic elements used in the designs. Element text is mapped with localization_key to correct strings (translations) in “language” columns. By default only the ‘en’ column is created but you can create as many language columns needed. …

Photo by Oscar Sutton on Unsplash

We’ve released 1.7.9 version of React Studio. You’ll get the update automatically by opening your React Studio app on your Mac.

Whats new!

  • “Hot reload” for generated code, this makes code exports many times faster after the first code export. Just click “Open in Web Browser” and see the difference yourself.
  • Improvements to Drawer menu; direction: left, right and support for multiple states.
  • CSS update which blocks click-throughs for components. This is handy e.g. when you need to create custom modal component which blocks all other buttons on screen.
  • Added two new props for rectangle vectors ; Fill color and…

Starting in Chrome version 73, Progressive Web Apps (PWA’s) are now supported on all desktop platforms, including Chrome OS, Linux, Mac, and Windows. Previously installing PWA has been available only for mobile (Add to home screen).

This means you can “install” your progressive web app into your computer just like any other app. You’ll get the app icon and app opens into its own window without the browser toolbars or other distractions.

Read more about the PWA desktop support here:https://developers.google.com/web/progressive-web-apps/desktop

How to Make your Progressive Web App desktop ready

React Studio

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store