Front-End Development with React? Get full Code

How to do Front-End Development with React? This is a question which comes front-end developer, once he or she starts working on React. React is one of the famous front-end languages used by multiple international companies and Facebook is the developer of this framework, overall if we have to work with react, we need to know some basic concepts and we should be aware of front-end development like HTML and CSS so that it does not make any kind of problem when we start working with react.

Basic of front-end development

Before starting the react programming, the developer should be aware of HTML and CSS. If the person is having a good knowledge of HTML and CSS and JavaScript, then it will be very easy to understand React because in React the developer should be aware of the basic concepts and which will help him to make react project in one go.

Still, if the developer is having any difficulty in his front and development he or she should refer to W3 school which is one of the greatest platforms to learn HTML and CSS, you can understand each and every concept in detail and utilize it to make a website using HTML and CSS. Once you’re done learning you should try to make at least 2 to 3 websites with the help of HTML, CSS, and JS this will clear your concepts.

Is react good for web development? 

This is a question which arise that which framework language they should learn for front-end development, a why only React Js is getting so much of attention whereas there are other languages like angular and Viu which can be used as a framework for front development in web.

Well, the usage of React is vast and the best thing which makes the it different from another framework that it uses component concept. Which helps the whole website to load smoothly and very fast. It does not reload page again and again from the server, it just uses the new components which are asked to be shown on the page this helps the developer to reduce the time which is being used to run the web page on the server.

This is also beneficial for the clients when they want that their information should be shown very quickly and then page load time should also be very less. This helps the website rank on Google because when the page gets loaded quickly, it gives a good impact on ranking also this is one of the most important reasons, why react is so much famous as a front-end development framework.

Also Read: Why the industries are choosing to react instead of angular

Registration form and react with full validation

Now we are going to make a registration form where the user does not import his name, email address, or password in the incorrect format. Then he will be getting an error from the webpage, before starting with the code the front-end developers already know that giving validation in HTML and CSS was a bit difficult because they have to implement all the coding parts in the Jquery. Well, it is possible in HTML and CSS to create the registration form but we will see the registration form in React Js, and how easy it is to make a registration form and give all the validation within few steps.

Over View: 

How to do Front-End Development with React?

With validation:

How to do Front-End Development with React?

Step 1: Index.Js

How to do Front-End Development with React?

Step 2: App.css

@import url(‘https://fonts.googleapis.com/css2?family=PT+Sans&display=swap’);

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  font-family: ‘PT Sans’, sans-serif;

}

Step 3: App.Js

import React from ‘react’;

import Form from ‘./Form’;

function App() {

  return (

    <div className=”App”>

      <Form /> 

      </div>

  );

}

export default App;

Step 4: Form.css

.form-container {

    margin: 100px auto;

    width: 1000px;

    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.2);

    position: relative;

    border-radius: 10px;

    height: 600px;

    display: grid;

    grid-template-columns: 1fr 1fr;

  }

  .close-btn {

    position: absolute;

    top: 2%;

    right: 3%;

    font-size: 1.5rem;

    z-index: 1;

    color: #fff;

    cursor: pointer;

  }

  .form-content-left {

    background: linear-gradient(

      90deg,

      rgb(39, 176, 255) 0%,

      rgb(0, 232, 236) 100%

    );

    border-radius: 10px 0 0 10px;

    position: relative;

  }

  .form-img {

    width: 80%;

    height: 80%;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

  }

  .form-img-2 {

    width: 60%;

    height: 60%;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

  }

  .form-success {

    text-align: center;

    font-size: 24px;

    margin-top: 80px;

    color: #fff;

  }

  .form-content-right {

    border-radius: 0 10px 10px 0;

    position: relative;

    background: linear-gradient(90deg, rgb(40, 40, 40) 0%, rgb(17, 17, 17) 100%);

  }

  .form {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 90%;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .form h1 {

    font-size: 1rem;

    text-align: start;

    width: 80%;

    margin-bottom: 1rem;

    color: #fff;

  }

  .form-inputs {

    margin-bottom: 0.5rem;

    width: 80%;

  }

  .form-inputs p {

    font-size: 0.8rem;

    margin-top: 0.5rem;

    color: #f00e0e;

  }

  .form-label {

    display: inline-block;

    font-size: 0.8rem;

    margin-bottom: 6px;

    color: #fff;

  }

  .form-input {

    display: block;

    padding-left: 10px;

    outline: none;

    border-radius: 2px;

    height: 40px;

    width: 100%;

    border: none;

  }

  .form-input::placeholder {

    color: #595959;

    font-size: 12px;

  }

  .form-input-btn {

    width: 80%;

    height: 50px;

    margin-top: 10px;

    border-radius: 2px;

    background: linear-gradient(

      90deg,

      rgb(39, 176, 255) 0%,

      rgb(0, 232, 236) 100%

    );

    outline: none;

    border: none;

    color: #fff;

    font-size: 1rem;

  }

  .fomr-input-login {

    color: white;

    padding: 5px;

  }

  .form-input-btn:hover {

    cursor: pointer;

    background: linear-gradient(

      90deg,

      rgb(39, 143, 255) 0%,

      rgb(12, 99, 250) 100%

    );

    transition: all 0.4s ease-out;

  }

  .form-input-login {

    font-size: 0.8rem;

    margin-top: 10px;

    color: #fff;

    width: 80%;

    text-align: center;

  }

  .form-input-login a {

    text-decoration: none;

    color: #27cdff;

    font-weight: 600;

  }

Step 5: FormSingup.js

import React from ‘react’

import useForm from ‘./useForm’

import validate from ‘./validateinfo’;

import ‘./Form.css’;

const FormSingup = ({submitForm}) => {

    const{handleChange, values, handleSubmit, errors } = useForm(submitForm, validate);

    return (

       <div className=”form-content-right”>

           <form className=”form” onSubmit={handleSubmit}>

            <h1>

                Get started with us today! Create your account by filling out the information below.

            </h1>

            <div className=”form-inputs”>

                <label htmlFor=”username” className=”form-label”>

                  Username

                </label>

                <input 

                    id=”username”

                    type=”text”

                    name=”username”

                    className=”form-input”

                    placeholder=”Enter Your Name”

                    value={values.username}

                    onChange={handleChange}

                     />

                     {errors.username && <p>{errors.username}</p>}

            </div>

            <div className=”form-inputs”>

                <label htmlFor=”email” 

                className=”form-label”>

                    Email

                </label>

                <input 

                    id=”email”

                    type=”email”

                    name=”email”

                    className=”form-input”

                    placeholder=”Enter Your Email”

                    value={values.email}

                    onChange={handleChange}

                     />

                     {errors.email && <p>{errors.email}</p>}

            </div>

            <div className=”form-inputs”>

                <label htmlFor=”password” 

                className=”form-label”>

                    Password

                </label>

                <input 

                    id=”password”

                    type=”password”

                    name=”password”

                    className=”form-input”

                    placeholder=”Enter Your Password”

                    value={values.password}

                    onChange={handleChange}

                     />

                     {errors.password && <p>{errors.password}</p>}

            </div>

            <div className=”form-inputs”>

                <label htmlFor=”password2″ 

                className=”form-label”>

                    Confirm Password

                </label>

                <input 

                    id=”password2″

                    type=”password”

                    name=”password2″

                    className=”form-input”

                    placeholder=”Enter Your Confirm Password”

                    value={values.password2}

                    onChange={handleChange}

                     />

                     {errors.password2 && <p>{errors.password2}</p>}

            </div>

            <button className=”form-input-btn” type=”submit”>Sing Up</button>

           <span className=”fomr-input-login”>

               Alredy have an account? Login <a href=’#’>Here</a>

           </span>

           </form>

       </div>

    );

};

export default FormSingup;

Step 6: FormSuccess.Js

 import React from ‘react’

 const FormSuccess = () => {

     return (

        <div className=”form-content-right”>

            <div className=”form-success”>We have received your request!</div>

            <img src=”reactimg.png” alt=”Login Image” className=”form-img-2″ />

        </div>

     )

 }

 export default FormSuccess

Step 7: useForm.js

import {useState, useEffect} from ‘react’;

import validateinfo from ‘./validateinfo’;

const useForm = (callback, validate) => {

    const[values, setValues] = useState({

        username:”,

        email:”,

        password:”,

        password2:”

    });

    const[errors, setErrors] = useState({});

    const [isSubmitting, setIsSubmitting] = useState

    (false)

    const handleChange = e => {

        const { name, value } = e.target;

        setValues({

            …values,

            [name] : value

        });

    };

    const handleSubmit = e => {

        e.preventDefault();

        setErrors(validate(values));

        setIsSubmitting(true)

    }

    useEffect(() =>{

        if(Object.keys(errors).length == 0 && isSubmitting){

            callback();

        }

    },

    [errors]

    );

    return {handleChange, values, handleSubmit, errors};

};

export default useForm;

Step 8: validateinfo

export default function validateinfo(values) {

    let errors = {}

    if(!values.username.trim()) {

        errors.username =”Username required”

    }

    if(!values.email) {

        errors.email = “Email required”

    } else if (!/\S+@\S+\.\S+/.test(values.email)) {

        errors.email= “Email address is invalid”

    }

    if(!values.password){

        errors.password = “Password is Required”;

    } else if (values.password.length < 6) {

        errors.password = “Password needs to be 6 characters or more”;

    }

    if(!values.password2){

        errors.password2 = “Password is Required”;

    } else if (values.password2 !== values.password) {

        errors.password = “Password do not match”;

    }

    return errors;

}

Also Read: Best React JS Project for Beginners

Leave a Reply

Your email address will not be published.