Part two

Update: Part two is pretty much done. Part three will cover redux and production builds.

Other parts:

• Part 1 - Webpack, Babel, React, Router, ESLint
• Part 2 - SASS, More ES6 goodness (Static props, decorators, deconstruction…)
• Part 3 - Where to go from here

Adding SASS

We will use SASS loader for webpack, so let’s install it together with node-sass compiler, css and style loaders

npm install --save-dev style-loader css-loader sass-loader node-sass

Create scss folder in the app folder, and main app.scss file in it. This file will include all of the other scss files.

Now we need to add a loader to webpack config file.

Update, October 2017

I just released updated tutorial right here. So feel free to skip this one, and read a new one. It uses updated tools, and hopefully it will grow into a new series of webpack/react posts.

Update, March 2017

Webpack 2 is out, so this post is slowly becoming outdated. For webpack 2 - react boilerplate please check this post.

This is a living guide

This is the first part of the guide that will be changed over time. For now it covers Webpack, Babel (for ES6) and React with React Router.

Next parts will contain more stuff - static properties, decorators, SASS, development and production configs, immutables… Also redux part should be updated really soon.

So stay tuned!

Other parts:

• Part 1 - Webpack, Babel, React, Router, ESLint
• Part 2 - SASS, more ES6 goodness (Static props, decorators, deconstruction…)
• Part 3 - Where to go from here

Before we start

I’ll assume that you have a basic knowledge of the unix terminal, and that you have read what Webpack, Babel and React are.

Webpack

For a start, install node and npm from https://nodejs.org/en/.

Recently I lost my iPhone headphones. I didn’t care much, as they were almost three years old, and I had a brand new ones. But today, while getting ready for work, I found them in the pocket of the pants I washed about week ago.

I was sure they wouldn’t work, but guess what? They do! Probably the fact that they dried for days helped.

So I guees I have a spare pair of headphones now :)

Update, April 2019.

This time lightning connector headphones were washed. And dried. Plastic and cable warped, and I won’t be using them. But they are still workoing and can play music.

Another tech meetup is behind us, even more people came this time. As promised, we will keep them coming more often.

Miloš spoke first about learning in tech, and keeping up with it. My talk was about SPAs, and how hard they are.

For a current project I’m on, we needed both circular timer, and progress bar. Again, I wasn’t able to find small library to do that. But I found awesome answer on Stack Overflow, decided SVG is way to go, and wrote Sektor.

Sektor is a plain JavaScript library that draws circle sector (or an arc). Once it is drawn, you can change it’s angle and animate the change.

It works in every browser with SVG and requestAnimationFrane support (IE10+ and modern browsers). Check demo and docs.

I may use this for example how much better is to use requestAnimationFrame than setInterval. If you are bored, try it yourself, and you’ll see that animating using requestAnimationFrame is way smoother.

React component is coming soon as well. Cheers!