Page 3

How to get started quickly with React

This post explores 3 separate ways to get a React application up and running quickly. TL;DR To get start quickly with React, you have three choices; CodeSandbox Create React App Parcel.js How to get started with React using CodeSandbox CodeSandbox is one of the most useful tools on the web today. CodeSandbox enables you to forget all about the complexities of setting up a development environment and enables you to just start coding . CodeSandbox is truly a breath of fresh air and a pleasure to…

Continue reading

Build a React web app with Parcel.js lightning fast

I have been using Webpack for quite some time now, and I have found it to be slow, frustrating to configure and debug, tedious to change and upgrade (and do not even get me started on the documentation!). I have had the exact opposite experience with Parcel.js. I have found Parcel.js to be fast , easy to configure and the documentation has been excellent so far. Build a React app with Parcel.js from scratch We can create a React app from scratch with Parcel with minimal effort. To get…

Continue reading

Getting started with Webpack Dev Server

So far, our application writes out to the console, which is not terribly helpful. Let’s get something up and running in the browser before we configure our React code. To get our website up and running, we will need Webpack Dev Server, which is a simple HTTP server. We will also need a couple of plugins to make everything work properly. Start by creating an file in and add the following code; Now we need to configure Webpack to inject the path to our JavaScript bundle directly into the HTML…

Continue reading

How to configure SCSS modules for Webpack

Your website will look pretty plain without some styles. SCSS is a popular choice for styling and is fairly straightforward to configure. We will focus on SCSS modules and global SCSS, so let’s get started. Run the following command in your terminal to install Sass and related tooling; What are these packages for? provides binding for Node.js to LibSass, a Sass compiler. is a loader for Webpack for compiling SCSS/Sass files. injects our styles into our DOM. interprets and and resolves…

Continue reading

How to create a production ready Webpack config

We have seen the basics of a Webpack config, but let’s take a few steps to make the config more production ready and useful for development. First, we need to set a Webpack . We have touched on this a couple of times so far as part of this tutorial. The will determine if Webpack minifies/compresses our code, or not. This is important to get right because it makes a huge difference to the resulting bundle. Set the wrong , and you will not be able to debug your code in the browser, or worse…

Continue reading