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.