#1 Starten met React

Quick start

Om met mijn project te beginnen heb ik gebruik gemaakt van de create-react-app. Hierdoor krijg ik een template van react, waarin de beginstappen al zijn gedaan en ik mijn code aan kan toevoegen. Deze methode brengt ook veel onnodige bestanden met zich mee, zoals iconen/logo's en test bestanden die ik niet nodig ga hebben voor dit kleine project. Deze bestanden heb ik verwijderd zodat ik mijn project voor mezelf overzichtelijk houdt.

index.js en App.js

Mijn twee hoofd files zijn index en App.js. Met de index file render ik mijn data op de HTML pagina, zodat het te zien is in de browser. Dit is niet veel code, maar zonder deze code wordt er niets gerenderd en is er dus ook niets te zien. Bovenaan deze file wordt mijn App.js geïmporteerd, samen met een aantal andere dingen zoals wat styling, react en reactDOM.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

Vervolgens schrijf ik in mijn App.js de hoofdstructuur voor mijn HTML. Dit betekent dus p elementen en headings etc. Deze dingen worden allemaal gereturnd, en vervolgens gerenderd door mijn index.js. Ook bij deze file moet ik weer react importeren, en nog een CSS bestand. Het CSS bestand die ik gebruik is van een eerdere repo, en bevat alle CSS voor de hele pagina.

import React from 'react';
import Barchart from './charts/barchart';
import Mapchart from './charts/mapchart';
import './App.css';

function App() {

  return(
      <article>
        <section>
          <h1>Met een Hummer in de parkeergarage</h1>
          <p>intro</p>
        </section>
        <h2>Even een snel overzicht</h2>
        <Barchart />
        <p>conclusie barchart</p>
        <h2>In kaart gebracht</h2>
        <p>intro kaart</p>
        <Mapchart />
        <p>conclusie</p>
      </article>
  )
}

export default App;

In de return maak ik dus gebruik van JSX. Hiermee kan ik de HTML syntax gebruiken binnen mijn Javascript, componenten inladen en dingen dynamischer maken door middel van javascript toevoegen aan bijvoorbeeld een class. In het voorbeeld maak ik ook gebruik van verschillende componenten, zoals . Dit leg ik uit bij #2 Components.