Adventures with react and webpack

I decided it would be useful to relearn¬†front-end web design/development. The big thing now is Javascript and various frameworks associated with it. I did not pick Angular, partly because of the schism between Angular 1.0 and Angular 2.0. “Schism” is a little harsh, but I don’t like how you have to pick a side to work with Angular and the people on the other side won’t help. It reminds me of the Python 2/3 split, but that’s slowly being healed.

Anyway, instead of Angular, I decided that Ember was the way to go. However, when I looked around, I did not see many Ember projects taking place. That’s my usual luck: given a choice in tech, I’ll pick the unpopular one.

I also started volunteering in an open source “collective”(?) for the presidential elections. I told them I had LAMP experience. They are interested in mobile experience. The first project I joined wanted React people. I did not know React, but I saw that it was popular, so I decided to learn it.

So, I’m learning React and React router, which seems necessary for SPAs. I decided to implement what I’ve learned in a little project for testing purposes. I have a group of friends that play board games. They like to get together over long weekends and play lots of games. Based on the game results, someone is declared that weekend’s winner and gets … a tournament cup. My thought was to build a React application that could track the tournament scoring.

So, I read a couple of React tutorials and I set up a new site following their model. My code almost matches theirs, but I can’t get it to load. I see that webpack can collect and load the files, so I include that. I (finally) get webpack working, after fixing many typos. Now I want to get a sample page working with bootstrap 3.

That turns out even more difficult. Fortunately, the collective had figured what to do, so I followed their config file and eventually made my file links to bootstrap work. Lots of additional stuff is required to get bootstrap to work properly.

  • babel: expected, since I’m using Javascript and webpack
  • style-loader and css-loader: What? Umm, OK. It works for the custom CSS file, but won’t load the bootstrap file properly
  • file-loader for the bootstrap glyphicons: Umm, OK.
  • url-loader for the woff2 and woff files: What are those?

It all works again, but wow, what a mess.

Advertisements