
**Conditional rendering refers to the ability of a component to display different content based on specific conditions**.

It allows developers to control what elements are rendered and when they are rendered, depending on the state of the application or certain user interactions.

## How to conditionally render in react

Let's look at the example below where we want to **show a welcome message and a login button** to the user **depending on the props** we get from parent component i.e. **isLoggedIn**. By default we have set it to false.

Conditional rendering is achieved by using **JavaScript expressions** inside the **JSX (JavaScript XML) code**. The expressions are evaluated at runtime, and the resulting content is rendered accordingly.

1. ## Using ternary operator

In the example below, we used a ternary operator **(condition ? trueContent : falseContent)** to conditionally render the welcome message.

```jsx
import React from "react";

const Dashboard = ({ isLoggedIn = false }) => {
  return (
    <div>
      { 
        isLoggedIn ? 
        <h1>Welcome, User!</h1> : 
        <h1>Welcome, Guest!</h1>
      }
    </div>
  );
};
```
If ***isLoggedIn*** is ***true*** it will render ***Welcome, User!*** else it will render ***Welcome, Guest!***.

2. ## Using inline logical AND operator

We also used a logical AND operator to render a button **(condition && contentToBeShown)**

```jsx
import React from "react";

const Dashboard = ({ showLoginButton = true }) => {
  return (
    <div>
      {
        showLoginButton && <button type="button"> Login </button>
      }
    </div>
  );
};
```
Here if ***showLoginButton*** is ***true*** it will render the Login button else it will render nothing.

## Conclusion

Conditional rendering is a fundamental concept in React, as it enables dynamic and interactive user experiences.



Redux has gained immense popularity as a state management library and has become a staple in every project. However, there are times where developers tend to overuse Redux, even when it might not be necessary.

In this article, we will see what can be used instead of redux for different state mangement scenarios. So let's get started!

But before we get into when not to use Redux let's have a look at why Redux is so famous!

## Benefits of Redux
1. ### Centralized State: 
Redux stores the application state in a single store, making it easy to access and update from any component within the application.

2. ### Predictable Updates: 
Due to the use of pure functions called reducers to update the state, it is always easy to predict which inputs can give you what results.

3. ### Easy config: 
It has a very easy setup that is explained on its [official website](https://redux.js.org/introduction/getting-started).

4. ### Easy to debug:
With the use of redux dev tools it becomes easy for debugging complex states.


All these benefits make Redux an attractive choice for state management, but a developer needs to first understand whether Redux is truly necessary for their scenario. Let's see some of the alternatives below.


## When can Redux be avoided ?

1. ### Local Component State using a useState hook

There are so many times when the state required by a component is local and doesn't need to be shared across the application. 
In such scenarios it is best to use local state using a useState hook.

Consider the below example, where we have an input that takes user's phone number and sends this number to an API on submit.
As this number is no longer required to be shared between other components local state is the best choice here.

```js
import React, { useState } from 'react';

const Form = () => {
    const [phoneNumber, setPhoneNumber] = useState('');

    return (
        <>
            <input
                type="number"
                value={phoneNumber}
                onChange={(e)=> setPhoneNumber(e.target.value)}
            />
            <p>Entered value: {name}</p>
            <button
                type="button"
                onClick={()=> {/* Some API call on the button */} }
            >
                Submit
            </button>
        </>
    )
}
```

2. ### Context API for small to medium sized Applications

At times in a small to medium size applications it is needed to share state across components. In such scenarios we can still avoid using Redux and go for Context API provided by react.

To read more on context API, read my previous article - [what is Context API ?](/blog/what-is-react-context-api-and-usecontext/) 


3. ### Minimal Shared State by passing props and state down

There are times when state and props defined in the parent component are only needed by the children. The best way to handle such scenarios is to pass state and props down to children.

Consider below example where we passed the state todos and removeTodo function that updates the Todos to TodoList child component.

```js
// PARENT COMPONENT
const App = () => {
  const [todos, setTodos] = useState([]);

  const removeTodo = (index) => {
    const updatedTodos = todos.filter((item, i) => i !== index);
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h2>Todo List</h2>
      <TodoList todos={todos} removeTodo={removeTodo} />
    </div>
  );
};


// CHILD COMPONENT
const TodoList = ({ todos, removeTodo }) => {
  return (
    <ul>
      {todos.map((todo, index) => (
        <TodoItem key={index} todo={todo} removeTodo={() => removeTodo(index)} />
      ))}
    </ul>
  );
};

```


## Conclusion

While Redux is efficient, but it is worth reevalutating your application needs and do you still really need Redux. 




Did you know, **only 16%** of your website users **read word-by-word**?

Then what about the **rest 79%** ? Well, they **SCAN**! 📜👨‍💻

Ever assumed that every user will use the Webpage that you designed, exactly as you intended?
Ever had a **hilarious** moment during a **usability** test when a user **clicked** on something **totally unrelated or inappropriate**? 😆

But the **truth** is, users don't always use websites the way we expect them to.

Krug helps us understand, if you **want to design effective Web pages**, you have to **learn** to live with ⬇️

## The three real-world Web use facts 

1. ## We don't read pages. We scan them.

First fact about the Web use is that **people** tend to **spend** very **little time** reading most Web pages. 

They **skim the pages** and **look** for **words** or phrases that **catch our eye**. It is a natural reading pattern. 
<Image
  src="/public/img/dont-make-me-think/read-pattern.PNG"
  alt="dont-make-me-think-summary | Rupali Yadav"
/>

## Why do users scan?
- most users want to get their work done quickly. **Users act like sharks**: **They have to keep moving, or they'll die**.
-  Users are only **interested** in a **fraction of what's on the page** that matches their **interest** or what task **they intend to do** on the webpage.
- Do you know 🤔, **scanning is a natural process for humans?** We learn it right when we learn to read. In fact, **we are pros** at it!
We all have been scanning **books, facebook, instagram**.

2. ## We don't make optimal choices. We satisfice.
When creating pages, we **assume** that the user would **quickly scan** the page, **weigh** their **options**, and select the best one.

But in reality they just select **the first reasonable option** that **might lead to what they are looking for**. This is called **satisficing**.

It is not always true that users never weigh their options, it depends upon **what is in their mind right now? how much time they have ? and how much confidence they have in the site!**

## why don't Web users look for the best choice?

- users are **always in a hurry**.
- There is **no penalty** for **guessing wrong**. Even if they clicked on an option that didn't give them what they wanted, they can always **come back via back button**. 

- BTW do you know 🤔, **Back button is the most used button in a web browser**.

- **Guessing** is more **fun**. Guessing is **less work** than weighing options. Users don't want to put in brains. They want to do **easy tasks** that can lead them to what they want to achieve.


3. ## We don't figure out how things work. We muddle through.

While using any kind of tech, people tend to **not read the instructions** and jump in **and explore** it without understanding how it works.

Krug also playfully says that- 

> **I wouldn't be surprised if even Mark Zuckerberg and Sergey Brin have some bits of technology in their lives that they use by muddling through.**

## Why do users muddle instead of understanding it first?
- Most of the **users don't care** as long as they can use the website and get something meaningful out of it.
- If users **find** something **that works**, they **stick to it**. It doesn't matter if there's an alternative that can get the same job done in lesser steps. They will only **shift** to an **alternate** solution, if they **accidently find one**.


## Conclusion

The second chapter of "Don't Make Me Think Revisited" has taken us through the three facts about how a user uses a website. I will be writing more such articles on further chapters of this book, so stay tuned! 😎 



One error that TypeScript developers frequently run into is

> **_"Property 'ABC' does not exist on type 'DefaultRootState'"_**

Lets see why this error occurs and how to fix it.


## Why "Property 'ABC' does not exist on type 'DefaultRootState'" occurs ?

This error occurs when **TypeScript** cannot find the property within the **'DefaultRootState'** type.

## Let's understand this using an example

Consider we have a redux store and a reducer created to store userDetails as shown below:

```js

// userDetails.ts 

interface Iinitialstate {
    users: Array<object>;
    isLoggedIn: boolean;
}

const initialstate : Iinitialstate = {
    users: [],
    isLoggedIn: false
}
const userDetailsReducer = (state = initialstate, action: Action) => {
    switch (action.type){
        case "updateUserData": {
            return {
                // some logic
            }
        }
        default: 
            return state;
    }
}
export default userDetailsReducer;
```



And we are trying to **read the state from reducer** in our component **User.ts** as shown below

```js
// Users.ts
import { useSelector } from 'react-redux';

const Users = () => {
    const users =  useSelector((state) => state?.userDetails);

}

```
But now when we run this code we will get this error - **"Property 'userDetails' does not exist on type 'DefaultRootState'"**

## How to fix the "Property 'userDetails' does not exist on type 'DefaultRootState'" error ?

- To resolve the error, we need to import **RootStateOrAny** type provided by **react-redux** library. The **RootStateOrAny** type allows us to access the Redux store state without specifying the exact type.

- Assign **RootStateOrAny** as the **type for the state parameter** in the **useSelector hook**, so that  we can access the userDetails property from the Redux store as shown below. 

```js
// Users.ts
import { useSelector, RootStateOrAny } from 'react-redux';

const Users = () => {
    const users =  useSelector((state: RootStateOrAny) => state?.userDetails);

}

```


## Conclusion

This solution can also be helpful in scenarios where the exact type of the state is unknown or when dealing with complex store structures.




As someone who has been working in front-end development for 6+ years, I understand the importance of **creating user-friendly websites and products**. There is no greater joy than delivering a website that users can easily navigate and enjoy ✨

In order to learn more about user experience, I decided to dive into this book called [Don't Make Me Think](https://www.amazon.in/Dont-Make-Think-Revisited-Usability/dp/9332542864/ref=asc_df_9332542864/?tag=googleshopdes-21&linkCode=df0&hvadid=396985204224&hvpos=&hvnetw=g&hvrand=8449468224624434223&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=9301674&hvtargid=pla-405660543328&psc=1&ext_vrnc=hi) by Steve Krug.

In this article, we are going to talk about the key take aways from the **first chapter- Don't Make Me Think**. So let's get started! 😎

In the opening chapter, aptly titled *"Don't Make Me Think!"* Krug lays the foundation for our exploration of UX principles✅ in a friendly and conversational tone that anyone would join in.


## Simplicity is Key

- The first major takeaway is that simplicity is the secret sauce behind a remarkable user experience. Keeping things simple and straightforward on a website helps users navigate effortlessly, thereby saves them time and effort.


## Self-Evident Webpages

- Creating self-evident webpages is a game-changer. He explains how creating layouts that are intuitive and visually appealing can help users grasp quickly the purpose and functionality of each element. 

- The goal is to make users say, **"Wow, this makes sense!"** Imagine a visitor to your website who has no prior knowledge of the topic saying this. It should be so simple that everybody can understand it right away.

## Avoid Puzzles, make it user-friendly

> **Users enjoy puzzles in their place -- when they want to be entertained or diverted or challenged and not when they're trying to find out what time their dry cleaner closes**

- Avoid putting your users through puzzles. If your website requires users to go through complex steps to achieve something, you risk frustrating them and they may choose to abandon your site for a more user-friendly alternative.

- Every effort should be to streamline processes, simplify decision-making, and minimize the effort required to complete tasks on your website thereby making it user-friendly.

## Clear and Clickable Buttons

- Lastly, Krug emphasizes the significance of making buttons instantly recognizable as clickable elements. Users should never have to question whether something is interactive or not. 

Don't let the user spend even a millisecond whether it is clickable or not. By designing buttons that clearly look like buttons, we eliminate any doubt and ensure a seamless user experience. ⏰🚫

## Conclusion

And there you have it! The first chapter of "Don't Make Me Think Revisited" has already left a lasting impression on me. It gives us  a friendly reminder of the importance of **simplicity, intuitive design, eliminate unneccessary puzzles and recognisable buttons** to create exceptional user experiences. I will be writing more such articles on further chapters of this book, so stay tuned!😎


In ReactJS, class components are the traditional way of building components but with the release of ReactJS 16.8, functional components were introduced and it made writing components much more simpler, cleaner and faster than class components 🙌🏻

Many companies and developers initially started with class components in their React applications but now find it difficult to migrate to Functional components.

This is where our article will help you to convert the legacy class-based components into more efficient functional components. The future developers will definitely thank you for this. So go ahead and be a hero! 😎

## Difference between class and functional components

Before we proceed, it's important to understand the key differences between class and functional components. To learn about it, you can read this [article](https://www.webexpe.com/blog/difference-between-functional-and-class-components/).

## Steps to convert a React class component to a functional component

let's consider the following react class component example:

```js
import React, { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  componentDidMount() {
    // asyncronous calls/ data fetching
    console.log("Component did mount");
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== state.count) {
      console.log("Count changed");
    }

    console.log("Component did update");
  }

  componentWillUnmount() {
    console.log("Component will unmount");
  }

  handleClick() {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  }

  render() {
    const multiplicationValue = count * 2;
    return (
      <div>
        <p>count multiplied by 2 is equal to {multiplicationValue} </p>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

export default Counter;
```

1.  ## Paste all the imports at the top

    The first step is to place all the import on top of your file.

    ```js
    import React from "react";
    ```

2.  ## Convert the class into an arrow function

    An **arrow function** takes **props** as an argument, which is an object that contains the properties passed from the parent component. You can also destructure the props.

    from this

    ```js
    class Counter extends Component {
      //...
    }
    ```

    to this

    ```js
    const Counter = (props) => {
      //...
    };
    ```

    3. ## Define the State and Props using react hooks

       The second step is to identify the state and props used in the class component and redefine using **react useState hook**.

       from this

       ```js
       class Counter extends Component {
         constructor(props) {
           super(props);
           this.state = {
             count: 0,
           };
         }
       }
       ```

       to this

       ```js
       import React, { useState } from "react";

       const Counter = (props) => {
         const [count, setCount] = useState(0);
       };
       ```

    4. ## Remove react render method

       The **render()** method is responsible for rendering the component's HTML. In a class component, the render() method is mandatory. However, in a **functional component**, you can use the return statement to **directly return the JSX**. If you have any code before the return statement in a class component, just let it stay there.

       from this

       ```js
       // ...
        render() {
           const multiplicationValue = count*2;
           return (
               <div>
                   <p>You clicked {this.state.count} times</p>
                   <button onClick={this.handleClick}>Click me</button>
               </div>
           );
       }
       // ...

       ```

       to this

       ```js
       const multiplicationValue = count * 2;
       return (
         <div>
           <p>You clicked {this.state.count} times</p>
           <button onClick={this.handleClick}>Click me</button>
         </div>
       );
       ```

    5. ## Rewrite all functions into arrow functions and remove event handler bindings
       In a functional component, we can write arrow functions instead of having functions defined with traditional function syntax.

       Also, we **no longer need to bind event handlers** with function components in the constructor. So, go ahead and remove them.

        from this

        ```js
        // ...
        handleClick() {
            this.setState(prevState => ({
                count: prevState.count + 1
            }));
        }
        // ...

        ```
        to this

        ```js
        const handleClick = () => {
            setCount(count + 1);
        }

        ```

    6. ## Replace the Lifecycle Methods using useEffect hook

       To define various **react lifecycle methods** we need to use the **useEffect hook** as shown below

       from this

       ```js
       componentDidMount() {
           // asyncronous calls/ data fetching
           console.log('Component did mount');
       }

       componentDidUpdate(prevProps, prevState) {

           if(prevState.count !== state.count ) {
               console.log('Count changed');
           }
           console.log('Component did update');

       }

       componentWillUnmount() {
           console.log('Component will unmount');
       }

       ```

       to this

       ```js
       // handle any state side effects by passing dependency to useEffect
       useEffect(() => {
         console.log("Count changed");
       }, [count]);

       // componentDidMount
       useEffect(() => {
         // asyncronous calls/ data fetching
         console.log("Component did mount");

         // componentWillUnmount- return a function you to execute on unmount
         return () => {
           console.log("component will unmount");
         };
       }, []);

       // componentDidUpdate
       useEffect(() => {
         console.log("Component did update");
       });
       ```

## Conclusion

With the steps outlined in this article, you can quickly and easily convert your class components to functional components. One of the main benefits of using functional components is that they are easier to read and write. They are also easier to test and debug, which can save you a lot of time in the long run.



Engaging users and giving them an fun experience are essential in the realm of web design. There are numerous approaches to achieving this, and we'll look at one of them today: **integrating a simple mouse trailer that moves with the cursor**.

This tutorial will walk you through the process of making a simple mouse trailer that will delight your website's visitors and might make them stay longer on your website.

## Demo

<iframe
  height="350"
  style={{ width: "100%" }}
  scrolling="no"
  title="Simple Mouse Trailer using HTML, CSS, and JavaScript."
  src="https://codepen.io/webexpe/embed/preview/RwexzmG?default-tab=result"
  frameBorder="no"
  loading="lazy"
>
  See the Pen{" "}
  <a href="https://codepen.io/webexpe/pen/RwexzmG">
    Simple Mouse Trailer using HTML, CSS, and JavaScript
  </a>
  by WebExpe (<a href="https://codepen.io/webexpe">@webexpe</a>) on <a href="https://codepen.io">
    CodePen
  </a>.
</iframe>

_We have implemented the same thing on this current website on which you are reading this article :P :P_

Lets get started!!

---

## HTML Structure

First lets set up the HTML structure necessary for our mouse trailer effect.
We have a **section** which will be a container for our mouse trailer, you can also directly place the mouse trailer inside **body** tag.

```html
<section>
  <div class="trailer" id="trailer"></div>
</section>
```

## CSS Styling

We will give the section some base styling of **height, width** and **background**, so that our mouse trailer is visible.

Next we will style the mouse trailer with the basic styles. Few important properties here are

- **position**
  This will keep the trailer in the visible window and viewport.
- **top and left**
  This will initially position the trailer to top left corner.
- **z-index**
  This will keep the trailer on top of all other contnet on the web page.
- **mix-blend-mode**
  This will sets how trailers color/content should blend with the content of the other element's background.

```css
section {
  width: 100%;
  height: 100vh;
  background: #1d1e22;
}

.trailer {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #ffffff;

  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 1000000;

  mix-blend-mode: difference;
  pointer-events: none;
}
```

By now you can see the mouse pointer on the top left corner of the screen.

## JavaScript

With the help of some simple JavaScript, we can make the trailer element follow the cursor with a subtle animation.

```js
const trailer = document.getElementById("trailer");

const animateTrailer = (e, interacting) => {
  const x = e.clientX - trailer.offsetWidth - 10;
  const y = e.clientY - trailer.offsetHeight - 10;
  const offSetCorrection = 15;

  const keyframes = {
    transform: `translate(
                  ${interacting ? x + offSetCorrection : x}px, 
                  ${interacting ? y + offSetCorrection : y}px) 
                  scale(${interacting ? 5 : 1})`,
  };

  trailer.animate(keyframes, {
    duration: 1000,
    fill: "forwards",
  });
};

window.onmousemove = (e) => {
  const interactable = e.target.closest(".interactable"),
    interacting = interactable !== null;
  animateTrailer(e, interacting);
};
```

- First we will get our trailer div and store it in a const.
- Next we will create a method **"animateTrailer"** which will take event **"e"** and an extra variable **"interacting"** to add a scale animation when the trailer is near an dom element with **"interactable"** class.
- In the method **"animateTrailer"**, first we will calculate the **x** and **y** position for our trail with the help of event e from which we will get the cursor position.
- We will be adding a small offset to the trail so that its not resting on our cursor but a little bit away from it.
- Next we will create the transform property using the X and Y values we calulated and also we will add the scale property for **interactable** elements.
- As you can see we have also added offset correction when **interacting** is true, so that the trail div will move to the cursor position on any interactive div. **_Refer the codepen example or play around our website by hovering on different links to see this effect._**
- Next we will pass this **"keyframes"** transform property to **".animate"** method with **"duration"** and **"fill: forwards"**, the fill forwards in important as it will keep the trail on the last position of the cursor if the cursor goes off the page.
- Finally we listen to **"window.onmousemove"** method and call our **animateTrailer** method in it and pass the **event** and **interactable** params.

---

And that's it, we have a simple and fun interaction for your website.

Always remember to create a balance between visual appeal and usefulness when using such effects. Test with various shapes, sizes, and hues to match the mouse trailer to your website's color scheme and theme.



Have you ever seen a picture and thought it represented more than the sum of its parts? This is so because our brains are naturally good at classifying visual data into meaningful patterns. The Gestalt's principle of perception is this idea.

The Gestalt principles are a collection of guidelines that explain how our brains compile sensory data into a coherent whole. The word "gestalt" is a translation of the German word for "shape" or "form." The whole is larger than the sum of its parts, according to this theory.

Let's look at few instances where Gestalt's idea was put into practise:

## Proximity

<Image
  src="/public/img/gestalts/proximity.png"
  alt="Gestalts proximity principle | webexpe.com"
/>
According to this theory, people tend to regard objects as belonging together when
they are closer together. For instance, while looking at a collection of dots on
a page, you are more likely to see them as distinct groupings than as individual
dots.

## Similarity

<Image
  src="/public/img/gestalts/similarity.png"
  alt="Gestalts Similarity principle | webexpe.com"
/>
Objects that are similar to one another in terms of their shape or colour are thought
to belong together. For instance, if you observe a collection of circles in a variety
of colours, your brain will sort the circles according to colour.

## Closure

<Image
  src="/public/img/gestalts/closure.png"
  alt="Gestalts Closure principle | webexpe.com"
/>
According to this theory, humans frequently mistakenly think that incomplete shapes
are complete. For instance, if you see a circle with a small portion missing, your
brain will fill up the gap and you will think the circle is entire.

## Continuity

<Image
  src="/public/img/gestalts/continuity.png"
  alt="Gestalts Continuity principle | webexpe.com"
/>
Our minds frequently interpret lines as continuing smoothly and unbrokenly. If an
object partially blocks part of a line, for instance, your brain will "fill in the
gaps" and make the line appear continuous.

## Figure-ground

<Image
  src="/public/img/gestalts/figure-ground.png"
  alt="Gestal's Figure-ground Principle | webexpe.com"
/>
According to this theory, objects are typically perceived as either the "figure"
(the subject of interest) or the "ground" (the backdrop). Your brain, for instance,
will interpret of two faces creating a candlestick or vase between them.

The bigger portion of a picture will often be seen by your brain as the ground and the smaller portion as the figure. However, as seen in the image above, lighter and darker colours can affect what is perceived as the figure and what is perceived as the ground.

## Common Fate

<Image
  src="/public/img/gestalts/common-fate.jpg"
  alt="Gestal's Common Fate Principle | webexpe.com"
/>
The Common Fate defines how our brain perceives objects moving in unison. When items
travel in the same direction at the same pace, we prefer to view them as a group
or a single object, according to this principle.

For instance, your brain will interpret a flock of birds flying in the same direction and at the same pace as one unit rather than as individual birds.

---

Designers can build more effective and interesting visual compositions by knowing these principles. **Closeness and Similarity**, for example, can assist generate a sense of unity and cohesiveness in a design, whilst **closure and continuity** can help direct the viewer's eye through the composition.

Finally, Gestalt's perception principle gives a framework for understanding how our brains organise visual information. We can develop more effective and compelling visual compositions that capture and hold the viewer's attention by using these ideas to our designs and artwork.


React context API was released in React version 16.3 and was appreciated from day one of the release as it served as a global state across components for small to medium sized applications. 

In this article, we will see what is Context API and when and how to use it. So let's get started!


## what is Context API?
The Context API in React provides a way to pass data through the component tree without the need to pass props down manually at every level. The global state created using context API can be accessed by any component within the tree, regardless of how close they are to one another in the hierarchy.



## When to use Context API?

1. **To eliminate prop drilling**

Using Context API eliminates the need for prop drilling, where props are passed from a higher-level component to a lower-level component through multiple layers.

2. **To avoid a separate library for state management**

At times in a small to medium size applications it is needed to share state across components. By using another library for it can impact the performance of your application as each state change triggers a full re-rendering of connected components.

In such scenarios going for Context API provided by react is a good choice.

## How to use Context API?
Suppose we want to create an application where we want to know the user details across different components (Profile and Dashboard) within the scope.

1. Create a **separate folder** named **contexts** like we do it for custom hooks
2. Inside this folder **create a file** named **UserContext.js** 
3. **Create a context** 
    
    import **createContext** from react and create one like below

    ```js
    import React, { createContext, useState } from 'react';

    export const UserContext = createContext();

    ```
4. **Create a provider component**in the same file. From here we will make the **necessary state available** to make available to     **other components** using the **Provider**.
    In our case, we have a user state and a login and logout method that update the user state.
    
    ```js
    export const UserProvider = ({ children }) => {

        // default state
        const [user, setUser] = useState({
            name: "Rupali",
            email: "xyz@abc.com"

        });

        const login = (userData) => {
            setUser(userData);
        };

        const logout = () => {
            setUser(null);
        };


        return (
            <UserContext.Provider value={{ user, login, logout }}>
                {children}
            </UserContext.Provider>
        );
    };
    ```
5. Wrap the components with the provider

    ```js
    // App.js

    import Dashboard from './Dashboard.js';
    import Profile from './Profile.js';


    const App = () => (
        <UserProvider>
            <Profile />
            <Dashboard />
        </UserProvider>
    );
    
    ```

6. Consume the Context 
    Now that we have our context created and provided at root level, let's consume it inside the Dashboard and Profile like this by using **useUserContext**

    ```js
    // Dashboard.js

        import { useContext } from 'react';
        import { UserContext } from '../contexts/UserContext.js';

        const Dashboard = () => {
            const { user } = useContext(UserContext);

            return (
                <div>
                    <h2>Dashboard</h2>
                    {user && <p>Welcome to the dashboard, {user?.name}!</p>}
                </div>
            );
        };
    ```

    ```js
    // Profile .js

        import { useContext } from 'react';
        import { UserContext } from '../contexts/UserContext.js';


        const Profile = () => {
            const { user, logout } = useContext(UserContext);

            return (
                <div>
                    {user ? (
                        <>
                        <h2>Welcome, {user.name}!</h2>
                        <p>Email: {user.email}</p>
                        <button onClick={logout}>Logout</button>
                        </>
                    ) : (
                        <p>Please log in </p>
                    )}
                </div>
            );
        };
    ```
Bonus!!😎 You can see this complete working code in the codesandbox below:
## example in codesandbox 

 <iframe
  src="https://codesandbox.io/p/sandbox/awesome-hellman-h48u7u?fontsize=14&hidenavigation=1&theme=dark"
  style={{ width: "100%", height: "500px" }}
  title="Context API Example"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>



## Conclusion

While Redux is efficient, but it is worth reevalutating your application needs and do you still really need Redux. 




API requests are an important part of modern web applications. They enable the creation of dynamic, responsive web pages by allowing developers to access data from a variety of sources. In this article, we'll explore fetch, a method in JavaScript and axios, a library used to make API requests and learn how to use them with React to make api call, specifically by using the useEffect hook.

## What is an API?

Before we dive into Fetch and Axios, let's first understand what is an API.  
An API or Application Programming Interface, is a set of protocols, routines, and tools that allow different software applications to communicate with each other. APIs provide a standardized way for developers to access data and services from external sources, making it easier to build robust, integrated applications. Now that we know what an API is, let's get started with our topic!

## Here's a step by step guide to make an API call:

Consider an example, where we want to fetch user list from the api on load of the component and display the list on the screen.
We are going to use the [JSONPlaceholder's](https://jsonplaceholder.typicode.com/users "JSONPlaceholder") users api. considering the json response looks like this, let's get started

```js
[
  {
    id: 1,
    name: "Leanne Graham",
    username: "Bret",
    email: "Sincere@april.biz",
    address: {
      street: "Kulas Light",
      suite: "Apt. 556",
      city: "Gwenborough",
      zipcode: "92998-3874",
      geo: {
        lat: "-37.3159",
        lng: "81.1496",
      },
    },
    phone: "1-770-736-8031 x56442",
  },
  {
    id: 2,
    name: "Ervin Howell",
    username: "Antonette",
    email: "Shanna@melissa.tv",
    address: {
      street: "Victor Plains",
      suite: "Suite 879",
      city: "Wisokyburgh",
      zipcode: "90566-7771",
      geo: {
        lat: "-43.9509",
        lng: "-34.4618",
      },
    },
    phone: "010-692-6593 x09125",
  },
];
```

1.  ## Import useEffect
    The first step is to import useEffect on top of your file.
    ```js
    import React, { useEffect } from "react";
    ```
2.  ## Setup state variables

    We will need to setup states for the following:

    - user list that we fetch from the API
    - error incase we run into some error while fetching the data
    - a loading text to be shown on the screen while we fetch data

    ```js
    import React, { useState, useEffect } from "react";

    const Example = () => {
      const [data, setData] = useState(null);
      const [error, setError] = useState(null);
      const [loading, setLoading] = useState(false);
    };

    export default Example;
    ```

3.  ## Write an useEffect

    Now, we need to write the API call inside the useEffect hook.  
    The useEffect hook is a powerful hook that allows developers to handle side effects, such as API calls.
    A useEffect hook needs two parameter in our case, first, the callback function to make the API call and second, the empty dependency array.

    **_Passing an empty dependency array [] as a second argument indicates that the effect does not depend on any values from props or state and that the effect will only run on the initial render and not re-run on subsequent renders. That means the API call is only made once, when the component mounts._**

    - ### Fetching data with fetch method

      The fetch method is a built-in browser API in JavaScript is used to make a data request from a server. This means there is not need to install any library to use it. And Fetch only requires one parameter i.e. the api endpoint/url. Sounds pretty easy to use!

      With this overview of fetch method, let's go ahead and in the callback method, first set loading to true and save the API data using setData function. Incase there is an error, we set the error using setError and accordingly show it on the screen to user.

      ```js
        import React, { useState, useEffect } from "react";
        const UserList = () => {

            const [data, setData] = useState(null);
            const [error, setError] = useState(null);
            const [loading, setLoading] = useState(false);

            useEffect(() => {
                setLoading(true);

                fetch('https://fakeapi.com/user/'); // make the API call using fetch method
                .then(resp => resp.json())
                .then(data => { setLoading(false); setData(data); })
                .catch(error => { setLoading(false); setError(error); });

            }, []);
        }
        export default UserList;
      ```

    - ### Making API call with Axios

      Axios is a popular library that provides a more user-friendly interface for making API calls. Axios has a range of useful features, such as automatic data transformation, error handling and the ability to cancel requests. In the below example, we're using the Axios to make the same API call.

      ```js
        import React, { useState, useEffect } from 'react';
          const UserList = () => {
              const [data, setData] = useState(null);
              const [error, setError] = useState(null);
              const [loading, setLoading] = useState(false);

              useEffect(() => {
                  setLoading(true);
                  axios.get('https://fakeapi.com/user/')
                  .then(response => { setLoading(false); setData(response?.data); });
                  .catch(error => { setLoading(false); setError(error); });

              }, []);
          }
      export default UserList;
      ```

4.  ## Render the API data in JSX

    Now that we have the list saved in the state, we display it using map method. If there is an error while fetching the data, we will show an error message. And during the data is fetched, we will show a loading message. Once the data is correctly retrieved, the user list would be displayed on the UI.

    ```ts
    import React, { useState, useEffect } from "react";
    const UserList = () => {
      const [data, setData] = useState(null);
      const [error, setError] = useState(null);
      const [loading, setLoading] = useState(false);

      useEffect(() => {
        setLoading(true);

        fetch("https://jsonplaceholder.typicode.com/users")
          .then((res) => res.json())
          .then((data) => {
            setLoading(false);
            setData(data);
          })
          .catch((error) => {
            setLoading(false);
            setError(error);
          });
      }, []);

      return (
        <div>
          {loading && <div>Loading...</div>}
          {error ? <div>Error: {error.message}</div> : null}

          {data?.length > 0 &&
            data?.map((user) => (
              <div>
                <div>Name: {user?.name}</div>
                <div>Address: {user?.address}</div>
              </div>
            ))}
        </div>
      );
    };

    export default UserList;
    ```


And that's it guys we have successfully made an API call on load of a component and displayed appropriate data.

## Checkout the demo in the code sandbox below.

<iframe
  src="https://codesandbox.io/embed/react-fiddle-forked-fgub0v?fontsize=14&hidenavigation=1&theme=dark"
  style={{ width: "100%", height: "500px" }}
  title="react fiddle (forked)"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

## Conclusion

In this article, we've explored two powerful tools for making API calls in React: Fetch and Axios. We've also seen how to use the useEffect hook to make API calls.





One error that React developers frequently run into is

> **_Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function._**

It's important to fix this error because it can lead to memory leaks and other performance issues in your React application. In this article, we will discuss what causes this error and how to fix it.

## Why "Can't perform a React state update on an unmounted component" is triggered ?

This error occurs when a component's state is updated after the component has been unmounted. The problem arises when there's an asynchronous operation that tries to update the state of an unmounted component.

**"An unmounted component is a component that no longer exists in the user interface or DOM."**

To put it simply, React checks if the component is no longer a part of the DOM then the state updates of that unmounted component are ignored and thereby preventing the waste of resources.

Consider the example below, where we make an API call on load of the component and route the user to login page if he/she is not authorised. However, we also update the user state variable using setUser(userDetails) after routing and this can result in "Can't perform a React state update on an unmounted component" error if userDetails.isAuthorised is false.

```js
import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";

const Example = () => {
  const history = useHistory();
  const [user, setUser] = useState({ name: "" });

  useEffect(() => {
    const getDetails = async () => {
      const userDetails = await getUserDetails(); // making an API call

      if (!userDetails?.isAuthorised) {
        history.push("/login"); // sending user to login page if not authorised
      }
      setUser(userDetails);
    };

    getDetails();
  }, []);

  return (
    <div>
      <h2>hello {user?.name}</h2>
    </div>
  );
};

export default Example;
```

---

## Ways to fix the "Can't perform a React state update on an unmounted component" error

This error can be avoided by cancelling subscriptions which is also indicated in the error message.

1. ## Update state before unmounting the component

   One of the most common approaches is to make sure all the state updates are aligned before unmounting the component. Like this as in above example, set the user details before routing

   ```js
   useEffect(() => {
     const getDetails = async () => {
       const userDetails = await getUserDetails(); // making an API call

       setUser(userDetails); // state update

       if (!userDetails?.isAuthorised) {
         history.push("/login"); // sending user to login page if not authorised
       }
     };

     getDetails();
   }, []);
   ```

2. ## Cancel any pending asynchronous processes

   Another way is to write a useEffect cleanup method to cancel all subscriptions and asynchronous processes. Like this:

   ```js
   useEffect(() => {
     // xyz logic

     // at the end, return a cleanup method
     return () => {};
   }, []);
   ```

3. ## Check if component is mounted:

   Consider the example below, where we create a variable isMounted to keep track of whether the component is still mounted. And read isMounted before making updates to the state. In the cleanup function of useEffect, we set isMounted to false, which tells the interval to stop updating the state when the component is unmounted.

   ```js
   useEffect(() => {
     let isMounted = true;

     const interval = setInterval(() => {
       if (isMounted) {
         setTimer(seconds + 1);
       }
     }, 1000);

     return () => {
       isMounted = false;
       clearInterval(interval);
     };
   }, [seconds]);
   ```



There are two main ways to create components in React: class components and functional components. In this article, we'll take a closer look at both types of components and explore the pros and cons of each. Let's get started.

## Introduction to Class Components in React

Class components are the conventional method for creating components. They extend the React.Component base class and are built using a class function Object() . Before the release of React hooks, Class components were the best choice for complex components because they have access to lifecycle methods and state.

## Here's a simple example of a class component in React

```js
import React, { Component } from "react";

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  incrementCount = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default Example;
```

---

## Introduction to Functional Components in React

Functional components are stateless, simple JavaScript functions that can receive props as input and return React elements. They are easy to test, reuse and can't have lifecycle methods. But with Hooks, introduced in React 16.8, we could write state and complex state management logic in a functional component. This means that functional components can also handle complex logic, perform data fetching and updates, and manage state in a functional, reusable, and easy-to-understand way.

## Here's a simple example of a functional component in React

```js
import React, { useState, useEffect } from "react";

const Example = ({ title = "Counter" }) => {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({ name: "" });

  useEffect(() => {
    const getDetails = async () => {
      const userDetails = await fetch("https://fakeapi/user"); // making an API call
      setUser(userDetails);
    };

    getDetails();
  }, []);
  return (
    <div>
      <h1>{title}</h1>
      <h2>hello {user?.name}</h2>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Example;
```

In the above example, we have used two most used hooks in a functional component.

1. useState to manage the component state
2. useEffect to make an API call on load or once the component has been mounted.

---

## So, which one is the best? Which one should we use?

<Image src="/public/img/thumbnail/functional-vs-class-components.png" />
By now, you must have guessed it! Yes, Functional components are the best choice
due to the advantages listed below.

## Why to use Functional Components in React?

1. ## State management
   Managing complex state and its side effects has become easier with introduction of React hooks in functional components

2. ## Concise
   Functional components are more concise and require less code than class components.

3. ## Performance
   Due to their simplicity and optimized logic for re-renders, functional components perform better than class components.

4. ## Easy to test
   Functional components don't have implicit behaviour or need setup, therefore testing them is simple.



Controlled and uncontrolled components in ReactJS are two ways of managing the state of a component. Let's explore both of these in detail.

## Controlled components

A controlled component is one where React manages the input's state and value. Any changes to the input are reflected in the state of the component, which ultimately updates the value of the input.

## Example

In the below example, we have an input of type text and have used the useState hook to manage the state of the input. A value prop on the input element is set to the state value created by useState. The state is updated in the handleChange function, which is passed to the onChange prop of the input.

```js
import React, { useState } from "react";

const ControlledInput = () => {
  const [value, setValue] = useState("");

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return <input type="text" value={value} onChange={handleChange} />;
};

export default ControlledInput;
```

Here's a step-by-step explanation of what happens when the input value is updated:

1. The user types something into the input field.
2. The handleChange function is called and the new value of the input is passed as an argument to the function.
3. The state is updated using setValue() with the new value.
4. The component re-renders with the updated state and the value of the input is set to the updated state.

---

## Uncontrolled components

An uncontrolled component is one where the DOM, rather than React, controls the input value. React has no control over how the input value is changed because the DOM does so directly.

## Example

In the below example we have used useRef hook to create a reference to the input element. A reference is a way to access the DOM element directly.
The input element has a ref prop that is set to the inputRef variable created using useRef hook. This allows us to access the value of the input directly through inputRef.current.value.

Here's a step-by-step explanation of what happens when the form is submitted:

1. The user enters information and clicks the submit button.
2. The handleSubmit function is called and preventDefault is used to prevent the default form submission behavior.
3. the value of the input is logged to the console.

```js
import React, { useRef } from "react";

const UncontrolledInput = () => {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
};

export default UncontrolledInput;
```

## So, what is the conclusion? Which one should we use?

The answer is with "Uday Bhai". Yes, you read that correctly! 😂

<Image
  src="/public/videos/welcome-control-uday.gif"
  alt="Controlled and Uncontrolled components in React JS | Rupali Yadav | webexpe.com"
/>

It is typically advised to use controlled components for more complex scenarios because uncontrolled components have some drawbacks. Here are a few reasons why using uncontrolled components is not a good idea.

1. ### Lack of Predictability
   Uncontrolled components maintain their own internal state, which makes it harder to predict the state of the component at any given time. This can make debugging and maintaining the component more difficult.
2. ### No Parent Control
   With uncontrolled components, the parent component has no direct control over the state of the component. This can lead to unexpected behavior and make it difficult to ensure that the component is working as expected.
3. ### Poor Performance
   Uncontrolled components can lead to poor performance, especially in large applications, as the component must re-render every time the state changes. This can negatively impact the overall performance of the application.
4. ### Security Issues
   Because uncontrolled components have the capacity to alter their own states, they can potentially pose a security risk. Unexpected behaviour and possible security flaws may result from this.
5. ### Complexity
   Uncontrolled elements can quickly grow complex, especially when working with a lot of data. This may make it challenging to maintain and troubleshoot the component.

In conclusion, uncontrolled components have various drawbacks and it is advised to adopt controlled components for more complex scenarios because they give the component's state management a more predictable, secure, and maintainable way.



CSS positioning is an important aspect of web development because it enables developers to control the position and appearance of elements on a page. In this article, we'll look at the various CSS positioning methods and how to use them to create visually appealing and responsive layouts for your webpages.

The different positioning methods in CSS are:

1. Static positioning
2. Relative positioning
3. Fixed positioning
4. Absolute positioning
5. Sticky positioning

## Static positioning

For the HTML markup part we will need the following :
This is the default positioning method. Elements with static positioning are not affected by the top, bottom, left, and right properties. They are positioned according to the normal flow of the document.

## Relative positioning

Elements with relative positioning are positioned in the document relative to their normal position. The element's position can be adjusted using the top, bottom, left, and right properties.

To use relative positioning, set the position property to "relative" and specify the element's position using the top, bottom, left, and right properties. As an example:

<iframe
  height="350"
  style={{ width: "100%" }}
  title="Css Position Relative"
  src="https://codepen.io/webexpe/embed/preview/KKBRzoM?default-tab=result"
>
  See the Pen{" "}
  <a href="https://codepen.io/webexpe/pen/KKBRzoM">Css Position Relative</a> by
  WebExpe (<a href="https://codepen.io/webexpe">@webexpe</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

This would position the element with the class "relative-element" in the document 100 pixels down and 200 pixels to the right of its normal position.

Relative positioning is useful for changing an element's position without removing it from the normal document flow. This means that the element will still take up space on the page and will affect the position of other elements.

It should be noted that the top, bottom, left, and right properties are relative to the element's normal position in the document, not to the parent element or the first containing block. This means that rather than being moved to an absolute position on the page, the element will be moved in relation to its original position.

## Fixed positioning

Elements with fixed positioning are positioned relative to the browser window and stay in place even when the page is scrolled.

To use fixed positioning, set the position property to "fixed" and specify the element's position using the top, bottom, left, and right properties. As an example:

<iframe
  height="350"
  style={{ width: "100%" }}
  title="Css Fixed Position"
  src="https://codepen.io/webexpe/embed/preview/eYjrZxG?default-tab=result"
>
  See the Pen{" "}
  <a href="https://codepen.io/webexpe/pen/eYjrZxG">Css Fixed Position </a> by
  WebExpe (<a href="https://codepen.io/webexpe">@webexpe</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

The "fixed-element" div would be positioned 100 pixels from the top and 200 pixels from the left of the browser window. Even if the page is scrolled, the element will remain in this position.

Fixed positioning can be used if you want to place an element fixed in a place of viewport, like a header or footer that always appears at the top or bottom viewport. However, that fixed positioning is removed from the normal document flow, which means it takes up no space and has no effect on the position of other elements. This can make creating responsive layouts with fixed positioning a bit challenging.

## Absolute positioning

This can a be bit confusing one, but hang in there.
Absolute positioned elements are positioned relative to the nearest positioned ancestor (if any) or the initial containing block (if no ancestor is positioned). If no positioned ancestor exists, the element is positioned relative to the first containing block.

Ex: If a absolute div is placed in a relative / any other positioned div, the position properties will be set WRT the div in which our absolute div is placed.

To use absolute positioning, set the position property to "absolute" and specify the element's position using the top, bottom, left, and right properties. As an example:

<iframe
  height="400"
  style={{ width: "100%" }}
  title="Css Absolute Position"
  src="https://codepen.io/webexpe/embed/preview/NWBMrxb?default-tab=result"
>
  See the Pen{" "}
  <a href="https://codepen.io/webexpe/pen/NWBMrxb">Css Absolute Position </a> by
  WebExpe (<a href="https://codepen.io/webexpe">@webexpe</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

In the above example we can see, the blue box is placed absolute to its parent which is the document in this case and the yellow box is placed absolte to its relatively positioned parent which is the orange box.

If we remove the position "relative" from the orange box, the yellow box will be placed according to its nearest positioned parent i.e the document.

<iframe
  height="400"
  style={{ width: "100%" }}
  title="Css Absolute Position"
  src="https://codepen.io/webexpe/embed/preview/QWBrEgM?default-tab=result"
>
  See the Pen{" "}
  <a href="https://codepen.io/webexpe/pen/QWBrEgM">Css Absolute Position </a> by
  WebExpe (<a href="https://codepen.io/webexpe">@webexpe</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

It's important to note that absolute positioning is removed from the normal document flow, which means that it does not take up any space and does not affect the position of other elements. This can be useful for creating overlays or for positioning elements precisely on a page.

However, absolute positioning can also make it difficult to create responsive layouts, as the element's position is fixed and does not adjust when the page is resized. In these cases, it may be necessary to use a combination of absolute and relative positioning to create a responsive layout.

## Sticky positioning

The "sticky" position value allows an element to be "fixed" within an area when its parent is scrolled, but unlike fixed elements, sticky elements are still part of the normal document flow. This can be useful for creating elements that behave like a fixed header or footer but are not removed from the document flow.

To use the "sticky" position value, first set the position property to "sticky," then use the top, bottom, left, or right properties to position the element within its parent element. For instance:

<iframe
  height="400"
  style={{ width: "100%" }}
  title="Css Sticky Position"
  src="https://codepen.io/webexpe/embed/preview/eYjrZxG?default-tab=result"
>
  See the Pen{" "}
  <a href="https://codepen.io/webexpe/pen/eYjrZxG">Css Sticky Position </a> by
  WebExpe (<a href="https://codepen.io/webexpe">@webexpe</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

When the parent element is scrolled, the element with the class "sticky-element" is fixed to the top of the parent.

It is important to note that the "sticky" position value is not supported by all browsers, so you may need to use a polyfill or fallback to a different positioning method in older browsers.

Aside from the position property, there are several other properties that can be used to fine-tune an element's positioning. The z-index property, which determines element stacking order, and the float property, which allows elements to be floated to the left or right of the page. We will see more about this is the coming articles.



Responsive web design is one of the most important factor in modern web development. Almost every website has a navigation menu, but due to less space available on small devices like mobile, tablets and other handheld devices, we design our menus in such a way that they are hidden outside the visible canvas and only shown after we click a button known as menu button or also known as burger menu.

Today we will be creating the burger menu button, with a simple css animation as shown below.

<iframe
  height="350"
  style={{ width: "100%" }}
  scrolling="no"
  title="Burger menu toggle using HTML, CSS, JS."
  src="https://codepen.io/webexpe/embed/preview/ExEZmBE?default-tab=result"
  frameBorder="no"
  loading="lazy"
>
  See the Pen{" "}
  <a href="https://codepen.io/webexpe/pen/ExEZmBE">
    Burger menu toggle using HTML, CSS, JS.
  </a>
  by WebExpe (<a href="https://codepen.io/webexpe">@webexpe</a>) on <a href="https://codepen.io">
    CodePen
  </a>.
</iframe>

In this article we will go thru the code, so lets get started!!.
You can also follow this [YouTube video](https://www.youtube.com/watch?v=3t6jOjc_Cwk&t=7s "CSS animated burger menu button") for the tutorial.

## HTML

For the HTML markup part we will need the following :
A **div** with a class **"menu-btn"**, this will be our main element, and a div inside to create the bars of the menu icon.

```html
<div class="menu-btn">
  <div></div>
</div>
```

One might be wondering that there are 3 bars in the icon and we have only used 1 div for it, that is because we will be creating the rest of the bars using css pseudo classes before and after. We will dive deeper in css pseudo classes and many other css concepts in the upcoming articles so stay tuned.

## CSS

Here comes the fun part, the css styling :
In the above codepen post I have used scss which is a css pre processor, so if you are new to scss or css, in the codepen post you have the option to see the compiled css code.

1. Start with **"menu-btn"** i.e. main element.
    ```css
    .menu-btn {
    width: 60px;
    height: 60px;
    background: #8d99ae;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: all 0.5s ease;
    }
    ```

    First we do the basic width, height and background color.
    Next important part is the flex styling, we have to center align the inner div so we used align-items and justify-content.
    Next we add cursor : pointer to show a pointer on hover, and we add a transition to get the smooth animation effect.

2. Next is the **div inside menu-btn (.menu-btn > div)**.
    ```css
    div {
    width: 80%;
    height: 3px;
    border-radius: 2px;
    background: #fff;

    position: relative;
    transition: all 0.5s ease;
    }
    ```

    Here the important thing to remember is the "position : relative;" property, we need this to place the two bars i.e before and after in correct postions relative to the main center bar.

3. Styling before and after, i.e the other 2 bars:
    ```css
    &::before,
    &::after {
    content: "";

    width: 50%;
    height: 3px;
    border-radius: 2px;
    background: #fff;

    position: absolute;

    transition: all 0.5s ease;
    transform-origin: center;
    }
    ```

    We will first style the before and after together as the shape, size and some properties are common.
    One important property here is the **"content : " ";** without this the pseudo classes will not render. We can put anything in the content property,but as we will be creating a bar/line we will leave it empty as shown.
    Another important property is the **"position: absolute;** this allows us to position the element with reference to its parent, so we can place the bars with respect to the main center bar.

    Next we style the before & after seperately to place them in position by using **top** & **right** css properties.

    ```css
    &::before {
    top: -15px;
    }

    &::after {
    top: 15px;
    right: 0;
    }
    ```

    Till now we have seen the code to display the menu button in default state. now we will add css for the close state.

## Button close state.

```css
.close {
  background: #d1345b;
  div {
    transform: rotate(225deg);

    &::before {
      transform: rotate(90deg);
      width: 100%;
      top: 0px;
    }

    &::after {
      opacity: 0;
    }
  }
}
```

First, on close we will change the background color.
Next, we will rotate the main div i.e the main middle bar using property **"transform: rotate(225deg);"**
Next, we will place and rotate the before i.e the top bar.
Using the main center bar and the top bar we will create the close icon, "X".
The bottom bar is hidden using "opacity: 0;" property.

## Adding toggle functionality using javascript.

```js
const menuBtn = document.querySelector(".menu-btn");

const addRemoveClass = (className) => {
  if (menuBtn.classList.contains(className)) {
    menuBtn.classList.remove(className);
  } else {
    menuBtn.classList.add(className);
  }
};

menuBtn.addEventListener("click", () => addRemoveClass("close"));
```

This is a simple javascript code block which will add and remove the close class from our main menu-btn element on click.



Hoisting is a phenomena by which we can access variables and functions even before we have declared them without running into any error.
Let's see the above statement in practice with the below example where we are trying to console variable "a" before it is declared.

<Image
  src="/public/img/hoisting-ex1.PNG"
  alt="hoisting in javascript | webexpe.com"
/>

We can see that the debugger is on the very first line of the code and none of the code has been executed yet but in the Global scope at the bottom we can see variable "a" is initialised to undefined and function "addNumbers" has the entire function definition assigned to it.

## Output after running the code without any errors

<Image
  src="/public/img/hoisting-ex2.PNG"
  alt="hoisting in javascript | Rupali yadav | webexpe.com"
/>

## # So why didn't we run into any errors here?

1. A execution context was created for this code before the execution starts.
2. The first step in an execution context is to allocate memory to each and every variable and function.
3. During this assignment of memory it assigns each variable with a special keyword i.e. "undefined" and the functions declared using "Function Declaration" fashion with the entire function copy.

## # Will a function work the same way as above if we declare the function using "function expression"?

No, it won't work as the function will be treated as a variable hence it will be assigned "undefined" during memeory allocation step.

<Image
  src="/public/img/hoisting-ex3.PNG"
  alt="hoisting in javascript | Rupali yadav | webexpe.com"
/>

## # Will hoisting work the same way if we declare variables with "const" and "let"?

Hoisting doesn't work with const and let. They are also hoisted but are never hoisted with a default value like it happens in case of var and functions. Hence, we will run into a ReferenceError.

## Using let

```js
console.log(a);
let a = 10;
```

<Image
  src="/public/img/hoisting-ex4.PNG"
  alt="hoisting in javascript | Rupali yadav | webexpe.com"
/>

## Using const

```js
addNumbers(2, 4);
const addNumbers = function (a, b) {
  console.log(a + b);
};
```
<Image
  src="/public/img/hoisting-ex5.PNG"
  alt="hoisting in javascript | Rupali yadav | webexpe.com"
/>



In this article we are going to see difference between Pass by Value and Pass by Reference in JavaScript. Let's dive right in.

## Pass by Value in JavaScript

In Pass by value, a copy of the actual parameter’s value is made in memory. Same addresses are never shared here i.e. all the variables will have different memory addresses with same value.

```js
const x = 30;
const multiplyBy50 = (num) => {
  num = num * 50;
  return num;
};

const ans1 = multiplyBy50(x);
```

<Image
  src="/public/img/pass-by-value-example.png"
  alt="pass by value | webexpe.com"
/>

In the above code snippet, we see a const x with value 30 is created with an address 2000. This x is passed to multiplyBy50 function. Javascript automatically copies the value of x to variable num i.e. a new address was created with a copy of x's value. when num is reassigned the product of num and 50 the value of x doesn't change as address of x and num are different. This is pass by value.

## Pass by Reference in JavaScript

<Image
  src="/public/img/pass-by-reference-example.png"
  alt="pass by value | webexpe.com"
/>
In Pass by Reference, the address/reference of the variable is passed to the function.
Let's look at the example below to understand this better. Two parameters are passed
to function multiplyBy50 i.e. x and ogObj. Executing statement tempObj.result = num;
will change the result property of ogObj to 1500 from 0 because in javascript, a
reference to an object is passed to a function by value i.e. address of ogObj was
passed instead of its value.

```js
    const x = 30;
    const ogObj = { result: 0 };

    const multiplyBy50 = (num, tempObj) => {
        num = num * 50;
        tempObj.result = num;
        console.log(tempObj);  // { result: 1500 };
        return num;
    }

    const ans1 = multiplyBy50(x, ogObj);
```
In conclusion, Everything in JavaScript is of value type and function arguments are always passed by value but with objects this turns out a little differently 😜.



In this article we are going to see how to style in react using useRef hook. So, let's dive in.

We are going to create a Card component and our goal is to change the card's color when clicked on it.

We are going to use [emotionJs](https://emotion.sh/docs/@emotion/css "Emotion JS") to style our component.

1. ## Imports

   Import css from emotion and useRef from react as shown below.

   ```js
   /** @jsxImportSource @emotion/react */
   import { css } from "@emotion/react";
   import { useRef } from "react";
   ```

2. ## Declare a ref

   Create a component with name Card and declare a ref as shown below.

   ```js
   const Card = () => {
     const cardRef = useRef("");
     return <div>...</div>;
   };
   export default Card;
   ```

3. ## Pass the ref

   When a ref is passed to an element in render, a reference to the node becomes accessible at the current attribute of the ref.

   ### const node = this.cardRef.current

   so let's pass this ref to the the Card.

   ```js
   import { css } from "@emotion/react";
   import { useRef } from "react";

   const cardContainer = css`
     margin: 50px;
   `;
   const card = css`
     background: #fff;
     border: 1px solid #ccc;
     color: #000;
     max-width: 400px;
     padding: 15px 10px;
   `;
   const Card = () => {
     const cardRef = useRef("");

     return (
       <div css={cardContainer}>
         <button ref={cardRef} css={card}>
           <h1>Title</h1>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
             ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
             aliquip ex ea commodo consequat.{" "}
           </p>
         </button>
       </div>
     );
   };

   export default Card;
   ```

4. ## Add onClick

   We are going to write the logic to change style of the card inside onClick. As seen below, we are going to point to the current property of the ref that holds the reference to the card whose background color we want to change on it's click.

   ```js
   const Card = () => {
     const cardRef = useRef("");
     return (
       <div css={cardContainer}>
         <button
           ref={cardRef}
           css={card}
           onClick={() => {
             cardRef.current.style.background = "#DAF7A6";
           }}
         >
           <h1>Title</h1>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
             ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
             aliquip ex ea commodo consequat.{" "}
           </p>
         </button>
       </div>
     );
   };
   ```

And that's it we have successfully implemented useRef hook to update style.
<Image
    src="/public/img/style-using-ref-in-react.gif"
    alt=" style using ref in ReactJs | Rupali Yadav"
/>



In this article we are going to see the difference between state and props in React.
First let's see what are state and props individually.

<Image
  src="/public/img/state-vs-props-hierarchy.png"
  alt="props vs state in react | Rupali Yadav"
/>

## # Props

Props are something that a component receives from where it is rendered (consider as arguments). In the example below we are rendering Header component and passing a prop title to it. It is same like calling Header component with an object

```js
    {title: 'Home'}
    // ---------------
    <>
        <Header title="Home" />
        ...
    </>
```

## State

A state can be considered as a local variable in the component that cannot be accessed outside of the component.

```js
const [count, setCount] = useState(0);
```

## Similarities

1. Both are responsible for what a component should render i.e. the app will rerender if a prop or state changes
2. A state and prop both can be passed down as props to child components

## Differences

1. A state is both readable and writable but on the other hand a prop is read-only.
2. The initial value for a state is set inside the component and for a prop we may set the default value inside the component where the prop is sent to.
3. Props are usually used for rendering reusable components with static content and a state can change over time depending on various conditions/ user interactions.



As a web developer, you must have come across the term "closure" many times in JavaScript. However, it's not always clear what it means or how it works. In this article we are going to see concept of closure in JavaScript in a simple and easy-to-understand manner.

Closures work around the concept of a scope. So, first let's see more on how scope works.

## What is Scope?

A scope basically refers to the current context, which determines the accessibility of variables in a program. Every function call creates a new scope. When the function has finished the execution, the scope is usually destroyed.

There are two types of scope global and local. Let's have a look at the below example to understand nested functions and scope.

```js
function one() {
  const rice = "rice";
  const plate = rice;

  function two() {
    const gravy = "gravy";
    const plate = rice + gravy;

    function three() {
      const salad = "salad";
      const plate = rice + gravy + salad;
      return plate;
    }

    return three();
  }
  return two();
}
const plate = one();
console.log(plate);
```

- Function three will have access to the variables declared in function two and one.
- Function two will have access to the variables declared in function one.

But as functions cannot access the variables declared in it's child/inner functions

- function two cannot access variable of function three
- function one cannot access the variables of both two and three.

When function one is invoked a new scope is created and same is done when function two and three are invoked. once function three has completed its execution its scope will be destroyed, and control will return to function two. once two is done with its execution its scope will also be destroyed and control will be back to function one and the scope of one is destroyed when function one returns a value to variable plate.

The same can be explained with the help of below illustration.

<Image
  src="/public/img/closures-explained.png"
  alt="closures in javascript | Rupali Yadav"
/>

Now that we are good with scopes, let's dive right into Closures.

## What is Closure in JavaScript?

Closure is a feature in JavaScript that allows a function to access and use variables from its outer scope even after the outer function has returned. In simple words, it is a function along with all the variables that are accessible in the function's scope. In other words, a closure gives you access to an outer function’s scope inside an inner function.

To understand how closure works, let's consider the following example:

```js
function outerFunction() {
  let outerNumber = 50;

  function innerFunction() {
    let innerNumber = 10;
    return innerNumber + outerNumber;
  }

  return innerFunction;
}

var innerFunc = outerFunction();
console.log(innerFunc()); // consoles 60
```

In this example, outerFunction creates a variable called outerNumber and then defines an inner function called **_innerFunction_**, which simply returns **_innerNumber + outerNumber_**. The outer function then returns the inner function.

When we call **_outerFunction_**, it returns the innerFunction, which we store in **_innerFunc_** variable. We can then call **_innerFunc_** as a regular function, even though it's no longer inside the outerFunction (we are calling it outside of the outerFunction).

When we invoked **_innerFunc_** which ultimately invoked **_innerFunction_** a closure is formed as seen in the image below. This proves that innerFunc was able to access the outerNumber variable from the outer function because of the closure that is formed.

<Image
  src="/public/img/closures-explained-1.PNG"
  alt="closures in javascript | Rupali Yadav"
/>

## Bonus! let's consider one more example.

```js
const getDescription = (name, birthDate) => {
  const calculateAge = () => {
    return Math.floor(
      (new Date() - new Date(birthDate).getTime()) / 3.15576e10
    );
  };
  return "My name is " + name + ". My age is " + calculateAge();
};

const description = getDescription("John", "1990-10-02");
console.log(description); // "My name is John. My age is 32"
```

In the above code, we can see **_calculateAge_** (child function) is invoked from getDescription (parent function). Once **_calculateAge_** is invoked we can see in the below image a closure is formed with function **_getDescription_** and variable **_birthDate_**.

<Image
  src="/public/img/closures-explained-2.PNG"
  alt="closures in javascript | Rupali Yadav"
/>

## The Benefits of Using Closure

1. ## Closures maintain their lexical scope

   ```js
   const getInfo = () => {
     const birthDate = "2004-11-12";
     const calculateAge = () => {
       console.log(
         Math.floor((new Date() - new Date(birthDate).getTime()) / 3.15576e10)
       );
     };
     return calculateAge;
   };

   const info = getInfo();
   console.log(info()); // 17
   ```

   In the above code snippet when we call that returned function, we can see there was no error as it still had access to const birthDate and logs 17 in the console. That is because after the execution of getInfo is done, its scope is not destroyed in this case.

2. ## Creating private variables

   Closures help us create private variables which can help to protect sensitive data and prevent other parts of your code from modifying or accessing it.

3. ## Improving performance
   Closure can help improve the performance of your code by reducing the number of global variables and functions that need to be created.

## Conslusion

In conclusion, closures are a powerful and important concept in JavaScript programming. Understanding how they work and how to use them effectively can greatly enhance the functionality and efficiency of your code.



<Image
  src="/public/img/thumbnail/ReactStarRatingComponent.gif"
  alt="Star Rating Component in ReactJs | Rupali Yadav"
/>

In this article, we'll walk through the steps to create a star rating system in React using the built-in React features such as state and event handlers. Let's dive right in!

## Steps to create star rating sytem

1. ## Creating the Star rating component

   Create a file with name StarRatingSystem.js and create a basic functional component named StarRatingSystem as shown below

   ```js
   const StarRating = () => {};
   export default StarRating;
   ```

2. ## Required imports

   To style our component, we'll use [emotionJs](https://emotion.sh/docs/@emotion/css) and [React-icons](https://react-icons.github.io/react-icons/search?q=star) for the star icon. So we import AiFillStar icon from react-icons, css from emotion and useState from react as shown below.

   ```js
   import { css } from "@emotion/react";
   import { useState } from "react";
   import { AiFillStar } from "react-icons/ai";
   ```

3. ## Create state using useState hook

   To know which star was clicked we need a state variable selectedStar and based on index/place of the star we will calculate how much rating the user has given which we will explore in more detail in the next step.

   ```js
   const StarRating = () => {
     const [selectedStar, setSelectedStar] = useState();
   };
   export default StarRating;
   ```

4. ## Logic for showing the colored stars

   - The selectedStar state is basically going to contain the index of the star out of the 5 stars that has been clicked by the user.
     Initially set to a empty String
   - In the jsx, we are going to check if the index of the individual star is less or equal to the selected star's index.
     If yes, we will change their color to yellow else it wilh have default grey color.

5. ## Creating and Styling the star rating system

   Next, we'll create and add some styles to the stars to make it look like a star rating system.
   Create an array for 5 stars and, using map method we render 5 **AiFillStar** as shown below to avoid redundant code for the 5 stars.

   As user is going to have to click on the stars, we will wrap each star with a button. Also, add some basic styling for the stars using emotionJS and pass that down to the AiFillStar using css prop

   ```js
   const text = css`
     font-size: 20px;
     text-align: center;
   `;
   const flex = css`
     margin-top: 50px;
     display: flex;
     justify-content: center;
   `;
   const star = css`
     margin-left: 10px;
     border: none;
     background: none;

     cursor: pointer;
     :hover {
       color: yellow;
     }
   `;
   const icon = css`
     font-size: 60px;
   `;

   const stars = [1, 2, 3, 4, 5];

   const StarRating = () => {
     const [selectedStar, setSelectedStar] = useState();

     return (
       <>
         <div css={flex}>
           {stars.length > 0 &&
             stars.map((starNum) => (
               <button type="button" key={starNum} css={star}>
                 <AiFillStar css={icon} />
               </button>
             ))}
         </div>
       </>
     );
   };
   ```

6. ## Add Onclick on the stars

   When the user clicks a star we will capture the star's index and store it in the selectedStar state variable using setSelectedStar setter as shown below and compare each star's index with the selected star's index.

   If individual star's index is less or equal to the selected star's index we will fill it with yellow color and if not, it will have color set to default grey color.

   This can be done by sending a boolean value to the icon css method to display yellow or default grey color as shown in below code snippet below.

   ```js
   const icon = (isSelected) => css`
     color: ${isSelected ? "yellow" : "grey"};
     font-size: 60px;
   `;

   const stars = [1, 2, 3, 4, 5];

   const StarRating = () => {
     const [selectedStar, setSelectedStar] = useState();

     return (
       <>
         <div css={flex}>
           {stars.length > 0 &&
             stars.map((starNum) => (
               <button
                 type="button"
                 key={starNum}
                 onClick={() => setSelectedStar(starNum)}
                 css={star}
               >
                 <AiFillStar
                   css={icon(
                     selectedStar === starNum || selectedStar > starNum
                   )}
                 />
               </button>
             ))}
         </div>
       </>
     );
   };

   export default StarRating;
   ```

## Time to run the code

As you can see we have 5 stars on the screen and when we click on the 4th star, we are able to display the correct rating.

<Image
  src="/public/img/star-rating-gif.gif"
  alt="star-rating-system in react | rupali yadav"
/>

That's it! We've created a star rating system in React without using a third-party library.

Bonus!!😎 You can see this complete working code in the codesandbox below:


## example in codesandbox 

<iframe
  src="https://codesandbox.io/p/sandbox/create-a-react-star-rating-system-k8lu65?fontsize=14&hidenavigation=1&theme=dark"
  style={{ width: "100%", height: "500px" }}
  title="Context API Example"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>




<Image
  src="/public/img/thumbnail/CreateCustomHook.gif"
  alt="How to create a custom hook with ReactJs | Rupali Yadav"
  caption="In this article we are going to have a look at how to create our own hooks. So let's dive in."
/>

## What is a custom hook?

let's take a look at the defination at [reactjs.org](https://reactjs.org/docs/hooks-custom.html)

***Custom Hooks are a mechanism to reuse stateful logic Example: setting up a subscription and remembering the current value, but every time you use a custom Hook, all state and effects inside of it are fully isolated.***

Custom hooks are a powerful feature in React, and if you are not using them in your React applications, you are missing out on a lot of benefits.

## When should one write a custom hook in react?

when you have a common logic written for a state's update in more than one component, we can turn it into a custom hook.

## Benefits of Using Custom Hooks
- Reduces redundant code.
- Every time you call a hook all your state and effects inside of it are fully isolated that means you can call the same hook twice in one  
    component.

## Rules to write a custom hook
1. **Prerequisite** : use React version 16.8. and above
2. Custom hook name starts with "use". This convention is very important. As React would be able to automatically check for violations of rules 
    of Hooks incase of error because a normal function call does not convey if a certain function contains calls to Hooks inside of it.

---

## How to Create Custom Hooks

Now that we have a basic understanding of a custom hook, let's get started and create a custom hook to use a loader in a component to handle asynchronous operations.

Loaders are a basic necessity in every website that are shown on the screen to signal the user that some data is being asynchronously fetched.

## Here is a step by step guide:
1. Create a folder named hooks to keep all the hooks at one place.
2. Inside it create a **UseLoader.js** file.
3. As shown in the code snippet below we have used useState to create a state to show/hide the loader.
    ```js
     // inside /hooks/UseLoader.js
    import { useState } from "react";

    const UseLoader = ({ isLoading = false }) => {

        // resusable stateful logic
        const [isLoading, setLoading] = useState(isLoading);
    
        return [isLoading, setLoading];
    }
    
    export default UseLoader;
    ```

## How to Use Custom Hook in react component

Using a custom hook in React is similar to using any other hook. You simply call the hook function and pass in any necessary parameters.

1. First we import the hook at the top of our file.
    ```js
    // inside /components/Home/index.js
    import Loader from '../loader';
    import useLoader from '../../hooks/useLoader'; // importing the hook
    ```
2. call useLoader and set its default value as false. useLoader gives us two things- a variable to read the state and a setter to update the 
    loader state.
    ```js
      // setting isLoading as false initially
      const [isLoading, setLoading] = useLoader(false);
    ```
3. The loader is then set to true immediately before the api call inside useEffect and is changed back to false once we receive a response or 
    encounter an error.
    ```js
     // setting isLoading as false initially
        const [isLoading, setLoading] = useLoader(false);
    
        useEffect(() => {
            const getCustomerDetails = async () => {
                // setting the loader as true
                setLoading(true);

                try {
                    await fetch(custApiUrl);

                    // setting it as false after the api call
                    setLoading(false);

                } catch (e) {
                    // setting it as false incase of errors
                    setLoading(false);
                }
            };
            getCustomerDetails
        }, []);
    ```

4. The final home component file should look something like this:
    ```js
      // inside /components/Home/index.js
        import Loader from '../loader';
        import useLoader from '../../hooks/useLoader'; // importing the hook

        const Home = () => {

        // setting isLoading as false initially
        const [isLoading, setLoading] = useLoader(false);

        useEffect(() => {
        const getCustomerDetails = async () => {
            // setting the loader as true
            setLoading(true);

            try {
                await fetch(custApiUrl);

                // setting it as false after the api call
                setLoading(false);

            } catch (e) {
                // setting it as false incase of errors
                setLoading(false);
            }
        };
        getCustomerDetails
        }, []);

        return (
        <>
            {isLoading && <Loader />}

            {!isLoading && (
                <div>
                ... some jsx to show customer details
                </div>
            )}
        </>
        );
        }

        export default Home;
    ```

And that's it we have successfully created a custom hook and also saw how easy it is to use in components.

## Conclusion
In conclusion, custom hooks are a powerful feature in React that can help you write cleaner, more reusable code. By extracting logic into separate hooks, you can focus on what your component does, rather than how it does it.


<Image
  src="/public/img/folder-structure/folder-structure-intro.jpeg"
  alt="Folder Structure for Web Development | Mayur Nalwala"
/>
I have come across a variety of projects, right from small projects with a maximum
of 3 pages to big projects having over 20–25 pages filled with heavy animations and
interactions.

Initially, I used to handle all the front-end development alone and made them with
the basic structure in mind, but as more people started adding up to the team, we
realized a need for a proper coding standard and files structure so that we don’t
lose our minds and work in harmony.

So I and one of my colleague decided to make things look good and started working
on a structure that can be suitable for our requirements and the team. This article
is just an opinion/method about a folder structure that has worked best for us after
our trial and error, it might not the same work for you as it did for us and you
are most welcome to add some ideas of your own.

---

## The Tech Stack

For Web Development and UI coding, we start with the following languages

> **_HTML 5, CSS 3, JavaScript / jQuery, Bootstrap and SCSS_**

- HTML 5: It's the Markup Language and builds up the main skeleton of the web page.
- CSS 3: Cascading Style sheets help you to style the HTML.
- JavaScript: This helps you add behavior and interactions to your website (Tip: If you are new to Web Development never skip or
  stop working on JavaScript always stick to it).
- Bootstrap: It's a framework for developing responsive, mobile-first websites.
- SCSS: SCSS or SASS is a CSS pre-processor and gives you extra functionalities to work with CSS.

---

## The Folder Structure

<Image
  src="/public/img/folder-structure/folder-structure.jpeg"
  alt="Folder Structure for Web Development | Mayur Nalwala"
/>
First is the main Root folder which contains all the project files and folders and
also the main web pages of the project. Then we have the css folder which will have
all the css files, some of the main files are as follows:

1.  bootstrap.css / bootstrap.min.css
2.  mainStyles.css : custom css classes file

The js folder will have the JavaScript files:

1.  jquery.min.js / jquery.js
2.  bootstrap.js / bootstrap.min.js
3.  mainFunctions.js : custom JavaScript functions file

The img folder will have all the images and media assets. Generally, we create sub-folders inside the img folder for grouping the assets according to sections and pages, for example, we put all the favicons in the favicon folder and all the home page images in the home folder. <br /><br />
The <b>fonts</b> folder will have all the external fonts which we later import in CSS and create font families ( later discussed in detail ). <br /><br />
The <b>common</b> folder we can also call it <b>components</b> folder, here we keep all the common HTML files which we will import later into the main pages with JavaScript. For example: we can have many pages and all pages have the navbar as a common component, so a navbar.html will have only the navbar code and with the .load() function we can append it to the pages.

```js
{
  ("$(.nav_container).load(./common/navbar.html);");
}
```

each page will have an empty div with a class or id ‘nav_container’ and with the above code we will load the navbar.html in the div, the benefit of this, let us assume we have 15 pages and if you have to change any link in the navbar so there is no need to go in every page and change, you have to change in only navbar.html page and the work is done. But this thing only works when you run the project on a server and for that, we have Live Server for VSCode which creates a local server or you can use any other method to create a local server. <br /><br />
The scss folder contains all the scss files. I believe every UI and Front-End Developer should learn a css pre-processor as it makes a huge difference in coding as it gives you many extra functionalities and control. In recent times I started with some good structuring and standards with my scss coding to make css more modular and easy to use for any new person who picks up my project. There are some important files in the scss folder as follows:

- **main.scss** : This is main file which imports the rest of the scss
  files and is compiled to “mainStyles.css”.
  <Image
    src="/public/img/folder-structure/main.scss.png"
    alt="Folder Structure for Web Development | Mayur Nalwala"
  />
- **\_colors.scs** : This scss files contains all the project design color
  codes
  <Image
    src="/public/img/folder-structure/color.scss.png"
    alt="Folder Structure for Web Development | Mayur Nalwala"
  />
- **\_fonts.scss** : This file contains all the fonts imports and with the
  help of @fontface rule we create custom font family.
  <Image
    src="/public/img/folder-structure/font.scss.png"
    alt="Folder Structure for Web Development | Mayur Nalwala"
  />
- **\_typography.scss** : This file contains all the font styles.
  <Image
    src="/public/img/folder-structure/type.scss.png"
    alt="Folder Structure for Web Development | Mayur Nalwala"
  />
- **\_responsive_mixins.scss** : This is kind of the most important file as
  it contains all the responsive mixins(scss function) with all the media
  queries.
  <Image
    src="/public/img/folder-structure/mixins.scss.png"
    alt="Folder Structure for Web Development | Mayur Nalwala"
  />
- and we use the mixins as follows:
  <Image
    src="/public/img/folder-structure/use_mix.scss.png"
    alt="Folder Structure for Web Development | Mayur Nalwala"
  />

rest we can further create more sub-folders having SCSS files for particular pages
or sections. <br />

<br />
Then Finally we have all the main pages like the main entry page <b>
  index.html
</b> and the rest of the web pages in the <b>Root folder</b>.

---

## Conclusion

This is kind of the basic structure we follow for coding websites. I have tried my best to explain as well as possible and hope it helps all fellow developers out there.

> I have uploaded a small project explaining the folder structure on GitHub for reference and you can find it [here](https://github.com/nmayur/File-structure). If you liked this article, feel free to give us a star on github and if you have any questions or queries, you can post a comment.
