JavaScript

The Practical React Developer: Learn By Doing Not-So-Mini-Series

The best way to learn is hands on. This not-so-mini-series will teach you all the basics of building a React Web application through hands-on practical exposure. Introducing ‘Property Finder’, a property listings website This tutorial will teach you, hands-on, all the best and most commonly used features of React and the tooling around it. See a preview of the finished website; What is included in this mini series? What is React, and why use it? How to set up your development environment for…

Continue reading

Get started quickly with React using CodeSandbox

To get up and running quickly developing a React web application, you can use CodeSandbox , a fantastic browser-based development environment. Head over to CodeSandbox and if you do not already have an account, I highly recommend creating one so that you can easily save your work and refer back to it later. We will create a couple of components and then migrate our code from CodeSandbox to our local machine in the next post in this series. Note for clarification as this is also a standalone…

Continue reading

How to set up your development environment for success

How you set up your development environment can be a very contentious topic, a religious argument in which there may not be one single unified answer, but rather many correct answers. In this post I will discuss exactly how I configure my coding environment. Throughout this post I dicuss tools like ESLint and Prettier several times. Should you like to learn about these tools in more detail, I have written a separate, more detailed, blog post on the topic. How I use ESLint and Prettier for a…

Continue reading

What is React.js, and why use it?

React is a tool for building dynamic and interactive user interfaces. React promotes building small pieces, called components , (which are often JavaScript functions or classes), that are assembled to form a UI. Notice that we have not used the word “web” or “page” here, because React itself is view-layer agnostic, meaning a separate view renderer is used to create a UI for the user to consume. React is not a framework, like Angular. React is an unopinionated library that, when combined with a…

Continue reading

How I use ESLint and Prettier for a consistent coding environment

I work independently, as part of small teams, and as part of teams that consist of hundreds of individuals. Many developers will have a different idea of how they want to format their code, and what standards they would like to adhere to. Some teams might not have any guidelines in place at all, which will often lead to preventable problems further down the road. Tooling today exists that can make enforcing coding style and standards a breeze. I just used the word enforcing , but tools like…

Continue reading

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

How to add Hot Module Reloading (HMR) to a React app

Before we can add Hot Module Reloading to our React project, we need some React code! Let’s do that first. Create a simple React application We are not trying to win any awards here, we only need to get React rendering out something so we can move on. This is not a tutorial about how to build a useful React website, after all. Start by installing React, and ReactDOM. Both are required to render a React browser-based web application. Note : These are runtime dependencies, so we use instead…

Continue reading

A bare bones React boilerplate, featuring Webpack 4, React, Redux, Jest, and Babel 7

I love template projects. In fact, I use them all the time. Template projects, seed projects, starter projects, whatever you want to call them, they are fantastic. Starter templates help you get up and running very quickly and can be very useful and powerful when learning something new. Many template projects I see around the web are bloated with every feature under the sun. Having a long list of features can be amazing, however, some projects have grown significantly… which can increase…

Continue reading

How to add SignalR to the telephone directory sample application

As part of a recent mini series we created a very simple telephone directory web page that showed some features of Bootstrap, KnockoutJS, jQuery, Web API and the Entity Framework. Just for fun, I figured it would be cool to add SignalR so that we could see how simple it is to add full duplex, real time communications to your website. The first parts of the mini series can be found here; /.net/create-a-telephone-directory-with-bootstrap-knockoutjs-jquery-web-api-and-entity-framework-part-1-of-…

Continue reading

Create a telephone directory with Bootstrap, KnockoutJS, jQuery, Web API and Entity Framework (Part 1 of 2)

I find that the best way to learn any new technology, or technology that are unfamiliar with, is to sit down and practice. The purpose of this very simple tutorial is to learn the basics of creating a single page website that can be used to capture peoples names and telephone numbers. By following this tutorial you will learn; How to use Bootstrap to create a simple UI How to use KnockoutJS for binding to/displaying of your data How to use jQuery to asynchronously retrieve data from a web…

Continue reading