React

Do you put watch value into state for react-hook-form?

Do you put watch value into state for react-hook-form?

Learn why you don't need to add the returned value from the watch function in react-hook-form into your local state.

Do not define components during render

Do not define components during render

Learn what the sonar lint message "Do not define components during render" means. Learn how to fix it and why you should

Your first React component

Your first React component

Learn how to build your First React Component. Learn how a React component encapsulates it's state and logic for reusability

Understanding React’s Virtual DOM: A Key to Efficiency in Web Development

Understanding React’s Virtual DOM: A Key to Efficiency in Web Development

Learn about React's Virtual DOM. Read about why the virtual DOM is so important to understand when learning React development

21 Essential Tips Every React Developer Should Know

21 Essential Tips Every React Developer Should Know

Learn the top 21 essential tips that every React developer should know. Make sure your apps are high quality with these tips

Using the JavaScript Map Function to Iterate Arrays in React

Using the JavaScript Map Function to Iterate Arrays in React

Learn how to iterate arrays using the JavaScript map function in React applications. Understand why it is useful and get comfortable using it.

No need to import React from 17

No need to import React from 17

React 17 comes with the benefit of not needing to import react into each source file. Learn why this is and where you still need to import it

Creating a List of Objects and Displaying Them in React

Creating a List of Objects and Displaying Them in React

Learn how to create a list and display it in a React application. Walk through a very simple example showing the minimum code required.

Delete Items from state array in React

Delete Items from state array in React

Learn how to delete items from state array in React. Learn how to use the filter method to not alter you state array.

Adding Items To A List In React

Adding Items To A List In React

Learn how to add items to collections/lists in React. Make sure that you are using state the right way in React.

Creating Lists in React: A Simple Guide

Creating Lists in React: A Simple Guide

Learn how to create basic lists in React. See how to construct a list using the Javascript map function and what is rendered as HTML

Should You Learn JavaScript and CSS Before React?

Should You Learn JavaScript and CSS Before React?

Should you learn JavaScript and CSS Before React? You don't need to, but it certainly will help. Learn the reasons why here!

React State Management: A Comprehensive Guide

React State Management: A Comprehensive Guide

What is the state initializer pattern?

What is the state initializer pattern?

Learn about the state initializer pattern in React. Examine a brief example showing how the pattern can be put into practice.

Understanding the State Hook

Understanding the State Hook

Learn about the React useState State hook. Take a brief look at how useState was implemented in the playing card

A Comprehensive Guide to Props in React

A Comprehensive Guide to Props in React

Learn about React props. Get a high level overview as to what they are and how are they used in React to build applications.

Incorrect use of useEffect Example

Incorrect use of useEffect Example

Learn by example how to fix an incorrect use of useEffect. Following on from my previous playing card component we refactor away from useEffect.

React Components Explained

React Components Explained

Learn what a React Component is, how it fits into React application architecture and how you should be using them

The Importance of Keys in React Lists

The Importance of Keys in React Lists

Learn about the importance of Keys in React Lists and collections. Learn what they are and why they need to be used

JavaScript Hydration: A Brief Overview

JavaScript Hydration: A Brief Overview

Learn about JavaScript hydration and what it means to React developers? Get a short, but informative idea of the concept of hydration.

React Context Walkthrough

React Context Walkthrough

Simplify state management in React with React Context. Learn how to create, access, and update context data efficiently.

A Quick Guide to useDebugValue Hook

A Quick Guide to useDebugValue Hook

Learn how to use the hook useDebugValue to quickly show important information about the state of your custom hooks

Understanding React Fiber

Understanding React Fiber

Learn how React Fiber's enhances performance. Including synchronous rendering, prioritization & time slicing for seamless user experiences.

Fixing an NPM sub-dependency issue

Fixing an NPM sub-dependency issue

Learn how I resolved a critical NPM dependency alert firsthand, gaining insights on my process of tackling high severity issues

What is Props Drilling?

What is Props Drilling?

Learn what Props Drilling is, when you should use it and when you should consider an alternative such as context or state management

Adding Complex State To Recoil

Adding Complex State To Recoil

Learning how to add a more complex object to global state in Recoil. We demonstate how simple it is to add complex data to Recoil state.

Add State With Recoil

Add State With Recoil

Learn how to add global state management to your React applications with Meta's Recoil. Observe how the initial implementation is performed.

Create A Theme In MUI

Create A Theme In MUI

A walkthrough detailing how to create a custom theme for your website using MUI Core. Focusing on colours, spacing and typography.

MUI Box vs HTML div

MUI Box vs HTML div

What is the difference between the MUI Box vs HTML div? This article shows how the Box component differs from HTML div elements

Converting A React Component To A MUI Component

Converting A React Component To A MUI Component

Converting a compenting from React to MUI? Check out this brief article where we use a real world example of converting a component.

React with MUI Core

React with MUI Core

A practical example of setting up a React app using the MUI Core UI framework. We show how to build a simple page with a header and table.

10 Essential React Libraries Every Developer Should Know About

10 Essential React Libraries Every Developer Should Know About

A brief look at 10 essential React libraries that all React developers should be aware of. Read about these libraries at bernieslearnings.com

React Dev Tools For Local Files

React Dev Tools For Local Files

Learn how to use the React Dev Tools extension with local files. All you need to do is to enable the Allow Access to file URLs.

React Without NPM

React Without NPM

Can you build a React app without using the NPM (node package manager) or Yarn (Yet Another Resource Negotiator)? Yes, you absolutely can.

Creating A Component In React

Creating A Component In React

This article details creating a component in React. Using a playing card as the example, you can see the process of creating a component.

What is React?

What is React?

Understand the basics of what React is and how it is used to construct complex and dynamic websites. Learn why React is so popular.

How Do You Start React Development Server?

How Do You Start React Development Server?

Having trouble starting the React development server? This post shows you how to start and stop the development server using create-react-app

How To Stop React Development Server?

How To Stop React Development Server?

Learn how to stop the React development server when developing React apps on your local machine. Understand what the development server is.

React Dev Tools In Firefox

React Dev Tools In Firefox

Understanding the React Dev Tools extension is critical for React developers to analyze and debug applications. Learn more here!

React Code Review

React Code Review

React vs WordPress

React vs WordPress

Should I learn PHP or React?

Should I learn PHP or React?

What is a stateless component in React?

What is a stateless component in React?

Learn what a stateless component is in React. See how they are used with some examples and why they are useful to understand.

Where should functions in function components go? 

Where should functions in function components go? 

Conditional rendering in React

Conditional rendering in React

onClick with a parameter in React

onClick with a parameter in React

Injecting singletons into your React components

Injecting singletons into your React components

Where is this (default) prop coming from?

Where is this (default) prop coming from?

Code splitting with lazy and Suspense in React

Code splitting with lazy and Suspense in React

Suspense without lazy in React

Suspense without lazy in React

Lazy loading components dynamically with webpack

Lazy loading components dynamically with webpack

Rendering a list of lazy components in React

Rendering a list of lazy components in React

No Featured Image

Lazy loading and Suspense in React

Easy react-router-dom example

Easy react-router-dom example

Learn what the react-router-dom package does and how to use it. We cover a simple example of setting up 'pages' in a React application