Eerste React applicatie

Create React App

In deze cursus gebruiken we de create-react-app om onze eerste applicatie op te zetten. Het is een starter kit aangeboden door Facebook om snel een React applicatie aan te maken. Het vereist geen configuratie en wordt aangeraden voor beginnende React gebruikers.

Voordat we kunnen werken met de create-react-app kijk je best ook nog na of je npx hebt geinstalleerd op jouw machine. Normaal wordt deze mee geinstalleerd met node en npm

Je kan dit nakijken door

npx --version

te doen.

npx laat toe om tooling te gebruiken zonder die eerst te installeren op jouw machine. Zo heb je altijd de laatste nieuwe versie van deze tool. Je zou eventueel deze ook kunnen installeren op jouw machine met npm install -g maar dan zou je zelf verantwoordelijk zijn voor het updaten van deze tool.

Nu we dit klaar hebben staan kunnen we eindelijk onze eerste react applicatie aanmaken door

npx create-react-app our-first-react-app --template typescript

uit te voeren.

We kunnen nu deze folder open doen in Visual Studio Code en eens naar de inhoud van het project kijken.

Hier merk je de volgende bestanden en folders in op:

• node_modules deze folder bevat alle packages die werden geïnstalleerd bij het runnen van het create-react-app commando. Alle packages die je zelf installeert met npm install zullen ook in deze folder terecht komen.

• package.json beschrijft welke dependencies (packages) er moeten geïnstalleerd worden voor deze applicatie uit te kunnen voeren. Het npm install commando zal deze dependencies dan installeren in de node_modules folder.

• .gitignore deze file bevat alle bestanden en folders die niet mogen toegevoegd worden aan je git repository. node_modules is hiervan een goed voorbeeld. Deze folder moet nooit mee in git geplaatst worden want deze folder met alle packages wordt aangemaakt door npm install uit te voeren.

• src bevat de eigenlijke bestanden die rechtstreeks te maken hebben met react. Hier zal jouw broncode in komen. Het belangrijkste bestand op dit moment is het App.tsx bestand. Daar zullen we eerst onze eerste react code schrijven. Later zullen we dit uiteraard opsplitsen in verschillende bestanden.

• public bevat het html bestand waarin de react applicatie zal getoond worden. Hier moet je meestal niets voor aanpassen want alle visuele componenten worden in react zelf gerendered. Deze folder bevat ook andere dingen zoals de favicon voor als je het icoontje wil veranderen van de web applicatie.

Je kan nu de applicatie opstarten door

npm start

uit te voeren in je terminal venster. Als alles in orde is zal je browser automatisch openen op de eerste en enige pagina van jouw webapplicatie:

De reden dat je npm start kan uitvoeren en dat al deze acties dan automatisch gebeuren hebben we te danken aan het volgende stuk in het package.json bestand:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

We gaan voorlopig nog niet verder op deze commando's in.

Je eerste component

Alle React applicaties zijn gebouwd uit verschillende React componenten. Componenten worden uitgedrukt in functies. Ze accepteren willekeurige invoerwaarden (deze noemen we “props”) en geven React elementen terug die beschrijven wat er op het scherm moet verschijnen. Met componenten splits je de UI in onafhankelijke, herbruikbare delen.

Het eerste component waar je altijd mee in aanraking zal komen kan je vinden in het src/App.tsx bestand. Deze zal er een beetje zoals het onderstaand bestand uitzien:

import React from 'react';
import logo from './logo.svg';
import './App.css';


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Tijdens het genereren van de code via de create-react-app is er gebruik gemaakt van het function keyword. Een component kan ook evengoed geschreven worden met de arrow notatie voor functies. Je mag zelf kiezen welke notatie je gebruikt. Een component met de arrow notatie zal er als volgt uit zien:

const App = () => {
    return {
        ...
    }
}

We zullen nu even het component herleiden tot de essentie door wat overbodige boilerplate code weg te halen. Zo bekomen we tot een heel eenvoudige Hello world applicatie:

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

We zien hier een aantal dingen:

• We zien hier eigenlijk gewoon een eenvoudige functie. We noemen deze in React geen functie maar een function component.

• Deze function component heeft tot nu toe geen parameters maar in verdere delen zullen we zien dat we ook parameters kunnen meegeven aan componenten aan de hand van properties (of props).

• Deze functie returned een HTML achtige syntax terug. Deze HTML achtige syntax noemen we JSX en zal het mogelijk maken om JavaScript en HTML eenvoudig te combineren.

Uiteraard kunnen we in een functional component ook meer doen dan HTML renderen. Boven de return kunnen we variabelen declareren en complexere logica gaan toevoegen aan onze componenten.

import React from 'react';

const App = () => {
  const title = "World";

  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

Willen we nu deze title gaan gebruiken in onze HTML achtige syntax gaan we gebruik maken van JSX. Zo kunnen we de output gaan mengen met javascript code. Als we de title variabele willen renderen tussen de h1 tags kunnen we deze als volgt toevoegen

import React from 'react';

const App = () => {
  const title = "World";

  return (
    <div>
      <h1>Hello {title}</h1>
    </div>
  );
}

export default App;

Je kan naast variabelen ook eender welke expressie tussen deze {} haakjes plaatsen. Bijvoorbeeld:

<h1>Hello {title.toUpperCase()}</h1>

of

<h1>1+1 = {1+1}</h1>

en je kan zelfs functies uitvoeren en het resultaat hiervan laten zien:

import React from 'react';

const getGreeting = () => {
  return "Hello World";
}

const App = () => {
  return (
    <div>
      <h1>{getGreeting()}</h1>
    </div>
  );
}

export default App;