Component composition is where a more “specific” component renders a more “generic” one and configures it with props.

function Button(props) {
    return (
        <button>{props.label}</button>
    )
}

function SignupButton() {
    return (
        <Button label="Signup"/>
    )
}

Higher-Order Components

A higher-order component is a function that takes a component and returns a new component. It composes the original component by wrapping it in a container component. Its a pure function with zero side-effects. The wrapped component receives all the props of the container, along with any new props from the container comopnent. HOCs are similar to pattern called “container components”. Container components are part of a strategy of separating responsibility between high-level and low-level concerns. Containers manage things like subscriptions and state and pass props to components that handle things like rendering UI. HOCs add features to a component. They shouldn’t drastically alter its contract. It’s expected that the component returned from a HOC has a similar interface to the wrapped component.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

References:

• Higher-Order Components
• Composition vs Inheritance

Bundle

Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.

Chunk

Bundles are composed out of chunks. Typically chunks directly correspond with the output bundles. However, there are some configurations that don’t yield one-to-one relationship.

References:

• Glossary
• What are module, chunk and bundle in webpack?

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