How to build a Linkedln Clone SignIn page in React | React Linkedln Clone Project 

Introduction

React is an open-source library of JavaScript used to create user interfaces of single-page applications in both web and mobile. It is a framework that has a huge developer community.
React is used to build many professional web pages. In this article, we will see how ReactJs comes in handy to build attractive and dynamic pages by seeing an example of a login page of LinkedIn.
We will also use Redux for this project. Redux is an open-source JavaScript library for managing and centralizing the application state. It is most commonly used with libraries such as React or Angular for building user interface

Pre-requisite

The basic need is to have a general idea of React and its use of components. To get started with it first create the React/Redux environment.

You can start with creating a redux app from start.

npx create-react-app . –template redux

or you can simply go with:

npx create-react-app .

This will download and set up the React environment for development along with Redux. 

For more information, refer to Getting Started with Redux | Redux.

We would be using styled components, which is easy and handy while working on React CSS.

npm i styled-components

Setting up File

Start the program on your localhost by
npm start
Clean up the files by deleting unnecessary files. Like deleting codes from App.css and garbage files and images.
In this article, we will focus on the login page only so we need to gather up files like images and icons related to this only and then save them to the desired locations.

Create Component

Inside the component folder, create a login.js file and link it with the main project. Import styled-components and other useful stuff.
This would include importing redux and router as well as a special javascript functional file which will help us to provide Google authentication to our login page.

import React from "react";
     
       import styled from "styled-components";     
       import { connect } from "react-redux";
       import { signInAPI } from "../actions";
       import { Redirect } from "react-router";
     
            

In the above code, there is

Connect()- this is a function that helps to connect react component to the redux store.
singinAPI – this is a function that is being exported from the actions file which has the conditions to check for the google authentication.
For google authentication, we used Firebase in our project.

 export function signInAPI() {
     
         return (dispatch) => {
     
           auth
     
             .signInWithPopup(provider)
     
             .then((payload) => {
     
               // console.log(payload);
     
               dispatch(setUser(payload.user));
     
             })
     
             .catch((error) => alert(error.message));
     
         };
     
       } 

The Body

const Login = (props) => {

    return (

   <Container>

   {props.user && <Redirect to='/home' />}

   <Nav>

   <a href='/'>

   <img src='/images/login-logo.svg' alt='' />

   </a>

   <div>

   <Join>Join Now</Join>

   <SignIn>Sign In</SignIn>

   </div>

   </Nav>

   <Section>

   <Hero>

   <h1>Welcome to your professional community.</h1>

   <img src='/images/login-hero.svg' alt='' />

   </Hero>

   <Form>

   <Google onClick={() => props.signIn()}>

   <img src='/images/google.svg' alt='' />

   Sign in with Google

   </Google>

   </Form>

   </Section>

   </Container>

   );
   };

The body mainly consists of two things. One is the values and images to be seen on the page and an onClick function. This function relates to singIn function which will help to get Google authentication.

NOTE: This whole body is under a ternary condition. Which states that if the condition is true then show this or else load another page.

For better understanding and source code please visit:

shibam17/linkedin-build-reactjs: https://linkedin-build.web.app/ (github.com)