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
Tag: javascript
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
Basic React Component Structure and Concepts
This post is just a quick overview of some of the basics of React development, shedding light on component basics and some of the technologies and terms used in React development. You can think of a React component as a piece of the UI in your application. A User Interface can be broken into small, … Continue reading Basic React Component Structure and Concepts
Basic Brunch Example
Setting up a new React app with correct dependencies and tools can be a pain, and sometimes it seems like getting things set up is the hardest part! Anything that can can make this simpler is a godsend and thats where Brunch comes in. If you want a quick overview of React I have a … Continue reading Basic Brunch Example
Jonathan Meaney 
You must be logged in to post a comment.