Passing Functions to Components in ReactJS and passing new parameters

I try to use functional react components where I can, but something I've found conceptually confusing for a while now is passing a function to a component. This is confusion has been particularly apparent when using an external React library and I've been tasked to enhance a default component property with some additional feature which … Continue reading Passing Functions to Components in ReactJS and passing new parameters →

Testing a React app with Jest (Part 2)

There are a few other useful tricks that will help organise your testing that I feel worth mentioning and not immediately clear. Ideally when you are completing a number of tests on a single function you can group these tests under a single describe() statement. This provides another opportunity the add some description of what … Continue reading Testing a React app with Jest (Part 2) →

Testing a React app with Jest (Part 1)

This post is going to provide an introduction to the basics of Jest a javascript testing framework that is included in the Create-React-App, which if you haven't heard of is a great starting point for your new React App. Jest provides all the functionality required to set up unit tests for your javascript application. This … Continue reading Testing a React app with Jest (Part 1) →

Deploying a static webpage using GitHub pages

I've been working through a number of projects on FreeCodeCamp and on the project guidelines it suggests you can deploy your project whichever way you want. GitHub pages feature provides an extremely easy and most importantly free way to demo your hard work! Secondary to providing some actual live links that can be displayed on … Continue reading Deploying a static webpage using GitHub pages →

Controlling your stateless React components

This is a very short summary of React.memo that was introduced in React 16.6 in Oct 2018 and can be used as a wrapper around stateless functional components. Some examples demonstrating stateless functional components are below: import React from 'react'; //nameless default functional component export default (props) => { return <button disabled={props.buttonDisabled}>{props.text}</button> } //named functional … Continue reading Controlling your stateless React components →