Learn React Hooks

The Login component

First, we define the Login component, where we show two fields: a Username field, and a Password field. Furthermore, we show a Login button:

1. We start by creating a new file for our component: src/user/Login.js
2. In the newly created src/user/Login.js file, we import React:

import React from 'react'

3. Then, we define our function component. For now, the Login component will not accept any props:

export default function Login () {

4. Finally, we return the two fields and the Login button, via JSX. We also define a form container element to wrap them in. To avoid a page refresh when the form is submitted, we have to define an onSubmit handler and call e.preventDefault() on the event object:

    return ( <form onSubmit={e => e.preventDefault()}> ...