Een react-app analyseren en voorbereiden

Structuur

Als je de projectstructuur bekijkt, ziet je de /public en de /src mappen, samen met de standaard node_modules, .gitignore, README.md en package.json bestanden.

In /public staat voor ons een belangrijk bestand met de naam index.html, wat goed lijkt op het statische index.html bestand dat we eerder hebben gemaakt. Maar er staat alleen een root-div in. Nu worden er geen bibliotheken of scripts geladen. De map /src bevat al onze React-code.

Om te zien hoe de omgeving automatisch je React-code compileert en bijwerkt, wijzig je de regel die in het geel is gemarkeerd:

import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
         </p>
      </div>
    );
  }
}

export default App;

En je vervang die door:

We zijn begonnen met React en hebben <code>src/App.js</code> gewijzigd en opnieuw geladen.

Laad de pagina opnieuw in je browser (op Cloud9: http://localhost:8080/) en je krijgt het volgende:

Voorbereiding

1. We maken onze eigen standaardtekst en kieperen de voorgeprogrammeerde code overboord. We behouden alleen:
   1. index.js
   2. index.css
2. In index.css plakken we de Primitive CSS van Tania Rascia. Je kan dat vervangen door je eigen CSS of door Bootstrap of om het even welk ander CSS framework.
3. In index.js importeren we React, ReactDOM en het CSS bestand:

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

4. We deleten alle overige bestanden in de /src map te deleten.
5. We gaan de app-component, die we in React op een statische HTML pagina, opnieuw maken. Daar hadden we een <h1>, maar nu voegen we ook een div-element toe met een klasse. Zoals je kan zien gebruiken we className in plaats van class. Dit is een eerste aanwijzing dat de code, die hier wordt geschreven, JavaScript is, en niet echt HTML:

   class App extends Component {
       render() {
           return (
               <div className="App">
                   <h1>Een React App maken</h1>
               </div>
           );
       }
   }

6. Ten slotte geven we de app als voorheen in de root weer:

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

7. Dit is onze volledige index.js. Deze keer laden we de component als een eigenschap van React, dus we hoeven niet langer over te erven van React.Component:

   import React, { Component } from 'react';
   import ReactDOM from 'react-dom';
   import './index.css';
   
   class App extends Component {
       render() {
           return (
               <div className="App">
                   <h1>Een React App maken</h1>
               </div>
           );
       }
   }
   
   ReactDOM.render(<App />, document.getElementById('root'));
   

8. Als je de pagina in de browser laadt, krijg je het volgende: