Getting Started With Kotlin-React

Sample Application

A couple of years ago Stefan Liebig and me were creating a tiny webapp with the purpose of comparing web technologies: The Giphy Search. It is basically a simple frontend to the Giphy API, so the user can search animated GIFs by entering some search words. Stefan implemented it with Elm and I was using React. So this was the perfect sample for me to start with Kotlin-React, since it is basically the same technology. I started using create-react-kotlin-app, which scaffolds a complete runnable sample application including an IntelliJ project file. You will find the complete source on GitHub, the app itself is hosted via GitHub pages, so give the Giphy Search App a try.

The App (-component) in React
The App (-component) in Kotlin

Functional Components

The simplest way to provide a component in React is a functional component, which is basically just the render function of a component. Let’s start with thealert component that takes a message attribute and provides a div with bootstrap alert classes. In React this would be this, a simple function that creates some JSX:

Functional Component in React
Functional Component in Kotlin

Class Components

Functional components are a perfect match for simple representational UI. Class components on the other side are more complex (you need to create a class instead of simple function), but they may have state and they can participate in the react lifecycle, e.g. componentWillMount(). There is a another distinction when it comes to tooling: The React Developer Tools shows classes as tags (like e.g. <GiphyList>), but just the plain content for functional components. In the following screenshot you can see that the alert is just represented by the <div>.

React Extension for Chrome
GipyList — Class Component

Stateful Components

Props are used to pass data from parent to child components, but if a component needs to maintain data on its own, you need a stateful component. Its quite common in React to maintain the value of input fields in the state. Means the input field just triggers the component on changes, the component alters the state, and the new state is rendered by React. An example for this is the SearchBar component, which is a stateful component that maintains the user’s search term input in the component state:

SearchBar — Stateful Class Component

--

--

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