React Simple Data Binding example
react
23
binding
1
Male avatar

loveprogramming viết ngày 02/05/2021

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:

react-bind-data-example-result

2. Project Structure

react-example-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:
react-example-create-folder

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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

451 bài viết.
79 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 6 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 5 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 5 tháng trước
1 0
Bài viết liên quan
White
19 3
(Link) (Link) — tracks device battery state. (Link) (Link) — tracks geo location state of user's device. (Link) (Link) — tr...
Đinh Viễn viết gần 2 năm trước
19 3
Male avatar
0 0
https://grokonez.com/frontend/react/getparamfromurledititemformreactreduxexample Get Param from Url & create Edit Item Form – reactredux example ...
loveprogramming viết 12 ngày trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
451 bài viết.
79 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!