Part 2 of fetching and displaying data in a React app
This article will focus on setting up dynamic routing in React. Previously, I explained how to fetch data from an API and display it in the browser using React Hooks and Axios. By the end, we were able to create a Featured Products page displaying the fetched data:
Let’s create a Featured Products page using a shopping API
This article will focus on fetching data from an API and displaying it in the browser. This will be done using React Hooks. To keep things simple, we will be using a shopping API that I created for this article. However, the steps laid out here can be applied when fetching and displaying data from any API, whether it be a third-party API like the OMDb API or your own.
Let’s take a look at what we will set out to achieve. Imagine that we have a website with a Featured Products page where we want to display our top…
Literal Notation and Function Constructors
There are different ways to create objects in JavaScript. In this article, we will focus on creating objects using literal notation and function constructors.
Terminology
Before going into how to create objects, let’s take a look at some terms that are used when talking about objects. Objects are written inside curly braces, as in the example shown below. The object in this example is stored in a variable called person1, and can be referred to as the person1 object. Properties tell us about the object. Here, the properties are name and DOB (date of birth). …
Defining and Calling Functions
This is a brief overview of JavaScript functions. I will discuss how functions are defined, as well as explain how functions are called in order to use them. Along with the provided examples, this will give you a better understanding of how to create and use functions in JavaScript.
Defining Functions
There are two ways of defining functions in JavaScript: function declarations and function expressions.
When you declare a function (called a function declaration), you use the function keyword, followed by the name of the function that you give it. Next, comes a list of parameters that the function needs…
Make Your Content More Eye-Catching in Social Media Feeds
Have you ever wondered how to control the content that is displayed when you post a link to your app or website on social media, like Facebook? Or for that matter, how to even display any content?
You may have shared a link to your app or website on social media before, only to have it look like this. It doesn’t look very appealing, nor does it give much information about what the content is about.
Keeping it simple with React Helmet
When you create a website or web application using regular HTML, the <title> tag is what you use to define the title for your HTML document. So, for example, if you have a portfolio website, the <title> tag up in the <head> of your landing page’s HTML code may look something like this:
<title>My Portfolio</title>Likewise, the <title> tag on your About page may look something like this:
<title>My Portfolio | About</title>Whatever title you have here will then be shown exactly as it is in the browser’s title bar or in the page’s tab.
In this article, I’m going…
Adolf Schmuck
Front-end Developer 🚀 adolfschmuck.com
