1. Getting started 1.1 Fork the starter app The first step is to fork the starter application on Codesandbox. The starter is a slightly modified version of the completed sandbox from workshop 1. Make sure you are signed into Codesandbox and go to the following URL: https://codesandbox.io/s/context-and-hooks-starter-o8cb9z Click on the Fork button in the upper … Continue reading React context and custom Hooks tutorial
Author: Jonathan
Introduction to User-Centric UI Testing with React Testing Library
The React Testing Library, part of the @testing-library family, facilitates user-centric UI component testing. It emphasizes queries, event handling, user interaction, asynchronous actions, and debugging. With clear naming patterns for queries and methods like fireEvent and userEvent, it aligns testing with real user behavior. The waitFor method is useful for handling asynchronous actions.
React Context: When and How to Use It
What is Context? In a typical React application data flow is unidirectional, passed from parent to child. This can lead to an issue known as props drilling. Passing props from high level components down to low level ones creating repetitive code. > Context provides a way to pass data through the component tree without having … Continue reading React Context: When and How to Use It
Strategies for react directory structures
React Directory Structure There are several strategies when talking about structuring the codebase of a React application. Two common ones are: Group by file type (our current strategy) Group by feature Group by File Type This type of structure groups files based on their type and function. For example, all components are grouped together, all … Continue reading Strategies for react directory structures
React design patterns – Higher Order Components
What is a Higher Order Component (HOC) HOCs are a React design pattern for sharing abstracted logic and behavior. A HOC is a function that takes a component, wraps it with new functionality and returns the newly wrapped component. Benefits Code Reusability Avoid duplication and keep your code DRY by abstracting common functionality into HOCs. … Continue reading React design patterns – Higher Order Components
Getting Started with Functional Components in Codesandbox
1. Getting started 1.1 Fork the starter app The first step is to fork the starter application on Codesandbox. The starter has all the packages we will need already added and configured. Make sure you are signed into Codesandbox and go to the following URL: https://codesandbox.io/s/functional-components-intro-starter-3ivou?file=/src/App.js Click on the Fork button in the upper right … Continue reading Getting Started with Functional Components in Codesandbox
React Class vs Functional Components: A Complete Comparison
Class component import React from "react"; class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; this.handleIncrement = this.handleIncrement.bind(this); this.handleDecrement = this.handleDecrement.bind(this); } componentDidMount() { this.setState({ count: this.state.count + 1 }); } handleIncrement() { this.setState({ count: this.state.count + 1 }); } handleDecrement() { this.setState({ count: this.state.count - 1 }); } render() … Continue reading React Class vs Functional Components: A Complete Comparison
Useful Javascript Info everyone should know
Template literals ES6 introduced template literals which are similar to strings only surrounded with backticks instead of quotes. They allow embedded expressions within. Use ${} to interpolate expressions or values into a string. const name = 'Jonathan'; const greeting = `Hello ${name}`; const dontDoThis = 'Hello' + ' ' + name; console.log(greeting); > Hello Jonathan … Continue reading Useful Javascript Info everyone should know
Serving a React app from Nginx
I recently created a simple React app for running different tax calculations (still a work in progress) called Calc Mate and decided to deploy it on a Linode instance I have running Nginx. Create a new nginx site configuration file for the react app Create a new configuration file for your application. sudo vim /etc/nginx/sites-available/calc-mate … Continue reading Serving a React app from Nginx
p5.js Seven Digit Segment Clock
p5.js is an amazing JavaScript library that streamlines creating graphical applications in your browser. Learn more at https://p5js.org/ They also have an extremely useful online editor https://editor.p5js.org/ which I used for this example and the link to it will be below. The beautiful clock ResourceURLGithub source code for the displayhttps://github.com/jonathanmeaney/Seven_Segment_Display_Clockp5js editor version of displayhttps://editor.p5js.org/FugQueue/sketches/q8A2REallInspired by … Continue reading p5.js Seven Digit Segment Clock
Jonathan Meaney 
You must be logged in to post a comment.