JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m,sap.ui.commons"
				data-sap-ui-theme="sap_bluecrystal">
		</script>

		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
				sap.ui.localResources("learning");
				var view = sap.ui.view({id:"idfirst1", viewName:"learning.first", type:sap.ui.core.mvc.ViewType.JS});
				view.placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

JavaScript

var data = { firstName: "John",   
	             lastName: "Doe",   
	             birthday: 
               { 
               day: 01, month: 05, year: 1982 
               },   
	             address:[
               { 
               city: "Heidelberg" 
               }
               ],   
	             enabled: true };   
	    
	var oModel = new sap.ui.model.json.JSONModel();   
	// create JSON model instance  
	oModel.setData(data); // set the data for the model  
	sap.ui.getCore().setModel(oModel); // assign the model to the core var  

	//need more explanation here , please   
    var matrix = new sap.ui.commons.layout.MatrixLayout({
		
	});
	var oTxt = new sap.ui.commons.TextField("txtField", { value: "{/birthday/day}" });   // generic bind method bindProperty(control property, model property)   

	var oText1 = new sap.ui.commons.TextField({
		
	}).bindProperty("value","/address/0/city");
	
	matrix.createRow(oTxt);
	matrix.createRow(oText1);
matrix.placeAt("content");