React JS , provides ReactDOMServer object which enables to render components to static markup. Typically, it’s used on a Node server.

import ReactDOMServer from 'react-dom/server';

ReactDOMServer.renderToString(element)

Using this method we can generate HTML on the server and serve it to the browser. This allows for faster page loads and also allows search engines to crawl the page for SEO purposes.

References:

• ReactDOMServer
• Server-Side React Rendering
• How to Enable Server-Side Rendering for a React App

Minimal amount of changes in actual code

Webpack compiler can understand modules written as ES2015 modules, CommonJS or AMD. Existing code using define() function doesn’t need modification.

Migrating Require.js config to Webpack config

The first thing to do when converting from Require.js to Webpack is to take your whole Require.js configuration file (requirejs_config.js) and convert it into Webpack configuration file (webpack.config.js).

Module Path Resolution

Help Webpack to find your module files.

// Webpack
    {
        resolve: {
            modules: [
                'app/assets/javascripts',
                'app/assets/stylesheets'
            ],
        }
    }

NPM in place of Bower components

You can use NPM in place of Bower components , since we can configure easily in Webpack to load NPM dependencies

// Webpack
    {
        resolve: {
            modules: [
                'app/assets/javascripts',
                'app/assets/stylesheets',
                'node_modules'
            ],
        }
    }

Aliases

Migrate Require.js paths to webpack alias

// Require.js
    {
        paths: {
            'foundation-core': './foundation/js/foundation/foundation',
            'foundation-abide': './foundation/js/foundation/foundation.abide',
            'foundation-accordion': './foundation/js/foundation/foundation.accordion'
        }
    }

// Webpack
    {
        resolve: {
            alias: { 
                'foundation-core': 'foundation-sites/js/foundation/foundation',
                'foundation-abide': 'foundation-sites/js/foundation/foundation.abide',
                'foundation-accordion': 'foundation-sites/js/foundation/foundation.accordion'
            }
        }
    }

Shim

Require.js shim takes modules that are not AMD compatible and makes them compatible.

//Require.js
    {
        'shim': {
            'foundation-core': { 'deps': ['jquery'] },
            'foundation-abide': { deps: ['foundation-core'] }
        }
    }

//Webpack
    {
        resolve: {
            module: {
                rules: [{
                    test: /foundation-core/,
                    use: ['imports-loader?jquery']
                },
                {
                    test: /foundation-abide/,
                    use: ['imports-loader?foundation-core']
                }]
            }
        }
    }

References:

• From Require.js to Webpack - Part 2
• Migrating Gumroad from RequireJS to webpack
• Migration from Require.js to Webpack 2
• Migrate from RequireJS to webpack
• Shimming
• define() function
• WHY AMD?
• Resolve
• imports-loader

Webpack is module bundler for modern JavaScript applications.

A module bundler is a tool that takes pieces of JavaScript and their dependencies and bundles them into a single file, usually for use in the browser.

Entry

An entry point indicates which module webpack should use to begin building out its internal dependency graph.

Output

The output property tells webpack where to emit bundles it creates and how to name these files.

Loaders

Out of the box, webpack only understands JavaScript and JSON files. Loaders allow webpack to process other file types and convert them into valid modules that can be consumed by your application and added to the dependency graph.

Plugins

Plugins can be leveraged to perform a wide range of tasks like bundle optimization, asset management and injection of environment variables.

References:

• Concepts
• Let’s learn how module bundlers work and then write one ourselves

JPEG (Joint Photographic Experts Group)

JPEG image format are used by digital cameras to store photos. Because it uses lossy compression so cameras can store more photos on one camera card. Its useful for photographs but not for content like diagrams or charts which require sharpness.

• Mime type: image/jpeg
• File extensions: .jpg .jpeg .jpe .jif .jfif

GIF (Graphics Interchange Format)

GIF image format uses lossless compression. Its good for animation as well. This format is not used for photography because of limited number of colors.

• Mime type: image/gif
• File extensions: .gif

PNG (Portable Network Graphics)

PNG image format uses lossless or lossy compression. Supports higher color depth than GIF. For photographs not as good as JPEG because of larger file size. Good for images with text or line art as well.

• Mime type: image/png
• File extensions: .png

SVG (Scalable Vector Graphics)

SVG is a XML based vector graphics format. They are ideal for images that can be drawn accurately at any size.

• Mime type: image/svg+xml
• File extension: .svg

TIFF (Tagged Image File Format)

TIFF image format was created to store scanned photos. They are larger than images in other formats because of the metadata included. Also they are uncompressed.

• Mime type: image/tiff
• File extensions: .tif, .tiff

BMP (Bitmap)

BMP is most prevalent on Windows computers. They are uncompressed, so file sizes are larger than other formats.

• Mime type: image/bmp
• File extensions: .bmp

Choosing image format

• Photographs - JPEG
• Icons - SVG or PNG
• Screenshots - PNG or JPEG
• Diagrams, Charts - SVG or PNG

References:

• Image file type and format guide
• The 5 Types of Digital Image Files: TIFF, JPEG, GIF, PNG, and Raw Image Files, and When to Use Each One
• Understanding all the Different Image File Formats
• 10 Types of Image File Extensions and When to Use Them

“CSS in JS” refers to ideas on modularizing CSS , so it helps in maintaing large and medium scale applications easier.

React JS style

In React JS style attribute accepts a JavaScript object with camelCased properties.

<button style={
    { color: "blue", backgroundColor: "white" }
}>Submit</button>

Webpack css-loader and style-loader

The css-loader takes a CSS file and reads all dependencies and style-loader embeds the styles into markup.

// file name : app.css
.btn {
    color: white;
    background-color: black;
}

import './app.css';

function () {
    return (
        <button className="btn">Submit</button>
    );
}

CSS Modules

import styles from './app.css';

function () {
    return (
        <button className={styles.btn}>Submit</button>
    );
}

References:

• Why I Write CSS in JavaScript
• What actually is CSS-in-JS?
• Styling and CSS
• The Differing Perspectives on CSS-in-JS
• CSS in JS
• 9 CSS in JS Libraries you should Know in 2019
• An Introduction to CSS-in-JS: Examples, Pros, and Cons
• CSS Modules
• css-loader
• style-loader
• What are CSS Modules and why do we need them?
• How to configure CSS and CSS modules in webpack
• CSS Modules
• Styling and CSS
• Adding a Stylesheet
• Block, Element, Modifying Your JavaScript Components
• Getting Started with CSS Modules
• Four ways to style react components
• Modular CSS with React