05-DOM-Loop.html

<!DOCTYPE html>
<html>
  <body>
    <div id="react-app">
		
	</div>

    <script src="https://cdn.jsdelivr.net/react/0.14.0/react.js"></script>
    <script src="https://cdn.jsdelivr.net/react/0.14.0/react-dom.js"></script>
	<script>
	
		class TableComponent extends React.Component {

			constructor(props) {
				super(props)

		    };

			render() {
				
				return (
					
					React.DOM.table({},
						React.DOM.thead({},
							React.DOM.tr({},
								React.DOM.td({},"ALICI KİM"),
								React.DOM.td({},"ALICI ADI"),
								React.DOM.td({},"TOPLAM BORCU")
							)
						),
						React.DOM.tbody({},
							this.props.customers.map(function(customer, i) {
								return (
									React.DOM.tr({key: i}, 
										React.DOM.td({},customer.customerId),
										React.DOM.td({},customer.customerName),
										React.DOM.td({},customer.totalDebit)
									)
								 );
							})
						)
					)
				);
			}
		}
		
		var customers=[
			{customerId:301,customerName:'Barış Manço',totalDebit:4300.0},
			{customerId:302,customerName:'Cem Karaca',totalDebit:3900.0},
			{customerId:303,customerName:'Fikret Kızılok',totalDebit:3250.0},
		];
		
		var rootElement =React.createElement(TableComponent,
			{customers:customers}
		);
		
		ReactDOM.render(rootElement, document.getElementById('react-app'));
	</script>
  </body>
  
</html>
Dosyayı İndir
05-DOM-Loop.html

Bu Sayfayı Paylaş:

Bu Sayfayı Paylaş:

İletişim Bilgileri

Takip Et
