Exercise: Use a framework
The single-page application in chapter07_spa (or chapter07_spa_layered) uses plain JavaScript:
-
It does not use any framework (e.g., React or Angular).
-
It combines JavaScript and HTML in a single HTML (the JavaScript code is not served separately by a
<script>element). -
It uses the
.innerTextproperty and direct DOM manipulation, rather than the binding features of more sophisticated frameworks.
Because the shopping list has only one feature, these are entirely appropriate decisions. However, these simple choices will limit how the application can grow in sophistication and incorporate new features.
For this exercise, reimplement the front-end using a front-end framework of your choice (e.g., React or Angular).
|
Tip
|
Browser security restrictions prevent front-end code hosted by one server from accessing an API hosted by a separate server. If this occurs, you will see CORS errors in the browser’s developer console. You can use proxying in create-react-app or Angular to forward API requests to the back-end server. Alternatively, you can modify the API server so that it serves the front-end code (i.e., use express.static(…) or res.sendFile(…) to serve the HTML and JavaScript of the presentation layer).
|