React Simple Data Binding example

In previous post, we created a simple React Hello World Application. This tutorial shows way to implement simple data binding with React.

I. Technologies

– React 16
– NodeJs 6.11.2
– NPM 3.10.10
– Yarn 1.5.1
– Babel 6.24.1

II. Practice

1. Goal

We will build a React Application that can receive click event to add/minus value to a variable, then update variable in UI immediately:


2. Project Structure


3. Step by Step

3.0 Set up Environment

We need NodeJs, Yarn and Babel to compile and run this example.
Please visit Set up Environment for step by step.

3.1 Set up Project folder

Create folder for BindData project, then make subfolders and subfiles like this:

3.2 Dependency

Open package.json, write these lines for project information and dependency:

  "name": "bind-data",
  "version": "1.0.0",
  "main": "index.js",
  "author": "JavaSampleApproach",
  "license": "MIT",
  "dependencies": {
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1"

3.3 index.html

This is the default HTML file that appears in the browser when we invokes our application.
We also use this HTML file to embed React files and reference to our javascript app.js.

<!DOCTYPE html>

    <meta charset="UTF-8">
    <title>JSA React Demo</title>

    <div id="app"></div>
    <script src=""></script>
    <script src=""></script>
    <script src="./scripts/app.js"></script>


div tag with id="app" for rendering template in the next step.

3.4 app.js

let counter = 0;
const add = () => {
    console.log('add One, counter = ' + counter);

const minus = () => {
    console.log('minus One, counter = ' + counter);

const appRoot = document.getElementById('app');
const renderApp = () => {
    const template = (
            <h2>Java Sample Approach</h2>
            <p>Counter: {counter}</p>
            <button onClick={add}>ADD+</button>
            <button onClick={minus}>MINUS-</button>

    ReactDOM.render(template, appRoot);


– Everytime we click on the button, add or minus function will be invoked by onClick attribute.
– Inside add or minus function, variable counter value is changed, right after that, renderApp function which has ReactDOM.render method will be called to update UI.

3.5 Run & Check result

– Point cmd to BindData project folder, then run cmd: yarn install.
node_modules folder and yarn.lock file now appear in our project folder:


– Run cmd: babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch
Now, a new app.js file appear in public/scripts folder, code insides this file was generated automatically (and also update automatically whenever we modify and save src/app.js).

– Open new cmd, point to Project folder, run cmd: live-server public.
Result in Browser:


III. Source code


By grokonez | March 26, 2018.

Last updated on May 2, 2021.

Related Posts

Got Something To Say:

Your email address will not be published. Required fields are marked *