Build a Login Form using React and Typescript

skill level: beginner

Introduction

React is a popular open-source JavaScript library for building different kinds of user interfaces for different purposes. It is widely used in web development due to its flexibility, scalability, and performance. Typescript is a superset of JavaScript that provides static typing capabilities for building large-scale applications. In this blog post, we will discuss how to build a login form in React and Typescript.

Building a Login Form in React and Typescript

Building a login form in React and Typescript is a simple project that be a good start to building your future projects. In almost every project you do, you will most likely encounter a form. It lets you acquire user data in a way that is almost similar to a language. The way you design your form, is the way your communicating with your customers. Let's start by creating a new React project using the create-react-app utility. In your terminal, navigate to your preferred directory and run the following command:

npx create-react-app my-app --template typescript

The above command creates a new React project with support for Typescript. Next, let's create a new component that represents our login form. In your project directory, create a new file named LoginForm.tsx and add the following code:

import React from 'react';

const LoginForm: React.FC = () => {
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log('username:', username);
    console.log('password:', password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input type="text" value={username} onChange={(event) => setUsername(event.target.value)} />
      </label>
      <label>
        Password:
        <input type="password" value={password} onChange={(event) => setPassword(event.target.value)} />
      </label>
      <button type="submit">Login</button>
    </form>
  );
};

export default LoginForm;

The above code defines a functional component named LoginForm that renders a form with two input fields for username and password. It also defines two state variables, username and password, using the useState hook. The handleSubmit function logs the values of the username and password variables to the console when the form is submitted.

To use the LoginForm component in your application, import it in your App.tsx file and add it to your JSX code as follows:

import React from 'react';
import LoginForm from './LoginForm';

const App: React.FC = () => {
  return (
    <div>
      <h1>Login Form</h1>
      <LoginForm />
    </div>
  );
};

export default App;

That's it! You now have a fully functional login form in your React and Typescript app.

Styling the Login Form

Styling your login form is just as important as the logic. Most people will only use your site if it looks appealing, so make sure your design skills are up to date. You can use CSS, or any other styling preprocessor of your choice to style your form. In this example, we will use CSS to style our form. Add the following CSS code to your index.css file:

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

label {
  font-size: 18px;
  margin-bottom: 10px;
}

input {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

button {
  background-color: #0095ff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

The above CSS code styles your form to have a centered layout, with input fields and labels with a simple but great style. The login button is styled with a blue background color and white text.

Conclusion

In this blog post, we discussed how to build a login form using React and Typescript. We created a new React project with Typescript support, defined a functional component that represents our login form, and styled our form using CSS. With the knowledge gained from this tutorial, you can now build your own login forms in React and Typescript. Feel free to use this code for your own projects. A shoutout would be nice, but it isn't necessary. Thanks for tuning in and watch out my for next tutorial which will cover using Vite instead of create-react-app. 

My goal is to guide you all on a journey through web development from easy to expert.

Thank you!