...
| Code Block | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
import React from "react";
import ReactDOM from 'react-dom';
const state = {
dashboards: [
{id: 1, car: "BMW", driver: "Erik"},
{id: 2, car: "AUDI", driver: "Wijnand"},
{id: 3, car: "Porsche", driver: "Thomas"}
]
}
const {dashboards} = state;
const element =
<div>
<h1>Dashboards</h1>
<ul>
{dashboards.map((dashboards) => {
return <li> Auto: {`${dashboards.car}`} Coureur: {`${dashboards.driver}`} <button>kijk mee</button></li>
})}
</ul>
</div>
ReactDOM.render(element,document.getElementById("root")); |
Resultaat
jQuery
In tegenstelling to React kon ik over jQuery niet zoveel vinden. Er bestonden geen goeie duidelijke video's hoe ik een project moest opzetten met jQuery ook duurde het even tot ik het antwoord voor mijn oplossing had gevonden
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
|
...
| |||
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<title>prototype</title>
<script src="jquery.js" type ="text/javascript"></script>
</head>
<body>
<h1>Dashboard</h1>
<ul id="ul"></ul>
</body>
</html>
<script>
$(function(){
$.ajax({
type : 'GET',
url : 'dashboard.json',
async : false,
beforeSend : function(){/*loading*/},
dataType : 'json',
success : function(result){
let buffer="";
$.each(result, function(index, val){
for(let i=0; i < val.length; i++){
let item = val[i];
console.log(item.name);
buffer+=" <li>Auto: "+item.car+" Coureur: "+ item.driver+"</li><button>Kijk mee</button>";
}
$('ul').html(buffer);
});
}
});
});
</script> |
...
Hoe scoren de frameworks op de criteria
...