npm WARN exec – package was not found: create-react-app

Have you tried to create a new React app using npx create-react-app and then seen this error message in your console of your choice? Then you might be wondering what the problem is. It means that the package create-react-app is not installed, or at least not available from the directory you are in. However, the … Read more

Using Material UI icons in React

Following on from my post about changing the Material UI Appbar background colour, here is a tutorial on using Material UI Icons in a React app. Before we dive into the detail I’m presuming that you’ve created a React app already, so once you are ready to start focusing on using icons in your Material … Read more

Using React Bootstrap icons

use bootstrap react icons

Following on from my post about making buttons using React and Bootstrap, here is a tutorial on using React Bootstrap Icons. Before we dive into the detail I am presuming that you have created a React app already, so once you are ready to start focusing on using icons in your Bootstrap React app you’ll … Read more

React JS example to get data from an API

So many projects require that you use data from an API, so here is a React JS example of how to do just that. I’ll cover how to use fetch to interact with the API, how to get data from the API, and how to use .env files to securely store environment specific properties. I … Read more

React bootstrap button – how to make great buttons

react bootstrap button examples

Do you want to know how to make your React Bootstrap buttons look good? React-bootstrap provides a library of components that will help you create beautiful, responsive UI’s. In this post I’ll explain how to use the Button component in a React website. You can quickly change the color of each button, switch between flat … Read more

Bootstrap React Forms – part 2, validation and errors

Further to my first post about using Bootstrap with React Forms, this post will show you how to add validation to your Bootstrap React form, and show any errors when the form is submitted. Intentionally this is kept as straightforward as possible and without using any additional packages, so that you can learn the most … Read more

How to debug React using the developer tools in Chrome

how to debug react js in chrome dev tools

If you are new to building websites, writing code or just React JS you will need to know how to debug your code. This post shows you the basics on how to debug JavaScript using the Chrome Developer Tools and using the extension React Developer Tools to debug a React website. There’s a few techniques … Read more

Using Bootstrap with React forms

Bootstrap is a front end open-source toolkit which makes it really easy to build responsive UIs quickly. With comprehensive documentation and a library of examples it’s a wise choice if you want to build a React app with a tidy front end quickly. In this post I’ll show you how to import and use Bootstrap … Read more