mmt - een React project maken
Home

mmt - een React project maken

mmt - een React project maken

Vooraleer met de website te beginnen maken we een React app met de naam react-mmt.

Een nieuwe react app maken

  1. Zorg ervoor dat je openstaande Node.js servers afsluit met Ctrl-C.
  2. Vooraleer de create-react-app op te starten ga je naar de map waarin je het project wil maken.
    1. We gaan op Cloud9 een project maken met de naam react-mmt. En dat project plaatsen we in de root van onze workspace. Zorg er dus voor dat je in de root staat:
      jefinghelbrecht:~/workspace $
      In plaats van JefInghelbrecht zie je natuurlijk de naam van je eigen workspace.
    2. Lokaal plaatsen we de app in een map met de naam react-mmt.
  3. Om een create-react-app te maken, voer je de volgende instructie in je terminal uit (zorg ervoor dat je de laatste versie van Node hebt geïnstalleerd, zie Een React App maken):
    npx create-react-app react-mmt
    Meer info over npx: Introducing npx: an npm package runner
  4. Op Cloud9 moet je telkens opgeven dat je met de nieuwere versie wilt werken:
    nvm use 8
  5. Als de installatie goed verlopen is, ga dan naar de nieuw aangemaakte map en start het project:
    cd react-mmt
    npm start
  6. We maken onze eigen standaardtekst en kieperen de voorgeprogrammeerde code overboord. We behouden alleen:
    1. index.js
    2. index.css
  7. We deleten alle overige bestanden in de /src.
  8. In index.css gaan we onze eigen CSS plaatsen. Zelf mag je Bootstrap of om het even welk ander CSS framework gebruiken.
  9. Verwijder de verwijzingen naar serviceWorker in index.js. Delete de gemarkeerde lijnen:
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    
    ReactDOM.render(<App />, document.getElementById('root'));
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: http://bit.ly/CRA-PWA
    serviceWorker.unregister();
    
    

JI
2019-01-13 10:30:47