Tag Archives: Components

React.js components with embedded styles

You have probably already seen global CSS files with thousands of lines that may influence anything. Change is too dangerous so you just add new rules. To the point everything must be rewritten.

I love React’s ability to build reusable components. Write once, put anywhere you like. This rule does not apply just for JavaScript, it may apply for CSS too. Did you know that you can use css loader to autoprefix rules from CSS/SASS/LESS file? So every require of such file prepares class names that does not clash with anything else (like style__item___3dKqL).

That way you can prepare components that contains embedded styles that applies only for them. No complex CSS selectors are required – just use plain names:


At the same time you can import application wide constants using SASS so you do not lose ability to set colors, sizes, … in single place.

Usage in code is simple:


(btw. to avoid join operation you can use classnames lib)

Right now I use following:


module.exports = {};


const path = require('path')
const webpack = require('webpack')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'web-ui-bundle.js'
    module: {
        rules: [
                test: /\.scss$/,
                use: [
                        loader: 'style-loader'
                        loader: 'css-loader',
                        options: {
                            modules: true   //!!!!!! This enables modules
                            localIdentName: '[name]_[local]__[hash:base64:15]'
                        loader: 'postcss-loader',
                        options: {
                        loader: 'sass-loader'
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
    devServer: {
        contentBase: './',
        hot: true
    plugins: [
     new webpack.HotModuleReplacementPlugin()


    "name": "web-ui",
    "description": "",
    "version": "0.0.1",
    "dependencies": {
        "react": "15.6.1",
        "react-dom": "15.6.1"
    "devDependencies": {
        "webpack": "3.5.2",
        "babel-core": "6.25.0",
        "babel-loader": "7.1.1",
        "babel-preset-es2015": "6.24.1",
        "babel-preset-react": "6.24.1",
        "webpack-dev-server": "2.7.1",
        "style-loader": "0.18.2",
        "css-loader": "0.28.4",
        "postcss-loader": "2.0.6",
        "sass-loader": "6.0.6",
        "node-sass": "4.5.3"
    "scripts": {
        "build": "webpack",
        "devel": "webpack-dev-server --hot"
    "browserslist": ["defaults", "not ie < 11"]

React.js: Build your components catalog

When you design large information system UI it is important to stay uniform. Nobody likes when pages varies in appearance or behavior. Typically it is necessary to write UI/UX design manual that describes allowed tools and techniques.

I was thinking about ways how to prepare list of UI components. So we can pick component when creating new functionality and avoid writing new. I was considering Confluence but it would need extra effort to keep list of components up to date.

Then I got it: We can employ React’s ability to prepare reusable components and easily compose catalog. Here is our:


Catalog is embedded in application but visible only to developers. Every component is shown in typical situation (to have concise list) and it may be expanded (Date component above) to be seen in various configurations – error state, different input values, empty, …

We are using physics particles categories for components and each category has own section:

  • Quarks – simplest components that only use passed properties (Button, FormattedInput, …)
  • Atoms – components that call server API or are attached to forms or application state (ContextMenu, CurrencyInput)
  • Molecules – larger function blocks that contains application logic (UserForm, TasksList)
  • Pages – ok, this is not physics category 😉

Each level uses components from upper levels. And each level is harder to instantiate outside its real usage. According to my experience it is quite feasible to have Quarks and Atoms in catalog. I believe that MobX is helping here but I have no long term experience with Redux. Molecules depends too much on API and application data so it would be hard to mock it.

You can also think about catalog as mild form of test. You are testing that:

  1. You can reuse component, there are no hidden dependencies
  2. There is no clash among components when used together
  3. All components basically works