Smalltalk-draft

Author
Rudy Huang, Engineer, Potix Corporation

Date
January, 2020

Version
ZK 9.0.0

React

React is a JavaScript library for building user interfaces. We can use React as a front-end UI and use ZK as a pure backend. In this small talk, I will show you how to integrate React with ZK using the client binding API step by step.

For convenience, I use an open-source React demo project react-shopping-cart to demonstrate.

Load data from ZK

We need to create a View Model to use the client binding feature in React.

Create a ViewModel (VM) in ZK

We created an IndexVM.java and defined a property "products". The products property is loaded from a database.

IndexVM.java

@VariableResolver(DelegatingVariableResolver.class)
public class IndexVM {
	// omitted
	@WireVariable
	private ProductService productService;

	private List<ProductDto> products;
	// omitted
	@Init
	public void init() {
		products = productService.getProducts();
	}

	public List<ProductDto> getProducts() {
		return products;
	}
	// omitted

• Line 11: We use Spring + Hibernate to communicate with the database. A service instance is needed to be injected in the VM by adding a @WireVariable annotation.
• Line 14: Declare getter only here so ZK knows products is a readonly property of a VM.

Set Client Binding Annotations

The react-shopping-cart loads JSON data a server. A method fetchProducts initiates axios.get to make an AJAX request.

react-shopping-cart/src/services/shelf/actions.js

export const fetchProducts = (filters, sortBy, callback) => dispatch => {
  return axios
    .get(productsAPI)
    .then(res => {
      let { products } = res.data;
// omitted

We can use client binding API to request with ZK instead.

Download the Source

You can access the complete source at github.

Other Front-End Frameworks Integrations

• Angular
• Vue.js

Comments

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.