The tutorial tag contains articles which have step-by-step instructions on how to do a technical task.
This tutorial shows how to implement drag and drop using react-dnd. The official tutorial is a bit long. So, I created a simpler app to illustrate how to integrate react-dnd in your apps. There is a github repository for this tutorial.
There are two elements on which we write event handlers: the drag element and the drop element.…
Gatsby and NextJS are popular alternatives to create static websites using React. This tutorial shows how to work with NextJS. We want to take some pages written in markdown and convert them to static pages. Along the way, we will explore NextJS features.
The sample app is available in Netlify. It is a company website that offers development services.…
Gatsby and NextJS are popular alternatives to create static websites using React. This tutorial shows how to work with Gatsby: use CSS modules to style, add a new page, navigate between pages, create a custom layout, add a plugin, process markdown files, use GraphQL and create custom pages.
The sample app is available in Netlify. There is a Home page which has a background image and a link to Services page.…
Bar chart is one of the common chart types widely used in data visualisation. Most of you know about D3 and how D3 is an integral part of your toolset in data visualisation. However, D3 is not for everybody. It provides a low level API to create a SVG. Yes, all charts made in D3 are SVG elements. In this post, we will use D3 in our React app to create just another bar chart.…
The github repo, react-webpack, has the minimal scaffolding for a React web app with Webpack 4. The tutorial explains how the project was built.
Create a new project
yarn initInstall Webpack as devDependency.
yarn add webpack webpack-cli webpack-dev-server --devCreate Webpack configuration file:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',