React Tutorials — Nesting Elements 2

In this tutorial we will see a more complex example of nesting

Lets make a table, list of students displaying their name, age, class

var th1 = React.createElement(“th”,null,”Name”);
var th2 = React.createElement(“th”,null,”Age”);
var th3 = React.createElement(‘th’,null,”Class”);
var tr1 = React.createElement(“tr”,null,th1,th2,th3);
var td21 = React.createElement(“td”,null,”Pankaj”);
var td22 = React.createElement(“td”,null,”18");
var td23 = React.createElement(“td”,null,”12");
var tr2 = React.createElement(“tr”,null,td21,td22,td23);
var td31 = React.createElement(“td”,null,”Prasanth”);
var td32 = React.createElement(“td”,null,”8");
var td33 = React.createElement(“td”,null,”2");
var tr3 = React.createElement(“tr”,null,td31,td32,td33);
var table = React.createElement(“table”,null,tr1,tr2,tr3);
React.render(
table,
document.getElementById(‘example’)
);

There is nothing much to explain here. But you must be already feeling that the code is becoming too complex for very simple html. If we start building real world applications then our code will become too complex. Thats where JSX will come to our rescue. We will read more about JSX in the next tutorial.

View JsBin