DEV Community: J0shcodes

Enhancing User Experience with Performance Optimization in Frontend Web Development

J0shcodes — Sun, 03 Dec 2023 19:45:21 +0000

Introduction

User expectations for responsive and quick-loading websites are higher than ever in today's digital environment. One of the most important aspects of providing a flawless user experience is performance optimization. In order to meet user expectations and raise overall happiness, this article will explore technological solutions and best practices for frontend speed optimization.

Importance of Performance Optimization

Impact on user experience

Performance optimization has a profound impact on the user experience in several crucial ways:

Page load speed: Users expect websites to load quickly. Therefore, performance optimization guarantees quicker loading times, which lowers user annoyance and raises satisfaction levels overall.
User Engagement and Retention: Improved performance results in a more fluid surfing experience, enabling users to explore more content and decreasing the likelihood of them abandoning the site owing to delayed loading or unresponsive pages.
Conversion rates and sales: Faster websites typically have greater conversion rates because users are more likely to complete purchases or other actions on a site that responds quickly and smoothly.
User Satisfaction: A website that loads quickly enhances consumers' perceptions of the brand or service, which in turn builds customer happiness and trust.

SEO and other Ranking Factors

Page speed is a ranking factor for search engines such as Google. Better-performing websites are more likely to rank higher in search results, increasing visibility and garnering more organic traffic.

Technical Strategies for Performance Optimization

Minification and compression

Minification

Minification is the process of removing unnecessary characters from the source code file in order to reduce its size and thus improve loading speed without affecting its functionalities. This is especially true for HTML, CSS, and JavaScript files. The purpose is to reduce file size by removing whitespace characters, comments, and other items that aren't necessary for the code to run.

For example:

Original JavaScript code:

function calculateArea(width, height) {
    // Calculate the area of a rectangle
    return width * height;
}

The calculateArea function is defined, which takes two parameters: width and height.
Inside the function, there's a single line of code that multiplies the width by the height to compute the area of a rectangle.
The comment // Calculate the area of a rectangle provides a descriptive note for the purpose of the function.

Minified JavaScript code:

function calculateArea(a,b){return a*b}

The calculateArea function remains the same, but the variable names width and height have been minified to a and b respectively.
Whitespace characters, such as spaces and line breaks, are removed.
The comment has been eliminated during the minification process.

CSS

Original CSS code:

body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

h1 {
    color: #333;
    font-size: 28px;
    margin-bottom: 20px;
}

p {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
}

Minified CSS code:

body{font-family:'Arial',sans-serif;background-color:#f4f4f4;margin:0;padding:20px;}h1{color:#333;font-size:28px;margin-bottom:20px;}p{color:#666;font-size:16px;line-height:1.6;}

In the minified version of the CSS code:

Whitespace characters such as spaces, line breaks, and indentation have been removed.
Comments have also been eliminated to reduce the file size.
Shortened property names, where possible, are used without affecting the styling.

HTML

Original HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Minified HTML Example</title>
</head>
<body>
    <header>
        <h1>Welcome</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <p>This is an example of minified HTML code.</p>
    </main>
    <footer>
        <p>&copy; 2023 Minified HTML Example</p>
    </footer>
</body>
</html>

Minified HTML:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Minified HTML Example</title></head><body><header><h1>Welcome</h1><nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul></nav></header><main><p>This is an example of minified HTML code.</p></main><footer><p>&copy; 2023 Minified HTML Example</p></footer></body></html>

In the minified HTML version:

Whitespace, indentation, and line breaks have been removed to reduce the overall file size.
The structure and elements of the HTML document remain unchanged, but the formatting is condensed for optimization purposes.
Minification in both CSS and HTML involves the removal of unnecessary characters and formatting to create more compact files for faster loading times in web browsers.

There are various tools available for performing CSS, JS, and HTML minification. Examples of those tools are:

Although minification greatly decreases the size of the code, it does not change its logic, allowing browsers to parse and download it more quickly.

Compression

Compression is the process of lowering file size by encoding data more efficiently for transmission. Gzip and Brotli are popular compression methods in web development.

1 Gzip: A common technique for reducing the size of text-based files, such as HTML, CSS, JavaScript, and XML, is compression with Gzip. The server compresses the file before transmitting it over the network in response to a browser request for a gzipped file. The browser decompresses the file upon receiving it so that it may be used. Significant file size reductions with Gzip compression might result in quicker downloads and better website performance.

Brotli: Brotli is a more recent compression algorithm created by Google. It often has higher compression ratios than Gzip, resulting in reduced file sizes. Brotli is particularly useful for text-based content and is supported by the majority of recent browsers.

Image and asset optimization Image and asset optimization is critical for increasing website performance by reducing file sizes while maintaining visual quality. The following are a few methods and recommended practices for picture and asset optimization:
Image compression: Use proper image format by choosing the appropriate image format (JPEG, PNG, WebP, SVG) based on the content. For instance, JPEGs are great for photographs, PNGs for images with transparency, and SVGs for simple graphics or logos. Also, you can reduce file sizes while preserving acceptable image quality by using image compression tools or services (e.g., Adobe Photoshop, TinyPNG, ImageOptim).
Responsive Image: Use the srcset and sizes properties of HTML to give alternative image sources dependent on the screen size and resolution of the device. This guarantees that suitable image sizes are supplied to various devices, avoiding excessive downloads on smaller screens.
Icon and font optimisation: Consider using icon fonts or SVGs instead of multiple image icons. They scale well and can be styled with CSS without sacrificing quality.
Lazy loading: Implement lazy loading for images so that they load just when the user is about to see them, rather than all at once when the page first loads. This minimizes the initial load time and saves bandwidth by only loading images when they are required. To enable lazy loading for images in HTML, use the loading="lazy" attribute in the <img> tag. This property instructs the browser to wait until the picture is close to entering the viewport before loading it. Example:

<img src="image.jpg" loading="lazy" alt="Description of the image">

Async loading and code splitting

Async loading

Async attribute for JavaScript: To load JavaScript files asynchronously, use the async attribute in the <script> tag. This enables the browser to download the script without interfering with HTML processing or other resources. Example:

<script src="example.js" async></script>

Defer attribute for JavaScript: The defer property, like the load attribute, loads JavaScript asynchronously but ensures that scripts are run in the order they appear in the HTML only after the HTML parsing is complete. Example:

<script src="example.js" defer></script>

Code splitting

Webpack or module bundlers:
Use module bundlers that support code splitting, such as Webpack, Rollup, or Parcel. These tools enable you to divide your JavaScript code into smaller portions that are loaded on demand, lowering the size of the initial bundle.
Dynamic imports:
The import() syntax in modern JavaScript allows for dynamic imports. This enables code separation by allowing you to import modules asynchronously during runtime.
Example using dynamic import():

const button = document.getElementById('myButton');
button.addEventListener('click', async () => {
  const module = await import('./moduleToLoad.js');
  // Use the dynamically imported module
});

Tools and Metrics for Performance Measurement

Performance monitoring tools: Performance monitoring tools like OpenReplay, lighthouse, WebPageTest, Google page speed helps you to measure and analyze your website performance.
Key Performance Metrics: They are key performance metrics you should look out for in your webpage as well as how it impacts user experience. They are:

First Contentful Paint (FCP): FCP measures the time it takes for the browser to render the first piece of content (text, image, or DOM element) on the screen. FCP represents the first impression of the website's loading progress. A faster FCP tells to users that the page is actively loading, lowering perceived load times and providing feedback on how responsive the site is. A sluggish FCP might cause user dissatisfaction and increase bounce rates.
Time To Interactive (TTI): TTI measures the time it takes for a web page to become fully interactive and responsive to user input. TTI is necessary for usability. It signals when users may interact with the website successfully, such as clicking buttons or entering data into forms. A speedier TTI offers a more seamless user experience, whereas a delayed TTI may lead to consumers perceiving the site as unresponsive or difficult to use, resulting in lower user engagement and satisfaction.
Cumulative Layout Shift (CLS): CLS measures the unexpected and abrupt layout shifts of visible elements on a web page during its loading phase. Visible stability is directly impacted by CLS. Unexpected element shifts can cause user input problems, annoyance, or inadvertent clicks when users interact with the page. A high CLS score might interfere with reading, particularly when using a mobile device, as it can lead to users losing their place or inadvertently tapping on the wrong element.

Optimizing these key performance metrics contributes to a positive user experience by providing faster loading times, quicker interaction opportunities, and a more visually stable interface, ultimately leading to increased user satisfaction and engagement. Websites that want to increase performance and user retention frequently give priority to enhancing these metrics in order to improve the user experience overall.

Conclusion

Finally, focusing on performance optimization in frontend development is critical for providing a fast, responsive, and engaging user experience. Developers can dramatically improve website speed and user happiness by applying the recommended tactics and utilizing performance measurement tools.

Web 2 vs Web 3: Highlighting their Differences

J0shcodes — Wed, 02 Mar 2022 03:42:38 +0000

Hopefully as at the time you will be reading this article, this won't be the first time you will be hearing the word "Web 2" or "Web 3". Probably you have stumbled on this article out of curiosity for what
those two words mean, well you have come to the right place.

In this article, I will be tabling the differences between Web 2 and Web 3, but before that, I will be defining and introducing what Web 2 and Web 3 is for us to get a quick understanding of what the two terms are. So sit tight because you are in for a smooth ride.

What is Web 2

The term was coined by Darcy DiNucci in 1999 and later published by Tim O'Reilly and Dale Dougherty at the first O'Reilly Media Web 2.0 Conference in late 2004.

Web 2 is simply the version of the 21st-century internet we all know and use today, including social media sites. An internet dominated by data-hungry firms who provide services in exchange for your data.

Web 2 relies on content interactivity, social engagement, and information exchange, rather than static content consumption. Take Facebook as an example, a tiny fraction of the overall content has been created by Facebook. Users are now allowed to create their content and interact with other users on the platform.

One of the goals of Web 2 is to unite people around the data that was interested in. Let's take a look at Web 3.

What is Web 3

Web 3 is simply a decentralized ecosystem or application that is based and runs on the blockchain.

Web3 applications either run on blockchains, decentralized networks of many peer-to-peer nodes (servers), or a combination of the two that forms a crypto economic protocol.

Difference between Web 2 and Web 3

Having done justice to the definitions of the two terms, let us dive into the differences between the two terms. Here we will see what makes Web 2 tick and what has got people going crazy about Web 3.

WEB 2.0	WEB 3.0
Widely Read Write	Portable and Personal
Community Focus	Individual Focus
Servers for gig-economy apps could go down and affect worker income	Web3 servers can't go down – they use Ethereum, a decentralized network of 1000s of computers as their backend
Web Applications	Smart Applications
Interactive Advertising	Behavioral Advertising
Payment service may decide to not allow payments for certain types of work	Web3 payment apps require no personal data and can't prevent payments
Sharing Content	Consolidating Content
Participation in the network is controlled by the central authority.	Anyone can participate in the network; there are no “gatekeepers.” Ideally, the cost of participation is very low.

Conclusion

Big things have started to be done using Web 3, yet the world hasn’t scratched the surface yet. Are you interested in diving into the world of Web 3 and taking full advantage of a promising future, then visit the sites to know more and also get free training on Web 3:

Blockgames Nestcoin Zuri team

Will the world see the complete emergence and usurp of Web 2 by Web 3? Well that is yet to be known. Till then, let's stay safe, stay alive and keep our fingers crossed. Happy Reading😉

React Form Validation With Formik and Yup

J0shcodes — Wed, 10 Nov 2021 08:14:50 +0000

Last time out, I showed how we can build a React form using the form library called Formik. In this article, I will be showing you how to validate the form we created using Yup.

Below is how the form and code look like at the end of the first issue of this article:



const UserForm = () => {
    return (
      <Formik
        initialValues={{
          firstname: ''
          lastname: ''
          email: ''
          country: ''
          state: ''
          zip: '' 
        }}
        onSubmit={() => {
         console.log('form submitted')
        }}
      >
        { ({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit
        }) => (
        <div className="container">

          <div className="col-md-12 mt-5">
            <form onSubmit={handleSubmit}>
              <h4 className="mb-3">Personal information</h4>

              <div className="row">
                <div className="col-md-6 mb-3">
                  <label htmlFor="firstname">First name</label>
                  <input 
                    type="text" 
                    className="form-control" 
                    id="firstname" 
                    name="firstname" 
                    value={values.firstname}
                  />
                </div>
                <div className="col-md-6 mb-3">
                  <label htmlFor="lastname">Last name</label>
                  <input 
                    type="text" 
                    className="form-control" 
                    id="lastname" 
                    name="lastname" 
                    value={values.lastname}
                  />
                </div>
              </div>

              <div className="mb-3">
                <label htmlFor="email">Email</label>
                <input 
                  type="email" 
                  className="form-control" 
                  id="email" 
                  name="email" 
                  placeholder="you@example.com" 
                  value={values.email}
                />
              </div>

              <div className="row">
                <div className="col-md-5 mb-3">
                  <label htmlFor="country">Country</label>
                  <select 
                    className="custom-select d-block w-100" 
                    id="country" 
                    name="country" 
                    value={values.country}
                  >
                    <option value="">Choose...</option>
                    <option value="NIG">Nigeria</option>
                    <option value="GH">Ghana</option>
                    <option value="SA">South Africa</option>
                  </select>        
                </div>
                <div className="col-md-4 mb-3">
                  <label htmlFor="state">State</label>
                  <select 
                    className="custom-select d-block w-100" 
                    id="state" 
                    name="state" 
                    value={values.state}
                  >
                    <option value="">Choose...</option>
                    <option value="lagos">Lagos</option>
                    <option value="east legion">East Legion</option>
                    <option value="cape town">Cape Town</option>
                  </select>             
                </div>
                <div className="col-md-3 mb-3">
                  <label htmlFor="zip">Zip</label>
                  <input 
                    type="text" 
                    className="form-control" 
                    id="zip" 
                    name="zip" 
                    value={values.zip}
                  />
                </div>
              </div>

              <hr className="mb-4"/>
              <button className="btn btn-primary btn-lg btn-block" type="submit">
            Submit
              </button>
           </form>
         </div>

       </div>
        ) }
      </Formik>
    )
}

If you are just coming across this article and you haven't read the first issue where I created the form using Formik, then you should probably go check out Building React Forms Painlessly With Formik

Now there are different ways we can validate our forms, we can validate the form manually with Formik or we can validate it using Yup. In this article, I will only be showing you the Yup way, because I have resolved to make this particular article less lengthy than the last one.

To begin we will have to install Yup by running npm install yup in our command line. Make sure the current directory you are in when running this command is your React project folder.

In the previous article, I named the file that houses the form as userForm.js. It is in this file we will be importing Yup as follows:



import * as Yup from 'yup'

Importing Yup into our file gives us access to a property called validationSchema that we can add to the Formik component



validationSchema = {Yup.object({
  firstname: Yup
    .string()
    .required('Sorry, this is required')
    .max(5, 'Sorry, name is too long'),
  lastname: Yup
    .string()
    .required('Sorry, this is required'),
  email: Yup
    .string()
    .required('Sorry, this is required')
    .email('Invalid email format')
})}

We see from the code above that we can target specific properties that we want to validate in the validationSchema, which in turn gives us access to several methods that we can use for validation. The strings provided in some of the methods are the error messages that will be displayed if a particular input field fails a validation.

Now we will need to add some logic to show the error message on our form component when an input field fails a validation.



<div className="container">

  <div className="col-md-12 mt-5">
    <form onSubmit={handleSubmit}>
      <h4 className="mb-3">Personal information</h4>

      <div className="row">
        <div className="col-md-6 mb-3">
          <label htmlFor="firstname">First name</label>
          <input 
            type="text" 
            className="form-control" 
            id="firstname" 
            name="firstname" 
            value={values.firstname}
            onChange={handleChange}
            onBlur={handleBlur}
          />
          {errors.firstname && touched.firstname ?
            <span style={{color: 'red'}}>
              {errors.firstname}
            </span>
          : null}      
        </div>
        <div className="col-md-6 mb-3">
          <label htmlFor="lastname">Last name</label>
          <input 
            type="text" 
            className="form-control" 
            id="lastname" 
            name="lastname" 
            value={values.lastname}
            onChange={handleChange}
            onBlur={handleBlur}
          />
          {errors.lastname && touched.lastname ?
            <span style={{color: 'red'}}>
              {errors.lastname}
            </span>
          : null} 
        </div>
      </div>

      <div className="mb-3">
        <label htmlFor="email">Email</label>
        <input 
          type="email" 
          className="form-control" 
          id="email" 
          name="email" 
          placeholder="you@example.com" 
          value={values.email}
          onChange={handleChange}
          onBlur={handleBlur}
        />
        {errors.email && touched.email ?
          <span style={{color: 'red'}}>
            {errors.firstname}
          </span>
        : null} 
      </div>

      <div className="row">
        <div className="col-md-5 mb-3">
          <label htmlFor="country">Country</label>
          <select 
            className="custom-select d-block w-100" 
            id="country" 
            name="country" 
            value={values.country}
            onChange={handleChange}
          >
            <option value="">Choose...</option>
            <option value="NIG">Nigeria</option>
            <option value="GH">Ghana</option>
            <option value="SA">South Africa</option>
          </select>        
        </div>
        <div className="col-md-4 mb-3">
          <label htmlFor="state">State</label>
          <select 
            className="custom-select d-block w-100" 
            id="state" 
            name="state" 
            value={values.state}
            onChange={handleChange}
          >
            <option value="">Choose...</option>
            <option value="lagos">Lagos</option>
            <option value="east legion">East Legion</option>
            <option value="cape town">Cape Town</option>
          </select>             
        </div>
        <div className="col-md-3 mb-3">
          <label htmlFor="zip">Zip</label>
          <input 
            type="text" 
            className="form-control" 
            id="zip" 
            name="zip" 
            value={values.zip}
            onChange={handleChange}
          />
        </div>
      </div>

      <hr className="mb-4"/>
      <button className="btn btn-primary btn-lg btn-block" type="submit">
        Submit
      </button>
    </form>
  </div>

</div>

We get access to the error messages passed into the methods in the validationSchema from the errors object. To display the error message, errors.firstname checks if there was an error when validating the firstname input field and touched.firstname checks if the firstname input field was accessed or clicked on by the user. If both conditions passes, we display an error below the input field, else, no error is displayed.

The final code when we pass the validationSchema as a property to the Formik looks like this:



const UserForm = () => {
    return (
      <Formik
        initialValues={{
          firstname: ''
          lastname: ''
          email: ''
          country: ''
          state: ''
          zip: '' 
        }}
        validationSchema = {Yup.object({
          firstname: Yup
            .string()
            .required('Sorry, this is required')
            .max(5, 'Sorry, name is too long'),
          lastname: Yup
            .string()
            .required('Sorry, this is required'),
          email: Yup
            .string()
            .required('Sorry, this is required')
            .email('Invalid email format')
        })}
        onSubmit={() => {
         console.log('form submitted')
        }}
      >
        { ({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit
        }) => (
        <div className="container">

          <div className="col-md-12 mt-5">
            <form onSubmit={handleSubmit}>
              <h4 className="mb-3">Personal information</h4>

              <div className="row">
                <div className="col-md-6 mb-3">
                  <label htmlFor="firstname">First name</label>
                  <input 
                    type="text" 
                    className="form-control" 
                    id="firstname" 
                    name="firstname" 
                    value={values.firstname}
                    onChange={handleChange}
                    onBlur={handleBlur}
                  />
                  {errors.firstname && touched.firstname ?
                    <span style={{color: 'red'}}>
                      {errors.firstname}
                    </span>
                  : null} 
                </div>
                <div className="col-md-6 mb-3">
                  <label htmlFor="lastname">Last name</label>
                  <input 
                    type="text" 
                    className="form-control" 
                    id="lastname" 
                    name="lastname" 
                    value={values.lastname}
                    onChange={handleChange}
                    onBlur={handleBlur}
                  />
                  {errors.lastname && touched.lastname ?
                    <span style={{color: 'red'}}>
                      {errors.lastname}
                    </span>
                  : null} 
                </div>
              </div>

              <div className="mb-3">
                <label htmlFor="email">Email</label>
                <input 
                  type="email" 
                  className="form-control" 
                  id="email" 
                  name="email" 
                  placeholder="you@example.com" 
                  value={values.email}
                  onChange={handleChange}
                  onBlur={handleBlur}
                />
                {errors.email && touched.email ?
                  <span style={{color: 'red'}}>
                    {errors.email}
                  </span>
                : null} 
              </div>

              <div className="row">
                <div className="col-md-5 mb-3">
                  <label htmlFor="country">Country</label>
                  <select 
                    className="custom-select d-block w-100" 
                    id="country" 
                    name="country" 
                    value={values.country}
                    onChange={handleChange}
                  >
                    <option value="">Choose...</option>
                    <option value="NIG">Nigeria</option>
                    <option value="GH">Ghana</option>
                    <option value="SA">South Africa</option>
                  </select>        
                </div>
                <div className="col-md-4 mb-3">
                  <label htmlFor="state">State</label>
                  <select 
                    className="custom-select d-block w-100" 
                    id="state" 
                    name="state" 
                    value={values.state}
                    onChange={handleChange}
                  >
                    <option value="">Choose...</option>
                    <option value="lagos">Lagos</option>
                    <option value="east legion">East Legion</option>
                    <option value="cape town">Cape Town</option>
                  </select>             
                </div>
                <div className="col-md-3 mb-3">
                  <label htmlFor="zip">Zip</label>
                  <input 
                    type="text" 
                    className="form-control" 
                    id="zip" 
                    name="zip" 
                    value={values.zip}
                    onChange={handleChange}
                  />
                </div>
              </div>

              <hr className="mb-4"/>
              <button className="btn btn-primary btn-lg btn-block" type="submit">
               Submit
              </button>
            </form>
          </div>

        </div>
        ) }
      </Formik>
    )
}

That is it for this article. As you can see, with Formik and Yup we are able to avoid unnecessary boilerplate code. Formik handles the validation by default. So as you are entering values and clicking submit, it is running the validation and won't submit until all form values can pass.

Fomik makes it easy to access and update form values. Use handleChange to handle update and the values object holds all the current values. Same with the errors object we use to display the error messages for individual fields.

Above, is a demo on how our form should look and work.

Hope you find this article as useful as the first. Thanks and have a nice read.

Building React Forms Painlessly With Formik

J0shcodes — Mon, 08 Nov 2021 11:46:10 +0000

Forms are really important for us as web developers, because on every application you do in real life, you are probably going to need to do forms.

Building forms in React can be tiring and can get messy. If you have a small form with few data inputs you can build it without using a form library. The same can't be said when building forms with larger number of data inputs and validation rules.

In this article, I am going to demonstrate building forms with Formik. I am also going to go into the features Formik provides. This is the screenshot of what we will be building:

Formik Forms

We will start by creating a React application on our local environment. To do this, we open the command line and go to a document folder using:

cd documents

After that we create our React application and install bootstrap to add a little bit of styles to our form by using the classes provided by bootstrap.

Run the following commands in the command line:

npx create-react-app formik-forms
cd formik-forms
npm install react-bootstrap bootstrap
npm install formik
yarn start

The commands above should get us to the point where we have created a new React project, installed pretty much the needed dependencies, and are running the app locally.

After the React project has been created on your computer, open it with your preferred code editor and create a new file called userForm.js. Add the following code to the new file created:

import React from 'react'
import {Formik} from 'formik'
import 'bootstrap/dist/css/bootstrap.min.css'

We will be using functions, functional components, and the following form template I have created already with bootstrap. Since you have installed and imported bootstrap into your React project, you shouldn't have any issues with this.

So you can copy and paste the template below into your own userForm.js file or better still create your own using bootstrap

<div className="container">

  <div className="col-md-12 mt-5">
    <form>
      <h4 className="mb-3">Personal information</h4>

      <div className="row">
        <div className="col-md-6 mb-3">
          <label htmlFor="firstname">First name</label>
          <input type="text" className="form-control" id="firstname" name="firstname"/>
        </div>
        <div className="col-md-6 mb-3">
          <label htmlFor="lastname">Last name</label>
          <input type="text" className="form-control" id="lastname" name="lastname"/>
        </div>
      </div>

      <div className="mb-3">
        <label htmlFor="email">Email</label>
        <input type="email" className="form-control" id="email" name="email" placeholder="you@example.com"/>
      </div>

      <div className="row">
        <div className="col-md-5 mb-3">
          <label htmlFor="country">Country</label>
          <select className="custom-select d-block w-100" id="country" name="country">
            <option value="">Choose...</option>
            <option value="NIG">Nigeria</option>
            <option value="GH">Ghana</option>
            <option value="SA">South Africa</option>
          </select>        
        </div>
        <div className="col-md-4 mb-3">
          <label htmlFor="state">State</label>
          <select className="custom-select d-block w-100" id="state" name="state">
            <option value="">Choose...</option>
            <option value="lagos">Lagos</option>
            <option value="east legion">East Legion</option>
            <option value="cape town">Cape Town</option>
          </select>             
        </div>
        <div className="col-md-3 mb-3">
          <label htmlFor="zip">Zip</label>
          <input type="text" className="form-control" id="zip" name="zip"/>
        </div>
      </div>

      <hr className="mb-4"/>
      <button className="btn btn-primary btn-lg btn-block" type="submit">
            Submit
      </button>
      </form>
   </div>

</div>

Still in our userForm.js file, I will be wrapping the form components in the Formik component we imported earlier, but before that, we will have to declare our Formik component and provide a function that gives us props with a lot of method that we will use inside our form.

const UserForm = () => {
    return (
      <Formik>
        { ({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit
        }) => (
        ) }
      </Formik>
    )
}

In the code above, I have de-structured the various methods we need from the props, this will make it easier for us to use as properties in our form. For example, we can now do values, instead of props.values.

The next thing to do is to return some JSX or in this case our form components in the Formik function.

const UserForm = () => {
    return (
      <Formik>
        { ({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit
        }) => (
        <div className="container">

          <div className="col-md-12 mt-5">
            <form>
              <h4 className="mb-3">Personal information</h4>

              <div className="row">
                <div className="col-md-6 mb-3">
                  <label htmlFor="firstname">First name</label>
                  <input type="text" className="form-control" id="firstname" name="firstname"/>
                </div>
                <div className="col-md-6 mb-3">
                  <label htmlFor="lastname">Last name</label>
                  <input type="text" className="form-control" id="lastname" name="lastname"/>
                </div>
              </div>

              <div className="mb-3">
                <label htmlFor="email">Email</label>
                <input type="email" className="form-control" id="email" name="email" placeholder="you@example.com"/>
              </div>

              <div className="row">
                <div className="col-md-5 mb-3">
                  <label htmlFor="country">Country</label>
                  <select className="custom-select d-block w-100" id="country" name="country">
                    <option value="">Choose...</option>
                    <option value="NIG">Nigeria</option>
                    <option value="GH">Ghana</option>
                    <option value="SA">South Africa</option>
                  </select>        
                </div>
                <div className="col-md-4 mb-3">
                  <label htmlFor="state">State</label>
                  <select className="custom-select d-block w-100" id="state" name="state">
                    <option value="">Choose...</option>
                    <option value="lagos">Lagos</option>
                    <option value="east legion">East Legion</option>
                    <option value="cape town">Cape Town</option>
                  </select>             
                </div>
                <div className="col-md-3 mb-3">
                  <label htmlFor="zip">Zip</label>
                  <input type="text" className="form-control" id="zip" name="zip"/>
                </div>
              </div>

              <hr className="mb-4"/>
              <button className="btn btn-primary btn-lg btn-block" type="submit">
            Submit
             </button>
           </form>
         </div>

       </div>
        ) }
      </Formik>
    )
}

Now the Formik component requires properties. One a property that helps formik to know what we are going to be using on the form i.e the values that Formik component will be controlling and another property that controls the submission of the form when a submit button is clicked.

const UserForm = () => {
    return (
      <Formik
        initialValues={{
          firstname: ''
          lastname: ''
          email: ''
          country: ''
          state: ''
          zip: '' 
        }}
        onSubmit={() => {
         console.log('form submitted')
        }}
      >
        { ({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit
        }) => (
        <div className="container">

          <div className="col-md-12 mt-5">
            <form>
              <h4 className="mb-3">Personal information</h4>

              <div className="row">
                <div className="col-md-6 mb-3">
                  <label htmlFor="firstname">First name</label>
                  <input type="text" className="form-control" id="firstname" name="firstname"/>
                </div>
                <div className="col-md-6 mb-3">
                  <label htmlFor="lastname">Last name</label>
                  <input type="text" className="form-control" id="lastname" name="lastname"/>
                </div>
              </div>

              <div className="mb-3">
                <label htmlFor="email">Email</label>
                <input type="email" className="form-control" id="email" name="email" placeholder="you@example.com"/>
              </div>

              <div className="row">
                <div className="col-md-5 mb-3">
                  <label htmlFor="country">Country</label>
                  <select className="custom-select d-block w-100" id="country" name="country">
                    <option value="">Choose...</option>
                    <option value="NIG">Nigeria</option>
                    <option value="GH">Ghana</option>
                    <option value="SA">South Africa</option>
                  </select>        
                </div>
                <div className="col-md-4 mb-3">
                  <label htmlFor="state">State</label>
                  <select className="custom-select d-block w-100" id="state" name="state">
                    <option value="">Choose...</option>
                    <option value="lagos">Lagos</option>
                    <option value="east legion">East Legion</option>
                    <option value="cape town">Cape Town</option>
                  </select>             
                </div>
                <div className="col-md-3 mb-3">
                  <label htmlFor="zip">Zip</label>
                  <input type="text" className="form-control" id="zip" name="zip"/>
                </div>
              </div>

              <hr className="mb-4"/>
              <button className="btn btn-primary btn-lg btn-block" type="submit">
            Submit
             </button>
           </form>
         </div>

       </div>
        ) }
      </Formik>
    )
}

In the form component, you will notice all input components has an id. It is these id values that we use as the keys in the initialValues object. For the form submission, I will just be displaying a string in the browser's console console.log('form submitted') since we are not working with a server or database in this article.

We will need to link the initialValues property to the actual input we will be getting from our form by adding a value property to the input components and accessing users input from the values method.

const UserForm = () => {
    return (
      <Formik
        initialValues={{
          firstname: ''
          lastname: ''
          email: ''
          country: ''
          state: ''
          zip: '' 
        }}
        onSubmit={() => {
         console.log('form submitted')
        }}
      >
        { ({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit
        }) => (
        <div className="container">

          <div className="col-md-12 mt-5">
            <form>
              <h4 className="mb-3">Personal information</h4>

              <div className="row">
                <div className="col-md-6 mb-3">
                  <label htmlFor="firstname">First name</label>
                  <input 
                    type="text" 
                    className="form-control" 
                    id="firstname" 
                    name="firstname" 
                    value={values.firstname}
                  />
                </div>
                <div className="col-md-6 mb-3">
                  <label htmlFor="lastname">Last name</label>
                  <input 
                    type="text" 
                    className="form-control" 
                    id="lastname" 
                    name="lastname" 
                    value={values.lastname}
                  />
                </div>
              </div>

              <div className="mb-3">
                <label htmlFor="email">Email</label>
                <input 
                  type="email" 
                  className="form-control" 
                  id="email" 
                  name="email" 
                  placeholder="you@example.com" 
                  value={values.email}
                />
              </div>

              <div className="row">
                <div className="col-md-5 mb-3">
                  <label htmlFor="country">Country</label>
                  <select 
                    className="custom-select d-block w-100" 
                    id="country" 
                    name="country" 
                    value={values.country}
                  >
                    <option value="">Choose...</option>
                    <option value="NIG">Nigeria</option>
                    <option value="GH">Ghana</option>
                    <option value="SA">South Africa</option>
                  </select>        
                </div>
                <div className="col-md-4 mb-3">
                  <label htmlFor="state">State</label>
                  <select 
                    className="custom-select d-block w-100" 
                    id="state" 
                    name="state" 
                    value={values.state}
                  >
                    <option value="">Choose...</option>
                    <option value="lagos">Lagos</option>
                    <option value="east legion">East Legion</option>
                    <option value="cape town">Cape Town</option>
                  </select>             
                </div>
                <div className="col-md-3 mb-3">
                  <label htmlFor="zip">Zip</label>
                  <input 
                    type="text" 
                    className="form-control" 
                    id="zip" 
                    name="zip" 
                    value={values.zip}
                  />
                </div>
              </div>

              <hr className="mb-4"/>
              <button className="btn btn-primary btn-lg btn-block" type="submit">
            Submit
             </button>
           </form>
         </div>

       </div>
        ) }
      </Formik>
    )
}

Finally we will need to add an onSubmit property to our form component and pass in the handleSubmit method from the Formik component, and also add an onChange property to the input components and pass in the handleChange method.

const UserForm = () => {
    return (
      <Formik
        initialValues={{
          firstname: ''
          lastname: ''
          email: ''
          country: ''
          state: ''
          zip: '' 
        }}
        onSubmit={() => {
         console.log('form submitted')
        }}
      >
        { ({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit
        }) => (
        <div className="container">

          <div className="col-md-12 mt-5">
            <form onSubmit={handleSubmit}>
              <h4 className="mb-3">Personal information</h4>

              <div className="row">
                <div className="col-md-6 mb-3">
                  <label htmlFor="firstname">First name</label>
                  <input 
                    type="text" 
                    className="form-control" 
                    id="firstname" 
                    name="firstname" 
                    value={values.firstname}
                  />
                </div>
                <div className="col-md-6 mb-3">
                  <label htmlFor="lastname">Last name</label>
                  <input 
                    type="text" 
                    className="form-control" 
                    id="lastname" 
                    name="lastname" 
                    value={values.lastname}
                  />
                </div>
              </div>

              <div className="mb-3">
                <label htmlFor="email">Email</label>
                <input 
                  type="email" 
                  className="form-control" 
                  id="email" 
                  name="email" 
                  placeholder="you@example.com" 
                  value={values.email}
                />
              </div>

              <div className="row">
                <div className="col-md-5 mb-3">
                  <label htmlFor="country">Country</label>
                  <select 
                    className="custom-select d-block w-100" 
                    id="country" 
                    name="country" 
                    value={values.country}
                  >
                    <option value="">Choose...</option>
                    <option value="NIG">Nigeria</option>
                    <option value="GH">Ghana</option>
                    <option value="SA">South Africa</option>
                  </select>        
                </div>
                <div className="col-md-4 mb-3">
                  <label htmlFor="state">State</label>
                  <select 
                    className="custom-select d-block w-100" 
                    id="state" 
                    name="state" 
                    value={values.state}
                  >
                    <option value="">Choose...</option>
                    <option value="lagos">Lagos</option>
                    <option value="east legion">East Legion</option>
                    <option value="cape town">Cape Town</option>
                  </select>             
                </div>
                <div className="col-md-3 mb-3">
                  <label htmlFor="zip">Zip</label>
                  <input 
                    type="text" 
                    className="form-control" 
                    id="zip" 
                    name="zip" 
                    value={values.zip}
                  />
                </div>
              </div>

              <hr className="mb-4"/>
              <button className="btn btn-primary btn-lg btn-block" type="submit">
            Submit
             </button>
           </form>
         </div>

       </div>
        ) }
      </Formik>
    )
}

In my next article, which will be a sequel to this one, I will be expanding on the form we created here by doing some form validation with Yup a library used for easy form validation.

Well that does it for this article. I hope you do find article useful.

Thanks and have a nice read.