# Installatie ### Inleiding Node.js is de JavaScript run-time omgeving. JavaScript draait op alle web browsers, maar met Node.js draait JavaScript ook als server. Node.js is een verzameling van tools. Het lijkt wat dat betreft op een framework. ### Installatie Installeer Node.JS [https://nodejs.org/en/download/](https://nodejs.org/en/download/) Maak nieuwe app en start Node.js ``` npx create-react-app cd npm start ``` Belangrijke files
package.jsonalle geïnstalleerde packages
.gitignorewelke files worden door github niet naar de repo gekopieerd
public/index.htmlstart <div id="root"></div>
source/index.jshier begint de React applicatie - root wordt vervangen door de React app die wordt gerenderd.
source/App.jsApp is de React component dat wordt geladen.
App.js is in JSX is combi HTML en JavaScript ### Clean set-up Haal nu alle bestanden weg uit de folder *public* en *src* zodat alleen de bestanden overblijven die in het onderstaande plaatje te zien zijn. [![image-1626261423055.png](https://www.roc.ovh/uploads/images/gallery/2021-07/scaled-1680-/image-1626261423055.png)](https://www.roc.ovh/uploads/images/gallery/2021-07/image-1626261423055.png) Verander nu de inhoud van de volgende bestanden. #### Index.html ```HTML React App
``` #### Index.js ```JavaScript import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render( , document.getElementById('root') ); ``` #### App.js ```JavaScript function App() { return (

Titel

); } export default App; ``` ### Start Dev Server Via VCS voer het volgende commando uit in een *terminal* (of gebruik CMD, maar ga dan wel naar de projectfolder). ``` npm start ``` ### Opdracht Als het goed is dan zie je een webpagina die er ongeveer zo uit ziet. [![image-1661518073202.png](https://www.roc.ovh/uploads/images/gallery/2022-08/scaled-1680-/image-1661518073202.png)](https://www.roc.ovh/uploads/images/gallery/2022-08/image-1661518073202.png)
##### Uitleg React start (net zoals ander web apps) met het laden van de index.html pagina. Door het React framework wordt ook het bestand *index.js* ingelezen. Deze index.js zorgt ervoor dat het bestand *App.js* wordt gerenderd (zeg maar "uitgevoerd") en wordt geplaatst in de index pagina in de div met het id "root". Kijk nog eens goed naar deze drie bestanden en probeer de uitleg te begrijpen. Als dat is gelukt dan kun je de opdracht maken.
### Opdracht Zorg ervoor dat de React app in plaats van "Titel" een welkomstboodschap laat zien waarin je naam is verwerkt, bijvoorbeeld: [![image-1661518406825.png](https://www.roc.ovh/uploads/images/gallery/2022-08/scaled-1680-/image-1661518406825.png)](https://www.roc.ovh/uploads/images/gallery/2022-08/image-1661518406825.png) ### Inleveren Een schermafdruk van de browser met jouw unieke welkomstboodschap. \--