https://grokonez.com/frontend/react/react-bind-data-simple-data-binding-example
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.
More at:
https://grokonez.com/frontend/react/react-bind-data-simple-data-binding-example
React Simple Data Binding example
#react #binding