Loading
02 Jun 2019

821

1028

58

Building WordPress Plugins with React.js

WordPress Development by Digital Apps

Let build UI for our WordPress Plugin with ReactJS.

First we need to generate a package.json file. Open your terminal and run:

>npm init

Once the package.json has been generated, we can begin installing our dependencies.

Run these commands sequentially:

>npm install --save react
>npm install --save react-dom

Before React code can run in the browser, it must go through a transformation by compiling JSX into vanilla JavaScript.

Installing Babel

We are installing babel as a dev dependency:

>npm install --save-dev babel-core

We are also required to install two babel-related modules, named babel-loader and babel-preset-react.

>npm install --save-dev babel-loader
>npm install --save-dev babel-preset-react

All done.

Configuration

Create a file .babelrc and add { presets: [‘react’] }

Webpack

Lastly we need to install webpack and two modules webpack-dev-server and html-webpack-plugin.

>npm install --save-dev webpack
>npm install --save-dev webpack-dev-server
>npm install --save-dev html-webpack-plugin

Configure webpack

Create a file webpack.config.js

module.exports = {
    entry: __dirname + '/app/index.js',
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    output:  {
        filename: 'wp-global-site-tag-admin.js',
        path: __dirname + '/build'
    }
};