Solve real coding problems
Articles about doing frontend web development (JavaScript, React).
In this article, I’ll show how to make a request to an API to get data and then display it in a React component. This can be broken down into three steps: Here’s a working code example of how to do this: Note: Install the axios package with ‘npm install axios’. If you prefer to … Read more
If you upgraded to React Router DOM v6, or if you are starting with v6 and you’re using code examples from before v6, then you’ll run into breaking changes. One such breaking change causes the following runtime error: Error: [Component] is not a <Route> component. All component children of <Routes> must be a <Route> or … Read more
I’m going to show you how to create a Hello World web app with React. Note: I’m using React 18, which is the latest version at the time of this writing. 1 – Install VS Code VS Code is a really good IDE for developing React apps. So first things first, go download and install … Read more
Problem You’re running into the following two symptoms: You unintentionally have a void return in the component that it’s complaining about. Solution In JS, when you have a return on its own line followed by an expression, it gets translated into a void return. Here’s an example of code that would produce the symptoms (TS2786 … Read more
You can post form data asynchronously by using fetch() + FormData, like this: FormData parses the form element into an array of key/value pairs for you. This results in sending the following request: When you set the request body to a FormData object, it sets the content-type to multipart/form-data. You can post the data in … Read more
Problem When you try to initialize a FormData object from a form element, it’s empty. There are no keys or values whatsoever. For example, let’s say you’re trying to post form data with fetch(): When you look at the request, it has the right Content-Type, but no data: Note: If you look in DevTools > … Read more
The simplest way to send requests in JS is to use the fetch() API. Here’s an example that gets a stock quote from a web API and displays the results: You can wire this up to a button click (and have a div for displaying the results): Note: fetch() is supported in all major browsers … Read more