Add advanced filtering to a React app using React Context API

27 January, 2019.

In the previous tutorial, we started building out our home page. We looked at React Context API, where we added some code to fetch data from our static web server, and then we used that data to build (and display) a list of properties that are currently available for sale. Next, we need to ensure that we are in-line with the specification set out by the CTO. The end-user must be able to filter the property listings by ‘price’, ‘postcode’ and ‘sort order’. The page must not reload, the changes…

Continue reading

Build a complete property listings page with React.js

26 January, 2019.

As promised, we will now get down to business and really start fleshing out our home page. This post is all about getting our hands dirty by spending time building components, getting our business logic in place, and generally getting some hands-on experience. The approach taken to building out a React application is the same approach you may take when building a real-world production ready application. Take your time, get a good cup of Earl Grey tea , this is going to be a long one. Note for…

Continue reading

How to add routing to a React app using @reach/router

25 January, 2019.

We are building a property listings website, called Premium Property Finder , using React. Our website is a Single Page Application (SPA), designed to load fast and dynamically update based on user interaction or network changes. Traditionally, a user navigates a website by clicking a link (or some other form of interaction) which redirects them to the next page. This process of navigating causes the entire next web-page (including all of its CSS, JavaScript etc) to be (re-)requested and (re…

Continue reading

How to export your React project from CodeSandbox to your desktop with Parcel.js

24 January, 2019.

CodeSandbox is great for getting up and running quickly with no setup. However, CodeSandbox is not usually how I choose to bootstrap my projects and typically the companies I work for do not use an approach like this either (maybe they should, but that is a different post!). You will find that a high percentage of companies today are using Webpack as their preferred front-end build tool. If you would like to learn more about Webpack, I have a comprehensive mini-series, starting with Webpack…

Continue reading

Get started quickly with React using CodeSandbox

23 January, 2019.

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

22 January, 2019.

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?

21 January, 2019.

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

03 January, 2019.

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

02 January, 2019.

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