MW Logo Black

ReactJS Data Binding

Reactjs 2 Way Data Binding

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

Leave a Reply

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

Other Resources

WordPress Mode For Coda 2
Articles

WordPress Mode for Coda 2

UPDATED 01-15-2019: This Coda add-on is completely compatible with WordPress 4.4+ If you are using Panic’s Coda 2, and you are a WordPress developer or theme developer, then you definitely

Read More »
Ui Design
Design

User Interface Design and the Web

If you are looking for great user interface design to help your online business website … You are at the right place! There is so much information that goes into what

Read More »

Schedule your call today.

Use the calendar here to book a free consultation. You can choose 15 or 30 minutes, depending on how much time you think we need to discuss your project details.

Some of the things we will go over on this call:

We will dive into these items and any other touch points you need to share with me.