Keep class based components and add function component version in detail.

[0xprincedev]

I updated class based components to functional components for question 83: Is it possible to use react without JSX?

    const Greeting = ({ message }) => {
      return <div>Hello {message}</div>;
    };

    ReactDOM.render(
      <Greeting message="World" />,
      document.getElementById("root")
    );
    ```

    You can write the same code without JSX as below,

    ```javascript
    const Greeting = ({ message }) => {
      return React.createElement("div", null, `Hello ${message}`);
    };

    ReactDOM.render(
      React.createElement(Greeting, { message: "World" }, null),
      document.getElementById("root")
    );
    ```

[0xprincedev]

I updated after reading your feedback about keeping class based components and add function component version in detail.

class Greeting extends React.Component {
  render() {
    return <div>Hello {this.props.message}</div>;
  }
}

ReactDOM.render(
  <Greeting message="World" />,
  document.getElementById("root")
);

Functional component version

const Greeting = ({ message }) => {
  return <div>Hello {message}</div>;
};

ReactDOM.render(
  <Greeting message="World" />,
  document.getElementById("root")
);

You can write the same code without JSX as below,

class Greeting extends React.Component {
  render() {
    return React.createElement("div", null, `Hello ${this.props.message}`);
  }
}

ReactDOM.render(
  React.createElement(Greeting, { message: "World" }, null),
  document.getElementById("root")
);

Functional component version

const Greeting = ({ message }) => {
  return React.createElement("div", null, `Hello ${message}`);
};

ReactDOM.render(
  React.createElement(Greeting, { message: "World" }, null),
  document.getElementById("root")
);

[0xprincedev]

Could you please review this PR? @sudheerj

[sudheerj]

@0xprincedev Those are legacy questions. That's why I used the same class component.