In this article, I will guide you through the process of creating a login and registration page in React JS. As a web developer, I have found React JS to be a powerful and flexible framework for building user interfaces.
Why React JS?
React JS is a JavaScript library for building user interfaces, and it has gained immense popularity due to its component-based architecture and efficient rendering. With React JS, you can create reusable UI components that make it easier to manage and maintain your code.
Setting Up the Project
To get started, make sure you have Node.js installed on your system. You can check this by running the following command in your terminal:
node -v
If Node.js is not installed, you can download and install it from the official website.
Once you have Node.js installed, you can create a new React project using the create-react-app command-line tool. Open your terminal and run the following command:
npx create-react-app login-registration
This will create a new directory called login-registration with all the necessary files and dependencies to start our project.
Creating the Login Component
Now that we have our project set up, let’s start by creating the login component. In React, components are building blocks of the user interface. They can be functional or class-based components that encapsulate the UI logic and can be reused throughout the application.
Create a new file called Login.js inside the src/components directory and add the following code:
{`
import React, { useState } from 'react';
const Login = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const handleUsernameChange = (e) => {
setUsername(e.target.value);
};
const handlePasswordChange = (e) => {
setPassword(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
// Your login logic goes here
};
return (
Login
);
};
export default Login;
`}
In the above code, we are using the useState hook to manage the state of our form inputs. The handleUsernameChange and handlePasswordChange functions update the state as the user types in the input fields. The handleSubmit function is called when the user submits the form.
Creating the Registration Component
Similar to the login component, we will create a registration component. Create a new file called Registration.js inside the src/components directory and add the following code:
{`
import React, { useState } from 'react';
const Registration = () => {
const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleUsernameChange = (e) => {
setUsername(e.target.value);
};
const handleEmailChange = (e) => {
setEmail(e.target.value);
};
const handlePasswordChange = (e) => {
setPassword(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
// Your registration logic goes here
};
return (
Registration
);
};
export default Registration;
`}
In this code, we have added an additional input field for the user’s email address. Just like the login component, we are using the useState hook to manage the state of the form inputs.
Creating the App Component
Now that we have our login and registration components, let’s create the main App component that will render these components based on the user’s action.
Create a new file called App.js inside the src directory and add the following code:
{`
import React, { useState } from 'react';
import Login from './components/Login';
import Registration from './components/Registration';
const App = () => {
const [isLogin, setIsLogin] = useState(true);
const handleSwitchForm = () => {
setIsLogin(!isLogin);
};
return (
Welcome to React Login and Registration Page
{isLogin ? : }
{isLogin ? 'Don't have an account?' : 'Already have an account?'}{' '}
{isLogin ? 'Register' : 'Login'}
);
};
export default App;
`}
In the App component, we are using the useState hook to manage the state of whether the user wants to login or register. The handleSwitchForm function is called when the user clicks on the “Register” or “Login” link, which updates the state accordingly.
Testing the Application
To test the application, open the src/index.js file and replace the existing code with the following:
{`
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
`}
Save the file and start the development server by running the following command in your terminal:
npm start
Now, you can access the login and registration page in your browser by visiting http://localhost:3000. You should see the welcome message along with the login form.
Conclusion
In this article, we have learned how to create a login and registration page in React JS. We started by setting up the project using create-react-app and then created separate components for login and registration. Finally, we created an App component to render the appropriate form based on the user’s action.
React JS provides a robust foundation for building user interfaces, and with the knowledge gained from this article, you can further enhance and customize the login and registration page to meet your specific requirements.
Happy coding!
