Welcome to my article on how to create a simple login page in React JS! As a web developer, I’ve been using React JS for a while now and I can say it’s one of the popular JavaScript libraries for building user interfaces. In this tutorial, I’ll guide you through the process of creating a login page using React JS. Let’s get started!
Setting Up the Project
Before we dive into the code, make sure you have Node.js installed on your machine. If not, head over to the official Node.js website and download the latest version for your operating system.
To create a new React project, open your terminal and navigate to the directory where you want to create the project. Run the following command:
npx create-react-app login-page
This command will create a new directory named “login-page” with all the necessary files and dependencies to get started. Once the command finishes, navigate to the project directory:
cd login-page
Creating the Login Component
Now that our project is set up, let’s create a new component for our login page. Inside the “src” directory, create a new file called “Login.js”. Open the file and add the following code:
{`
import React, { useState } from 'react';
const Login = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
// TODO: Handle login logic here
}
return (
Login
);
}
export default Login;
`}
In this code, we’re using the useState hook to handle the state of the email and password fields. The handleSubmit function will be triggered when the form is submitted, where you can add your own logic to handle the login process.
Adding the Login Component to App
Now that we have our Login component, let’s add it to the App.js file. Open the file and replace the existing code with the following:
{`
import React from 'react';
import Login from './Login';
const App = () => {
return (
Welcome to My Login App
);
}
export default App;
`}
We imported the Login component and added it below the heading in the App component. Now when you run the project, you should see the login form rendered on the screen.
Styling the Login Page
To make our login page look nice, we can add some CSS styles. Create a new file called “Login.css” in the same directory as Login.js. Open the file and add the following CSS:
{`
form {
display: flex;
flex-direction: column;
gap: 1rem;
}
input {
padding: 0.5rem;
font-size: 1rem;
}
button {
padding: 0.5rem 1rem;
font-size: 1rem;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
`}
In this code, we’re styling the form, input fields, and button. Feel free to customize the styles to your liking. Now, import the CSS file in Login.js by adding the following line at the top:
{`import './Login.css';`}
With the CSS imported, you should see the styles applied to the login form when you run the project.
Conclusion
Congratulations! You have successfully created a simple login page in React JS. We covered the basics of setting up a React project, creating a login component, adding the component to the main App component, and styling the login page. This is just the beginning, and there’s a lot more you can do with React JS to enhance and customize your login page.
If you want to learn more about React JS, I recommend checking out the official React documentation and exploring other tutorials and resources available online. Happy coding!