Project progress and something I like/hate of ReactJS

Actually I have finished the backend API for a while. Instead of using Django, I chose Flask because I don’t need the model in Django. There are so much steps you need to do a simple thing in Django. With Flask, I write an api and it’s done. Of course Django is more mature and has more features but I don’t need them now.

The problem is frontend because I am not a frontend developer, to say it precisely, I don’t do much html/css/javascript stuff. Anyway, I don’t want to use AngularJS ( which have experience with ) because it’s a full blown framework with its own MVC paradigm. I just want a simple web page which show two textbox and a button. So I chose React and had to go through the tutorial.

For some reason, I kinda hate it. I like it for the component idea and I don’t have clutter up my html with jsp/php whatever, I just put everything inside a .js file. However, during the tutorial, I found something which made me nausea.

Function and ECMA6 class

First of all, it’s the choice between using a function or a ECMA6 class to describe a component. In the official documentation , there are many examples of function AND ECMA6 class appear together and both of them are Component of React. For instance:

function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>The water would boil.</p>;
  }
  return <p>The water would not boil.</p>;
}
class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }

  handleChange(e) {
    this.setState({temperature: e.target.value});
  }

  render() {
    const temperature = this.state.temperature;
    return (
      <fieldset>
        <legend>Enter temperature in Celsius:</legend>
        <input
          value={temperature}
          onChange={this.handleChange} />
        <BoilingVerdict
          celsius={parseFloat(temperature)} />
      </fieldset>
    );
  }
}

It make sense with the class way to make a Component. It doesn’t make much sense for me with the Functional way. In my paradigm, I believe there should be only ONE way to do the same thing. It is confusing to see a function there but it’s not a real function. Yes it does return something but it serve the purpose like a Class. I think they should change all of them to Class instead of using function for Component.

States and Props

Second, there are difference between state and props. It’s confusing in the example because they introduce state first with an working example, and later told me to put it away and replace it with props. In additon, they were used in the same way: “this.state.someThing” and “this.props.someThing” and I think it’s confusing for beginner. I assume it’s like fields of super class in Java but it has extra work to pass the state of super class to subclass. We could do it cleaner with Java:

package me.rayentwickler.main;

public class TestSuperClass {
private String generalPropertyA;

public TestSuperClass(String generalPropertyA){
this.generalPropertyA = generalPropertyA;
}
public String getGeneralPropertyA() {
return generalPropertyA;
}

public void setGeneralPropertyA(String generalPropertyA) {
this.generalPropertyA = generalPropertyA;
}

}

package me.rayentwickler.main;

public class TestSubClass extends TestSuperClass {

    public TestSubClass(String generalPropertyA){
super(generalPropertyA);
}
public static void main(String[] args){
TestSubClass myInstance = new TestSubClass(“ABC”);
System.out.println(myInstance.getGeneralPropertyA());
}
}

In Java, if two class have ancestor/child relationship, I don’t have to tell Java that what kind of fields does the ancestor have. But it ReactJS, it seems I have to do a lot of boilerplate code!

 

Props are Read-Only, but we could change it by setState()

React said it provide a one-way data flow to make the world safer, so props are read-only. However, because the mother component still to access all the states of its children, we need to “Lift the state up” so that every state are stored in the top most Component and the state are passed down to children like a waterfall ( The real nature waterfall, not SDLC ). However, usually we want to accept user input and change the state which is props in this case, but props are read-only! What now? Well, ReactJS provided a way to call upper level component’s function, and in the function it called setState()! Since state could be modified, and after each update, render() would be call and states are passed to children again with new values. Seriously, it sounds like a loophole in its paradigm.

Leave a Reply

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