Set Up React App with WebPack and Babel

In this blog you will learn to set up a React Application: Using create-react-appUsing Webpack, Webpack Dev Server and Babel from scratch I am assuming that you have Node installed already on your system. Using create-react-app We will first install the create-react-app globally. Then we create a project using create-react-app command. npm install -g create-react-app create-react-app projectnamecd projectname npm run start … Continue reading Set Up React App with WebPack and Babel

Handle Images in React using Webpack

We need to install url-loader and file-loader html-webpack-plugin npm packages first npm install url-loader file-loader html-webpack-plugin Now add this configuration to your webpack.config.js const HtmlWebPackPlugin = require( 'html-webpack-plugin' ); const path = require( 'path' ); module.exports = { context: __dirname, entry: './src/index.js', output: { path: path.resolve( __dirname, 'dist' ), filename: 'main.js', }, devServer: { historyApiFallback: … Continue reading Handle Images in React using Webpack

Attributes and Components in Gutenberg Blocks | RichText | BlockControls | AlignmentToolbar

In the previous blog, we learned about how edit and save functions work. They describe the structure of the block’s appearance. However, they only returned simple paragraphs. In this blog, we will learn about how the block’s structure can be changed when the user changes a block State of a block: To achieve dynamic change in the block’s structure when … Continue reading Attributes and Components in Gutenberg Blocks | RichText | BlockControls | AlignmentToolbar