I recently had the opportunity to work on a basic login page using React JS, and I must say, it was quite a learning experience. React JS is a popular JavaScript library that allows developers to build user interfaces efficiently. In this article, I will guide you through the process of creating a basic login page in React JS, and I’ll also share some of my personal insights and experiences along the way.
Getting Started
Before diving into the code, let’s take a moment to understand the basic structure of a React JS application. React follows a component-based architecture, which means that the user interface is broken down into reusable building blocks called components. Each component can have its own state and behavior, making it easy to manage and update the UI.
The first step in creating our login page is to set up a new React project. We can do this by using the Create React App tool, which helps us initialize a new React project with all the necessary dependencies and configuration.
npx create-react-app login-page
This command will create a new folder called login-page with all the files and folders necessary for our project. Once the project is set up, we can navigate into the project directory and start the development server by running the following commands:
cd login-page
npm start
With the development server running, we can now open our browser and navigate to http://localhost:3000 to see our React application in action.
Building the Login Form
Now that we have our React project set up, let’s start building the login form. In React, form inputs are treated as stateful components, which means that their values are managed by React and can be easily updated based on user input.
To create our login form, we’ll need to create a new component called LoginForm. This component will render a simple form with two input fields for the username and password, as well as a submit button.
import React, { useState } from 'react';
const LoginForm = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const handleUsernameChange = (event) => {
setUsername(event.target.value);
}
const handlePasswordChange = (event) => {
setPassword(event.target.value);
}
const handleSubmit = (event) => {
event.preventDefault();
console.log('Username:', username);
console.log('Password:', password);
}
return (
<form onSubmit={handleSubmit}>
<input type="text" value={username} onChange={handleUsernameChange} placeholder="Username" />
<input type="password" value={password} onChange={handlePasswordChange} placeholder="Password" />
<button type="submit">Login</button>
</form>
);
}
In the code above, we use the useState hook to create state variables for the username and password inputs. We also define event handler functions for updating the username and password values as the user types in the input fields.
The handleSubmit function is called when the form is submitted. It prevents the default form submission behavior, logs the username and password values to the console for now, and can be further customized to handle authentication requests.
Styling the Login Page
With the login form implemented, we can now add some styling to make our page visually appealing. React allows us to style our components using CSS-in-JS solutions like styled-components or by simply adding inline styles.
Let’s use the styled-components library to add some styles to our login form. First, we need to install the library by running the following command:
npm install styled-components
Once installed, we can import styled-components into our LoginForm component and use it to define our custom styles.
import styled from 'styled-components';
const Form = styled.form`
display: flex;
flex-direction: column;
max-width: 300px;
margin: 0 auto;
`;
const Input = styled.input`
padding: 10px;
margin-bottom: 10px;
`;
const Button = styled.button`
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
`;
In the code above, we define three styled components: Form, Input, and Button. We use backticks to define our CSS rules within the template literals.
Now, we can update our LoginForm component to use these styled components instead of the standard HTML elements.
return (
<Form onSubmit={handleSubmit}>
<Input type="text" value={username} onChange={handleUsernameChange} placeholder="Username" />
<Input type="password" value={password} onChange={handlePasswordChange} placeholder="Password" />
<Button type="submit">Login</Button>
</Form>
);
With the updated code, our login form will now be rendered with the custom styles defined in our styled components.
Conclusion
In this article, we explored the process of building a basic login page using React JS. We covered the fundamental concepts of React, including components and state management, and implemented a login form with form validation and submission handling.
React JS provides developers with a powerful toolset for creating dynamic and interactive user interfaces. By leveraging the component-based architecture and the flexibility of JavaScript, we can build robust and scalable applications with ease.
If you’re interested in diving deeper into React JS, I encourage you to explore the official React documentation and experiment with different components and functionalities. Happy coding!