React en Webpack worden steeds populairder en ik vond het daarom interessant om eens een start te maken met mijn eigen leerweg in deze richting. Ik liep tegen aardig wat problemen aan bij diverse tutorials, dus ik wilde dit een beknopte handleiding schrijven voor iedereen die hier ook graag meer mee wilt doen.

Node.js & NPM installeren

Voor de zekerheid begin ik bij de basis, namelijk: Node.js en NPM. Node.js is een Javascript-omgeving die je gebruikt voor het draaien van je Javascript-applicaties. Daarbij hoort een zogenaamde 'package manager', npm (node package manager :)). Deze zorgt ervoor dat je met veel eenvoud allerlei soorten uitbreidingen kan doen via extra 'node modules'. Een voorbeeld hiervan is React.

Maar laten we aan de slag gaan! Ik ga er voor het gemak even vanuit dat je Ubuntu gebruikt. 

  1. Volg de laatste download-instructies voor Node op: https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions. Op het moment van dit artikel volg je daarbij de volgende commands: 

 

$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
$ sudo apt-get install -y nodejs

 2. Daarna moeten we nog NPM updaten voor de zekerheid. Dit kan via een simpele command (docs):

$ npm install npm -g

En daarmee hebben we de basis gelegd! Op naar het initialiseren van ons eerste project.

Eerste React/Webpack project opzetten

Hier zijn allerlei tutorials voor te vinden, maar voor mezelf vond ik het handig om ter referentie het hele plaatje te schetsen, van begin tot eind. React vind ik zelf een interessante taal, omdat ik nog weinig kaas van Javascript heb gegeten, maar wel zie wat voor mooie asynchrone acties je ermee uit kunt voeren :), zoals to-do applicaties, sociale netwerken et cetera!

Webpack is zijn nieuwste partner in crime, aangezien deze al je projectbestanden en afhankelijkheden netjes kan bundelen in een bestand, waardoor de browser geen eindeloze requests naar de server hoeft te sturen en je toch netjes te code kunt afsplitsen. 

Op naar de opzet!

1. Start binnen je develop-omgeving (bijv. /var/www/html/) een nieuwe project-folder, 'react-app'. 

$ cd /var/www/html/
$ mkdir react-app

2. Open je nieuwe folder, en initialiseer dit nieuwe 'node-project' via de command line:

$ cd react-app
$ npm init -y

3. Dit maakt een package.json bestand aan in je huidige folder (react-app), die de package manager gebruikt voor het automatisch inladen van andere node modules. Dat is precies wat we nu willen gaan doen. Tijd voor de basisbestanden van React en Webpack.

$ npm install --save react react-dom
$ npm install --save-dev babel-preset-loader babel-preset-es2015 babel-loader
$ npm install --save-dev webpack
$ npm install webpack -g

Babel zorgt ervoor dat je een gebruiksvriendelijke Javascript markup kunt gebruiken binnen je React bestanden. Dit is een combinatie van HTML en Javascript. Webpack installeren we zowel lokaal als globaal, zodat we een webpack commando hebben dat we altijd aan kunnen roepen en ons lokale project ook gebruik kan maken van Webpack. 

4. Om alles aan elkaar te lijmen hebben we nog een config-bestand nodig voor Webpack, zodat deze weet waar we welke bestanden gaan plaatsen en hoe deze vervolgens automatisch met elkaar gebundeld kunnen worden. Sla dit bestand op onder de naam 'webpack.config.js'. Zelf gebruik ik deze inhoud hiervoor:

var config = {
  context: __dirname + "/app",
  entry: "./main.js",

  output: {
    filename: "bundle.js",
    path: __dirname + "/dist",
  },
   module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ],
  },
};
module.exports = config;

5. Als aanvulling hierop moeten we alvast een aantal bestanden gaan aanmaken. Laten we starten met twee nieuwe folders.

$ mkdir app
$ mkdir dist

De '/app' gebruiken we voor ons entry-script (start van de applicatie) en de overige scripts, '/dist' gebruiken we voor de output, zoals onze index.html met daarin een aantal basis includes en de allerbelangrijkste van allemaal: bundle.js. Deze bundle.js is afkomstig van Webpack, die alle afhankelijkheden voor ons centraliseert in deze Javascript-bundel. 

6. Tijd voor de implementatie-bestanden! Maak eerst de volgende index.html aan en sla deze op in /dist:

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React Webpack Tutorial!</title>
  </head>
  <body>
    <div id="content"></div>
    <script src="bundle.js"></script>
  </body>
</html>

7. Start een simpel Javascript-bestandje dat we later ter illustratie kunnen gebruiken om automatisch te bundelen. Sla de volgende code op in 'import.js' in de folder /app:

var cats = ['roze panter', 'marsupilami', 'topcat'];
module.exports = cats;

8. Maak vervolgens onze belangrijkste bestand aan, de entry-point van de applicatie, main.js (ook in /app) met deze inhoud:

var React = require('react');
var ReactDOM = require('react-dom');
var cats = require('./import.js');

var Content = React.createClass({
  render: function() {
    return (
      <div>
        <b>Woohoo</b>, you are now ready to implement your client side application! Enjoy :-)
      </div>
    );
  }
});
console.log(cats);
ReactDOM.render(<Content />, document.getElementById('content'));

Je ziet hier ook al een variabele uit ons eerdere scriptje staan, import.js. Deze gaan we zometeen bundelen, zodat het allemaal blijft werken.

9. De laatste stap! Tijd om alle magie te laten werken. Ga terug naar de terminal en activeer webpack:

$ webpack --watch

Watch zorgt ervoor dat de server blijft luisteren naar veranderingen. Je kunt straks dus wijzigingen doorvoeren en opslaan en dan worden deze automatisch in de nieuwe bundel verwerkt en getoond in de browser.

10. Open je lokale omgeving (vaak localhost), en ga naar /react-app/dist/index.html en voila! Als het goed is zie je daar de welkomst 'Woohoo' staan! Open daarna je browser console en daar zie je als het goed is onze array staan met de drie katten :). Bundeling succesvol!  

Conclusie

Ik hoop dat de referentie hierboven kan helpen bij het opzetten van de pure basis van een nieuw React/Webpack project. Er is nog veel meer te leren en ontdekken over React en ik sta zelf ook pas aan het begin. Verdere uitleg over React zelf en de syntax, mogelijkheden vind je op veel betere plekken dan hier.

Verder te lezen:

Officieel startpunt: https://facebook.github.io/react/

Engelse React/Webpack basis (mijn bron): http://jansoren.github.io/react-webpack-tutorial/ 

Basisbeginselen React met leuke oefeningen: http://buildwithreact.com/