What is JSX

Facebook and the React team invented the JSX syntax. It is an XML syntax to write HTML-like DOM structure. The JSX in JavaScript is transformed into createElement function.

In JSX, everything is JavaScript.

var heading = <h1>Hello JSX</h1>;

function render() {
  let name = "JSX";
  let data = [1,2,3,4,5];
  return <App>
    <p>This is {name}</p>
      <List>
        {data.map( item => {
          <ListItem key={item}>
            content for {item}
          </ListItem>
        })}
      </List>
    </App>
}

JSX is a sugar syntax of the createElement function, which takes 3 or more parameters to create a structural tree of elements. The tree created is very similar to DOM tree.

var heading = React.createElement("h1", null, "Hello JSX");

function render() {
  var name = "JSX";
  var data = [1, 2, 3, 4, 5];
  return React.createElement(App, null, 
    React.createElement("p", null, "This is ", name),
    React.createElement(List, null, data.map(function (item) {
      React.createElement(ListItem, {
        key: item
      }, "content for ", item);
    }))
  );
}

Let’s take a look at the parameters of the createElement function.

1. The first parameter is the tag name.
2. The second parameter contains the attributes of the tag if any.
3. The third parameter and so on is the content of the element.

We can use argument list to fetch the 3rd...nth argument to compose the content.

developer.mozilla.org/en...nts

Here are more JSX tutorials from FreeCodeCamp and React.

freecodecamp.org/news/...tion/

reactjs.org/docs/in...jsx.html