React Notes app that uses event and event handler & async event

Download the source code for a React TypeScript Notes app that takes use of the onClick, onChange, onMouseOver and onMouseOut event.

In addition, the application uses a button onClick event which is called from another React component.

There is also an example for using asynchronous methods. JavaScript's async methods work by calling the async keyword and using the await keyword to wait for a response before continuing with the method. This allows us to use the onclick event using async.

The Notes app allows you to create a note to a listing, delete a note, and change the background colour of a note by hovering over it.

Software

This is the software that will need to be installed onto your machine.

Node.js Version 14.17.3 or above (may work with lower versions).
Visual Studio Code (optional)

Get The Application Working

These are the steps to get the application working.

Fill out the source code form. We will send you an email where you can download the source code.

Open up a terminal, and CD to the folder where package.json is located.

Run npm install to download the dependencies.
Run npm start to start the web application

The React TypeScript application will now be running on http://localhost:3000.

More Information

Watch our YouTube tutorial, where we go about using the React onClick event to create and delete a record from a notes list.

We also explore other events, and demonstrate how to use asynchronous methods in JavaScript.

In addition, read our article on How to use onClick, onMouseOver and async events in React, which will discuss how we went about building the React TypeScript application.