06-DOM-Ajax.html
Dosyayı İndir
<!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({},"KATEGORİ KİM"),
React.DOM.td({},"KATEGORİ ADI"),
React.DOM.td({},"KATEGORİ ÖZETİ")
)
),
React.DOM.tbody({},
this.props.categories.map(function(category, i) {
return (
React.DOM.tr({key: i},
React.DOM.td({},category.categoryId),
React.DOM.td({},category.categoryName),
React.DOM.td({},category.categoryAbstract)
)
);
})
)
)
);
}
}
fetch('http://www.godoro.com/front-end/CategoryList.php')
.then(function(response){
return response.json();
})
.then(function(json){
var rootElement =React.createElement(TableComponent,{categories:json.categories});
ReactDOM.render(rootElement, document.getElementById('react-app'));
}
);
</script>
</body>
</html>
Dosyayı İndir 