A simple Samsung TV + React + React Router 3 Tutorial

First thing I learned while trying to develop an App for a Samsung SMART TV is that there’s not a lot of resources, and while the concepts are clear, the lack of documentation makes it difficult.

In this tutorial i’m going to help you create a starter web application using react and react router using Tizen for a Samsung TV.

Background

Tizen

Tizen is an operating system platform based on Linux that works on most Samsung devices. The Tizen SDK allows developers to use HTML5 and related web technologies to write applications that run on supported devices. As of 2017 Tizen allows the use of ECMAScript 6, however its IDE only includes ECMAScript 3 libraries, so Tizen recommends the use of Babel to compile your sources [2].

A Tizen web application consists of HTML, CSS, and JS files, and a “config.xml” file.

Tizen Web Application project structure

To get started, first install the Tizen SDK and create a sample project.

1.- Install the Tizen SDK

Follow the steps at http://developer.samsung.com/tv/develop/getting-started/setting-up-sdk/installing-tv-sdk

2.- Create a sample project

Follow the steps at http://developer.samsung.com/tv/develop/getting-started/creating-tv-applications

Starter App

The web application we are going to create is very simple, and uses the following project structure

starter-app
├── node_modules
├── package.json
├── .babelrc
├── public
│   └── index.html
└── src
    └── App.js
    └── index.js
    └── Samsung.js
    └── React.js

We only need react, react router and babel, i’m going to use Facebook create-react-app since it simplifies the project creation process.

npm install -g create-react-app

create-react-app starter-app
cd starter-app/
npm install react-router --save-dev

Here is the code for the application:

index.html

React Router is built with history, and allows 3 types of history:

• browserHistory
• hashHistory
• createMemoryHistory

In my experience BrowserHistory and hashHistory don’t work smoothly (experienced render issues and weird loops on application launch) within the Tizen emulator, so we are going to use createMemoryHistory [3].

createMemoryHistory it’s also useful for testing and other rendering environments (like React Native).

index.js

App.js

Samsung.js

React.js

Remember that you must compile your code to ES2015 in order to include it in the Tizen IDE or you will get a bunch of errors (I normally code on Sublime and then use Babel to compile the code).

.babelrc

The results

The web application allows you to change routes and display the component assigned to that route.

Samsung SMART TV + React + React router demo APP on the TV emulator

References

1. http://developer.samsung.com/tv/develop/getting-started/creating-tv-applications
2. https://developer.tizen.org/community/tip-tech/using-ecmascript-6-tizen-web-projects.
3. https://github.com/ReactTraining/react-router/blob/v3.0.0/docs/guides/Histories.md