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”.
<html>
<body>
<head>
<title>2 Way Data Binding with ReactJS</title>
</head>
<div id="app"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
</html>
CSS
Nothing much here, just some basic styles.
html, body {
display: flex;
justify-content: center;
}
section#hello-world {
margin-top: 36px;
padding-bottom: 36px;
display: flex;
align-items: center;
flex-direction: column;
width: 600px;
}
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.
// create an array of colors
const colorArr = [
"red",
"blue",
"green",
"orange",
"purple",
"cyan",
"brown",
"yellow",
"lightblue"
]
// create our component class
class HelloWorld extends React.Component {
// setup our constructor passing in props
constructor(props) {
super(props);
this.state = {
color: "hotpink"
};
}
// handle color loop before component is bound
componentDidMount() {
let colorPos = 0;
setInterval(() => {
if(colorArr.length - 1 > colorPos) {
this.setState({
color: colorArr[colorPos]
});
colorPos++
} else {
this.setState({
color: colorArr[colorPos]
});
colorPos = 0;
}
}, 700)
}
// create our color changing method passing in the event
changeColor(event) {
this.setState({
color: event.target.value
});
}
render() {
const styleObj = {
backgroundColor: this.state.color,
fontSize: 64 / 2
}
return(
<section style={styleObj} id="hello-world">
<h2>{this.state.color}</h2>
<input value={this.state.color} onChange={this.changeColor.bind(this)} />
</section>
);
}
}
ReactDOM.render(<HelloWorld name="Matt" />, document.getElementById("app"));
// props, style, className, state
