ReactJS Data Binding

October 24, 2017 - 1 minute read

ReactJS Data Binding is pretty simple … if you are doing any web or app development in today’s market, you have most likely heard of ReactJS.

Simply put ReactJS is a Javascript library for building user interfaces. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

In this example (taken from this tutorial video) I will show you your how 2-way data binding work within ReactJS.

HTML

Our HTML is pretty simple. All we need to make sure we have is a reference to ReactJS and ReactDOM scripts, as well as a DIV with an id of “app”.

CSS

Nothing much here, just some basic styles.

JS

In our js file we handle all elements that need to be rendered using JSX.JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant. (more about JSX here).

In the following code we leverage the “componentDidMount” feature to handle the data binding prior to the HTML being bound.

View the full working code here.

Tags: , ,