DEV Community: mai-mohamed

Folder Structure using React

mai-mohamed — Mon, 21 Mar 2022 21:58:13 +0000

There is no consensus on the right way to organize a React application. React gives you a lot of freedom, but with that freedom comes the responsibility of deciding on your own architecture. let's showing you my preferred folder structure.

Main Folders inside src

1. Assets folder

It consist of all needed assets such as

images
fonts
scss
This folder doesn't have any logic.

2. Config folder

Here we should add all needed configurations in the project
for example:

interceptor
redux (incase using redux for state management)
routes
firebase (incase using it in your project)
localization

3. Modules folder

Or some times called it pages folder .
here we can separate our project to modules for example (AUTH module , Dashboard module ,...)
inside each module we can add

components
this folder for small components shared only in this module and have no use to share it globally
redux
this folder for handling redux flow for this module
local
this folder for adding localization
entry file
finally the module entry file

4. Shared folder

This folder is responsible for all shared data we can use more than one time in our project
we can divide this folder to:

Components

which contains all atoms components (buttons , form inputs , modals , tooltips , ...)
Models

in case using type script there will be some shared models for example user model we can use it in form submission & redux flow
Utils

this folder contains all constants regex shared functions

Wide image for all folder structure

Hoping this article is useful for you and don't forget your feed back.

React Hook Form

mai-mohamed — Thu, 08 Jul 2021 14:09:35 +0000

React hook form is a tiny library without any other dependencies. It is easy to use which requires us to write fewer lines of code compared to other libraries.

1. Why Not Other React Library Forms?

Performance is important. This is a tiny library without any dependencies.
Reduces the code to handle forms, with less complexity due to the Hooks.
Minimizes the number of re-renders and faster mount.

2. Installation

It's the time to make our forms powerful with the use of React Hook Forms! Open your terminal and then execute the following commands which makes a new React project:

npx create-react-app react-hook-form-demo
cd react-hook-form-demo
npm install react-hook-form
npm start

At the end of the article we will be able to create a simple registration form like this

let's start

3. Basic form

Assume that we have a simple form with a user name input field and logs the data on console after submission

 const App=()=> {
  return (
    <form>
      <input type="text" placeholder="user name"/>
      <button type="submit">submit</button>
    </form>
  );
}

export default App;

Time to import react hook form

import { useForm } from "react-hook-form";

const App = () => {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" placeholder="user name" {...register("userName")} />
      <button type="submit">submit</button>
    </form>
  );
};

export default App;

After submittion we got the consoled data but what are those new words (useForm , register )

Before we move ahead we need to know how this library works,

useForm

It is custom hook for managing forms.
This is one of those functions which you will be calling first before you apply any handling logic to your existing forms. It returns an object containing some properties. For now, you only need register and handleSubmit

register

Allows you to register an input ref and apply validation rules into React Hook Form.

handleSubmit

This function will received the form data if form validation is successful.

4.Adding default values (initial values)

It is common to initialize a form by passing defaultValues to useForm.

 const { register, handleSubmit } = useForm({
    defaultValues: {
      userName: "Mai",
    }
  });

5. Basic validation

Assume that we need to validate this user name input to be a required field and must be at least 3 characters

 import { useForm } from "react-hook-form";

const App = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({ mode: "onChange" });
  const onSubmit = (data) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        placeholder="user name"
        {...register("userName", {
          required: true,
          minLength: {
            value: 3,
          },
        })}
      />
      {errors.userName?.type === "required" && (
        <small>user name is required</small>
      )}
      {errors.userName?.type === "minLength" && (
        <small>user name must be atleast 3</small>
      )}
      <button type="submit">submit</button>
    </form>
  );
};

export default App;

React Hook Form provides an errors object to show you the errors in the form.

5. Adding nested fields

Assume that user should enter his address throw two nested fields (country , city)

the final view should be like this

{userName:"toty",
 address:{country:"x",city:"y"}
}

 import { useForm } from "react-hook-form";

const App = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({ mode: "onChange" });
  const onSubmit = (data) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        placeholder="user name"
        {...register("userName", {
          required: true,
          minLength: {
            value: 3,
          },
        })}
      />
      {errors.userName?.type === "required" && (
        <small>user name is required</small>
      )}
      {errors.userName?.type === "minLength" && (
        <small>user name must be atleast 3</small>
      )}

      <input
        type="text"
        placeholder="country"
        {...register("address.country", {
          required: true,
        })}
      />
      <input
        type="text"
        placeholder="city"
        {...register("address.city", {
          required: true,
        })}
      />
      <button type="submit">submit</button>
    </form>
  );
};

export default App;

Wooow It is soo easy !!

But the code is little long so let's make a small refactor for moving the input to be a shared component and also using react bootstrap

6. Integration with react bootstrap

import { Form } from "react-bootstrap";
const Input = ({
  label,
  type,
  placeholder,
  controls,
  errorMsg,
  disabled,
}) => {
  return (
    <div className="mb-3">
      {label && <Form.Label> 
      {label}</Form.Label>}
      <Form.Control
        {...controls}
        type={type}
        placeholder={placeholder}
        disabled={disabled}
      />
      {errorMsg && <small> 
      {errorMsg}</small>}
    </div>
  );
};
export default Input;

and the main component after refactoring should be like this

    <Input
      label="User Name"                
      type="text"
       placeholder="enter your user name"
       controls={register("userName", {
       required: true,
       minLength: {
       value: 3,
       },
        })}
      errorMsg={
      errors.userName?.type === "required" &&
      "user name is required"
       }

      />

7. Integration with third party libraries

Assume that our third party library is React select
npm install react-select
first we need to add a shared component for react select

import React from "react";
import Select from "react-select";
import { Controller } from "react-hook-form";

const InputSelect = ({
  options,
  label,
  control,
  controls,
  name,
  errorMsg,
  placeholder,
  asterick,
}) => {
  return (
    <>
      <label>
        {label} {asterick && <span>*</span>}
      </label>
      <Controller
        name={name}
        isClearable
        control={control}
        {...controls}
        render={({ field }) => (
          <Select
            {...field}
            options={options}
            placeholder={placeholder}
          />
        )}
      />
      {errorMsg && <small>{errorMsg}</small>}
    </>
  );
};
export default InputSelect;

But what Controller means
It is a wrapper component from react hook form that makes it easier for you to work with third party libraries.

and now we can use this select in our main component like this

const genderOptions = [
    { value: "male", label: "Male" },
    { value: "female", label: "Female" },
  ];

<InputSelect
  control={control}
  options={genderOptions}
  placeholder="Gender"
  asterick={true}
  label="Gender"
  name="gender"
  controls={register("gender", {
  required: true,
   })}
  errorMsg={
  errors?.gender?.type === "required" && 
  "gender is required"
    }
   />

stay tuned for the next article to complete our journey in react hook forms
and don't forget your feed back.

CSS Clean Code

mai-mohamed — Thu, 11 Feb 2021 00:49:27 +0000

“Clean code is a code that is written by someone who cares” — Michael Feathers

There are some points we need to pay attention to while writing CSS. Now I'm going to share some of the most important ones with you.
So let's take a tour...

1. Name things intelligently

The name of a selector should be self-descriptive and readable...
There are many naming conventions that you can use in your project like BEM (block element modifier) and others.

2. DRY

DRY stands for "Don't Repeat Yourself". As we can understand from its name, DRY aims to avoid repetition as much as possible.‌
For example,

.submit-btn {
  background: pink;
  color: white;
  padding: 10px 30px;
  text-align: center;
  font-size: 18px;
  border-radius: 20px;
}

.cancel-btn {
  background: gray;
  color: white;
  padding: 10px 30px;
  text-align: center;
  font-size: 18px;
  border-radius: 20px;
}

Here we can use the DRY principle by writing the common rules once in an additional class and the different rules each in other classes:

.btn{
  color: white;
  padding: 10px 30px;
  text-align: center;
  font-size: 18px;
  border-radius: 20px;
}
.submit-btn {
  background: pink;
}

.cancel-btn {
  background: gray;
}

3. Avoid the !important

p{
  font-size:18px !important
}

The !important tag has the highest specificity of all CSS selectors. If you need to override an important tag is to use another important tag. And this makes you use more and more important tags. which makes your CSS code much harder to maintain. So please don't use !important.

4. Use Shorthands

Without shorthands, CSS would look like this:

.btn{
  padding-left:20px;
  padding-right:20px;
  padding-top:10px;
  padding-bottom:10px;
}

Some of the CSS properties like paddings, margins, fonts, and borders can be written in a much simpler way by shorthand.
So we can write the previous example like this:

.btn{
  padding:10px 20px;
}

5. Don't Use Inline-Styles

According to the separation of concerns principle, CSS, and HTML should be separated for reasons like better readability and maintenance.
Another problem using inline-styles is that you need to use !important tag to override!!

6. Be Consistent

Writing clean HTML code isn’t always about choosing good practices and avoiding bad ones. Many times you can use different approaches to write the same line of code.
For example:

You can use a dash or underscore for ids and classes
You can use a single quote or double quote argument Just be consistent. When you find a specific practice that you like, stick to it and use it everywhere. Inconsistency makes your code extremely confusing for you and for the poor soul who has to read it.

7. Avoid Comments

“Don’t comment bad code. Rewrite it.” — Brian W. Kernighan

8. Avoid Overly Specific Selectors

Maintaining low specificity in your selectors is one of the keys to creating lightweight, reusable, and maintainable CSS. As you may recall on specificity, a type selector has the specificity 0,0,1. Class selectors, on the other hand, have a specificity of 0,1,0:

/* Specificity of 0,0,1 */
p {
  color: pink;
}

/* Specificity of 0,1,0 */
.color-light {
  color: pink;
}

When you add a class name to an element, the rules for that selector take precedence over more generic-type selector rules. There’s no need to further qualify a class selector by combining it with a type selector. Doing so increases the specificity of that selector and increases the overall file size.

Put differently, using p.color-light is unnecessarily specific because .color-light achieves the same goal. Another advantage is that .color-light can be reused with other elements. A p.color-light selector limits the .color-light class to p elements.

8. Don’t Chain Classes

Also, avoid chaining class selectors. Selectors such as .btn.submit have a specificity of 0,2,0. Higher specificity means they’re hard to override.

9. Avoid Using id Selectors

Because you can only have one element per id per document, rule sets that use id selectors are hard to repurpose.

Conclusion

These are some important tips that I can suggest for improving your CSS skills. If you have any questions, or you think there are also other tips for writing better CSS, don't hesitate to comment down below.

DEV Community: mai-mohamed

Folder Structure using React

Main Folders inside src

1. Assets folder

images

fonts

scss

2. Config folder

interceptor

redux (incase using redux for state management)

routes

firebase (incase using it in your project)

localization