Image for post
Image for post

Creating lists and using live data in React Studio

React Studio
Mar 13, 2017 · 5 min read

In this episode, we show you how to use data as content in your design through data slots and data sheets, including assigning data to component properties, and vice versa. Moreover, the latest data plugin allows you to fetch live data from external resources (JSON!) and use it in your app. The making of a comment page is introduced here as an example.

Data Sheet, List, and Component Properties

Let’s begin with high-level data linkage between data and React components. In most cases, your data is stored in data sheets with multiple rows. The structured data is then visualised as a List view containing multiple items with the same style, while each item represents a row of data. This List representation is very common in modern apps, like Instagram. In React, the item of a List can be conveniently wrapped as a component whose properties are just perfect for carrying data.

Image for post
Image for post
High-level data linkage between data sheet and component properties

In the following, we’ll walk you through the making of the template “Comments (Simple)” which is available through File/New from Template. It allows users to input their name and comment. The input data is saved to a data sheet which updates the comment list dynamically. Thanks to React Studio’s “Publish to Web” feature, here is the preview: https://neonto.cloud/u/commentlist/

The making of List

Let’s first make a List! It’s super easy. Simply prepare the elements that you need for a single item/component in the canvas, select all of them, then click “Make List.”

Image for post
Image for post

A window asks whether you want to create a data sheet. A list is always associated with a data sheet. If you haven’t got one yet, click “Yes, Create Data Sheet.”

Image for post
Image for post

Now you see how the item repeats itself in the List. What just happened is that React Studio wraps your selected elements into a component, then use this component to construct your List.

Image for post
Image for post

Let’s quickly check what has happened after you clicked “Yes, Create Data Sheet”. Go to Data Tab and find the sheet that React Studio just created for you. The sheet consists of columns matching your selection of elements, i.e. a column of text is created for a text element in your design on canvas, and so on. You can further edit the content of the sheet in this view. The List and the data sheet are automatically linked!

Image for post
Image for post
In this case, two text elements were selected for making a List. Two columns for storing text are created in the data sheet.

Before moving to the next stage, let’s check two things in your List setting. The component to form the List should be set under Element tab, while the data sheet to be injected to the List should be set under Data tab. In case you have your data sheet ready, select the List element, and assign it with your data sheet from the dropdown menu.

Image for post
Image for post

Linking data to component properties

Now you have a data sheet associated with the List, but not yet linked with component properties. Component properties can have value as text, image, custom css, etc., depending on what type of element the property is.

Select the text element in the “List Item 1” component, and check the Data tab on the right side of the canvas. You can see the fields of “Take value from property..” option. The dropdown menu lists the columns of the data sheet, and you can even create new properties within this component.

Image for post
Image for post

You can see on the start screen that the List is filled with content from your data sheet. It’s that simple.

Saving data to data sheet

Another feature demonstrated in this Comments example project is to post new comments. User input can be saved to the data sheet, which updates the List in realtime. This is done in Post component which has two text fields taking user’s input and one button to trigger the saving of data.

Check out this “post” button. Select the button and look into its Interaction tab. It’s as straightforward as it is. When a user taps the button, “Save data” is executed. The target type is a Data sheet, and the dropdown list allows your to select to which data sheet the user input should be saved. The table at the bottom lets you assign which input goes to which column of the data sheet.

Image for post
Image for post
Select the button element and set the interaction for saving data to the data sheet.

Similarly, you can save data to a data slot. Select the username text field and see its Interaction tab. Whenever the text is changed, the value is saved to username data slot immediately.

Image for post
Image for post

This is also how the title changes as you type since the title takes value from the same username data slot.

Image for post
Image for post

The usage of data plugin

Another exciting feature is that you can retrieve dynamic data from remote database through our data plugin. Now you can show dynamic content on your app. Here is a simple example showing how to use it.

  • Click “Data plugin setup” button on the top-right corner of Data tab.
Image for post
Image for post
  • Select or create a data sheet. Select the newly created data plugin instance in the section “Live Data from Web Service.”
Image for post
Image for post

Now you see the data is automatically loaded into the sheet, ready to be linked with component properties as in Comments example.

Check it out! JSON data retrieved from this web API request:
https://netflixroulette.net/api/api.php?director=quentin%20tarantino
can be rendered like this on React Studio:
https://neonto.cloud/u/jsontarantino/

Try it out yourself — React Studio by Neonto.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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