Nithin Bekal

Posts About Notes Slides

React.js

The Hello World program

  • JSbin
  • enable es6/babel
  • add library - react with addons
ReactDOM.render( <h1>Hello, world!</h1>,
               document.body);
<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.14.3.js"></script>
<script src="//fb.me/react-dom-0.14.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

</body>
</html>

Create a component

var HelloWorld = React.createClass({
  render() {
    return (
      <h1>Hello, world!</h1>
    )
  }
});

ReactDOM.render(<HelloWorld/>, document.body);

<HelloWorld/> is JSX - JavaScript XML tag.

Using custom methods in the component

var HelloWorld = React.createClass({
  sayHello() { return "Hello, world!" },

  render() {
    return (
      <h1>{ this.sayHello() }</h1>
    )
  }
});

ReactDOM.render(<HelloWorld/>, document.body);

It’s better to avoid rendering to document.body directly. There is no guarantee that it will not be manipulated by other js libs. Always use an element that is only used by react.

ReactDOM.render(<HelloWorld/>,
  document.getElementById("container"));
  • Pete Hunt

Props

var FruitList = React.createClass({
  renderFruits() {
    var fruits = this.props.fruits.map( (fruit) =>
      <li> { fruit } </li>
    );
    return fruits;
  },

  render() {
    return (
      <ul>
        {this.renderFruits()}
      </ul>
    )
  }
});

ReactDOM.render(
  <FruitList
    fruits = {["Apple", "Mango", "Papaya"]}
  />,
  document.getElementById("container"));

PropTypes

var FruitList = React.createClass({
  propTypes: {
    fruits: React.PropTypes.array.isRequired
  },
  // other stuff
});

State

var Form = React.createClass({
  getInitialState() {
    return(
      { name: "Nithin" }
    );
  },
 
  onClick() {
    alert(this.state.name);
  },

  render() {
    console.log(this.state);

    return (
      <div>
        <h1>GCRC</h1>

        <input type="text"
               value={this.state.name}
               onChange={ (event) => {
                 this.setState({ name: event.target.value })}
               }
               value={this.state.name} />

        <input type="submit" value="Save" />
      </div>
    )
  }
});

ReactDOM.render(
  <Form />,
  document.getElementById("container"));

FruitListContainer

var FruitList = React.createClass({
  renderFruits() {
    var fruits = this.props.fruits.map((fruit) => {
      return (
        <li>{fruit}</li>
      )
    });

    return fruits;
  },

  render() {
    return (
      <ul>
        {this.renderFruits()}
      </ul>
    )
  }
});

var FruitListContainer = React.createClass({
  getInitialState() {
    return({ fruits: ["Orange", "Mango"] })
  },

  render() {
    return (
      <FruitList fruits={this.state.fruits} />
    )
  }
})

ReactDOM.render(
  <FruitListContainer fruits={ ["Orange"] } />,
  document.getElementById("container"));

Clock tick

var ClockTick = React.createClass({
  getInitialState() {
    return this.timeDict();
  },

  componentDidMount() {
    setInterval(this.updateTick, 1000);
  },

  timeDict() {
    date = new Date();
    hh = date.getHours();
    mm = date.getMinutes();
    ss = date.getSeconds();

    return { hours: hh, minutes: mm, seconds: ss };
  },

  updateTick() {
    this.setState(this.timeDict());
  },

  render() {
    return (
      <div>
        <h1>Clock tick</h1>
        <h3>
          {this.state.hours}:{this.state.minutes}:{this.state.seconds}
        </h3>
      </div>
    );
  }
})


ReactDOM.render(
  <ClockTick />,
  document.getElementById("container"));

Links

React with Rails