Styling TodoMVC Application

Styling Approach

Traditional pattern in organizing web pages was to split them up into markup (HTML), styling (CSS) and logic (JavaScript) files. With React, there has been a change in that mindset. The idea is to push styling to the component level. The best practices are still being figured out, but different patterns exist.

We will be using one of the available libraries called Radium.

What is Radium?

Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.

Radium unlocks the power of React & inline styling by enabling support for CSS pseudo selectors, media queries, vendor-prefixing, and much more through a simple interface.

-- Radium website

Prerequisites

First, we will have to install some additional libraries to our project.

Let's make the following changes:

diff --git a/package.json b/package.json
index ab8b985..ea783a3 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
   "dependencies": {
     "express": "^4.15.4",
     "immutable": "^3.8.1",
+    "radium": "^0.19.4",
     "react": "^15.6.1",
     "react-redux": "^5.0.5",
     "redux": "^3.7.2",
@@ -45,6 +46,8 @@
     "babel-core": "^6.25.0",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.1.1",
+    "babel-plugin-transform-decorators": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
(END)

diff --git a/.babelrc b/.babelrc
index 9b7d435..90ff9fc 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015", "stage-0", "react"]
+  "presets": ["es2015", "stage-0", "react"],
+  "plugins": ["transform-decorators-legacy"]
 }
(END)

For styling to work, we'll need to annotate our classes using @Radium decorator, and for that we need decorators plugins.

Let's now install the new dependencies:

$ npm install

And commit the changes:

$ git add .
$ git commit -m 'added Radium and decorators'