React Form

In traditional web development, when you create a form, the browser takes care of most things. React, however, gives us more control. Instead of letting the browser handle the form, we can use React to manage it ourselves. It might sound a bit fancy, but don't worry – it's simpler than it sounds!

HTML Forms vs. React Forms

Suppose we are trying to make login form, like the picture below.

[image place here jaa]

let's see the difference between traditional HTML and React

HTML Form Example:

<!-- HTML Form Example -->
<form action="/submit" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />

  <button type="submit">Submit</button>
</form>

React Form Example:

import React, { useState } from 'react';

function ReactForm() {
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="username">Username:</label>
      <input
        type="text"
        id="username"
        name="username"
      />

      <label htmlFor="password">Password:</label>
      <input
        type="password"
        id="password"
        name="password"
      />

      <button type="submit">Submit</button>
    </form>
  );
}

export default ReactForm;

You may have a question why React take a longer line of code, but ~~that~~the longer line of code, the powerful the form can be!!

Why React form better than HTML form?

React built-in magic makes forms more interactive, updates only the necessary parts without refreshing the whole page for a smoother user experience, and helps manage complexity like a superhero sidekick, offering a more modern and user-friendly approach compared to traditional HTML forms.

[Image here ja] [Another here jaa]