...
Om te kijken welke front-end framework het fijnst is maak ik met elke framework een dynamische lijst op basis van JSON.
React
Het maken van de react prototype ging erg gemakkelijk. Ik heb react nog nooit eerder gebruikt en heb de eerste beste video gebruikt om mijn react project op te zetten. Van daaruit heb ik verder gezocht naar een dynamische lijst en kon ik ook gelijk weer de eerste video gebruiken. Het maken van de prototype ging dus zonder problemen en werkte eigenlijk meteen.
Code
| 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
Hoe scoren de frameworks op de criteria
...