Page Comparison

After running through a tic-tac-toe tutorial it became very obvious to me that ReactJS is a kind of server faces technology but runs in the client context instead. When you use JSX to define classes, these classes become new HTML elements that can be used like any other element. You write your page in JSX and it compiles down to regular JavaScript. The main idea behind ReactJS is to allow developers to create reactive programmable components than can be dropped into your HTML pages. It's really the View in the MVC.

Basically each component should be structured as follows

...

Info

title	Eureka Moment

Line 13 in the above code fragment explains a lot. Unlike traditional programming where each function call leads onto another function call, and the end of the chain of calls would yield a result. In this model, line 13 returns an object of type Square. But line 13 can be considered like a remember object/a future object, a Square is instantiated with a value in the 'i' variable, this value is passed to the Square constructor that looks like this

class Square extends React.Component {
   constructor(props)
   {
      super(props);
      this.state = {
      value: null
   }
}

So this line - <Square value={i}/> can be considered as performing a call like Square( i ). To access the passed parameter in the constructor you could write

class Square extends React.Component {
   constructor(props)
   {
      super(props);
      this.state = {
      value: props.value
   }
}

If you change line 13 to <Square value={i} index={i + 1}/>, you are now passing two parameters to the constructor Square(i, i + 1). To access these parameters in the constructor you would write

class Square extends React.Component {
   constructor(props)
   {
      super(props);
      this.state = {
      value: props.value,

idx : props.index

   }
}
Notice that each constructor parameter is available in the props object.  

The Square class now looks like this:

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button
        className="square"
        onClick={() => this.setState({value: 'X'})}
      >
        {this.state.value}
      </button>
    );
  }
}

The Board's renderSquare method will change to

renderSquare(i) {
    return <Square value={this.state.squares[i]} />;
  }

In the tic-tac-toe example, the state of the game (state of each square is being kept in the board even though each square maintains it's own state. The designer has decided for simplicity's sake it will be easier to keep the games state in the board rather than the square. Since this is a ReactJS learning exercise I would agree, this is not about OO design principles.

...

When you run this application you will get a runtime error, "TypeError: _this4.handleClick is not a function". We defined a lambda to a function that doesn't yet exist (something that couldn't happen in languages like C++, Java, C#, Object Pascal, etc. So let's add the method

Info

title	Code Sample

class Board extends React.Component {

...

 handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = 'X';
    this.setState({squares: squares});
  }

Versions Compared

Old Version 16

New Version Current

Key

Related articles