CODEWITHSUNDEEP
javascriptreactjs
slindsey3000
slindsey3000

Reputation: 4269

How does render work in ReactJS with those HTML tags being "returned"

In React code I see return (<form> .. </form>); with HTML inside... is this valid Javascript? Is it somehow converted to a string or something?

I am learning Javascript right now and certainly have some gaps. This puzzles me how this is done though!

var AddTodoComponent = React.createClass({
  render: function () {
    return (
      <form>
        <input type="text" disabled={AppStore.isSaving()}/>
      </form>
    );
  }
});

Upvotes: 1

Views: 79

Answers (1)

mejdev
mejdev

Reputation: 3758

This syntax is called JSX. It is not normally valid JavaScript in the sense that your browser will probably not pick it up, but with a transpiler you can achieve proper JavaScript.

In the link above, you'll also see how to write valid JavaScript right off the bat, avoiding the JSX syntax.(which is what the transpiler would produce).

The following sample is from Facebook's JSX in Depth guide linked above

var Nav, Profile;
// Input (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// Output (JS):
var app = React.createElement(
  Nav,
  {color:"blue"},
  React.createElement(Profile, null, "click")
);

As you can see, in the output section, React defines a method which performs the render for you, React.createElement

Upvotes: 6

Related Questions