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
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
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
I had to build a website recently that used react-bootstrap and had a page which showed a collection of items in a grid, with each item being shown in it’s own <Card />. The documentation wasn’t as comprehensive as I’d have liked for this specific use case and I found a lot of other people … Read more
I started to look at the WordPress Api recently and decided to put together a small React JS web app that would enable me to show my blog data in a custom front end. To start with I have focused on getting a a list of posts, and related categories. By following this post, an … Read more
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
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
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
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
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