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
- Zorg ervoor dat je openstaande Node.js servers afsluit met Ctrl-C.
- Vooraleer de create-react-app op te starten ga je naar de map waarin je het project wil maken.
- 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. - Lokaal plaatsen we de app in een map met de naam react-mmt.
- 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:
- 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 - Op Cloud9 moet je telkens opgeven dat je met de nieuwere versie wilt werken:
nvm use 8
- Als de installatie goed verlopen is, ga dan naar de nieuw aangemaakte map en start het project:
cd react-mmt
npm start - We maken onze eigen standaardtekst en kieperen de voorgeprogrammeerde code overboord. We behouden alleen:
- index.js
- index.css
- We deleten alle overige bestanden in de /src.
- In index.css gaan we onze eigen CSS plaatsen. Zelf mag je Bootstrap of om het even welk ander CSS framework gebruiken.
- 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();
2019-01-13 10:30:47