DEV Community: Ridhik Govind

How to make React like components in HTML with 7 lines of JavaScript

Ridhik Govind — Fri, 30 Jul 2021 13:10:19 +0000

If we all know what one thing React is most famous for - that would be making Components right ? (I mean one among the multitude of amazing features). You make a component and you can use it anywhere you want throughout your codebase. getting butterflies in my stomach right now

Making a component in React is as easy as this:

function Welcome() {
  return <h1>Hello there !!</h1>;
}

Then we render this JavaScript function Welcome() - also a component into the HTML DOM which will display as "Hello there !!". As simple as that.

const element = <Welcome/>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Now for a long time, I really thought only React could do this, UNTIL I found out that I could make components like these in HTML too. Only thing is we won't be having all the capabilities that React has - duh ! At first I thought it would be something that was done in the older HTML 1.0 or something where people used to manipulate HTML to get results but NO, this thing is legit.

So how does it really work ?

Imagine you have 3 HTML pages. In these 3 pages you have a header and a footer. What you normally do is you create a sample template consisting of the header and footer in 1st page then when you are creating the 2nd page you just copy paste the entire HTML page and make some changes to the body. I don't know about you but that's how I usually did.

So for starters, let's create a header.
We can solve this by creating a component for the header and then including it in every other page just by using HTML and a few lines of JavaScript - yeah you heard me right. Without further ado :

Step 1: You create an HTML tag in your index.html page. e.g


<body>
    <header></header>
    Some sample body content
</body>

Step 2: Create a new "header.html" page. and insert some sample content e.g

<h1>Super important Header content</h2>

Step 3: Using the fetch API you grab the HTML file (which is a resource here), then you take the response which is the "header.html" file, then you convert it into a text form.

Now the .text() method is a string containing all the combined text of all the elements inside "header.html".

fetch("./header.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
    document.querySelector("header").innerHTML = data;
 });

And that's it ! Now if you look at your HTML page you can see the text being displayed. Now let me tell you some tricks.

Creating your own custom named components in HTML

How we name components in React is usually like this e.g "Nav.js" or "Login.js". Do notice that the first letter is always in CAPS. We can do the same for our HTML pages too. How ?

Create a folder named "components" in the root of the folder and create a new HTML page with names starting with CAPS like we mentioned above. So for e.g if we need to create a new component called "MobileNav". So we do:

step 1: Adding the tag
<MobileNav><MobileNav/>

step 2: Adding some content inside MobileNav.html

step 3: Adding the required JavaScript. In this case its something like this: 

fetch("./components/MobileNav.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
    document.querySelector("MobileNav").innerHTML = data;
 });

The advantages of this is that we know which one is a component. But this is just another way to do things, but don't do these for tags like "header", "footer", "nav" etc as it might be bad for SEO purposes.

You could also do it this way by use of the "class" attribute so that we way we can keep all the SEO benefits intact.

1. <nav class="MobileNav"></nav>

2. add some content

3. fetch("./components/MobileNav.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
        //do notice the use of class name ".MobileNav" below
    document.querySelector(".MobileNav").innerHTML = data;
 });

So I hope you learnt something new today. This method will save you loads of your time especially if you are working with more than 10 pages and there is a chance for the content to change all the time.

Here is the codesandbox containing all the code that we did today:
https://codesandbox.io/s/making-components-in-html-eebyx

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Response/text

Some people reading the title of this article be like:

How to create a simple testimonial carousel with Splide.js

Ridhik Govind — Sun, 18 Jul 2021 10:41:29 +0000

Appetizer

Today we will learn how to create a testimonial carousel with Splide

Now why Splide and not others such as Swiperjs and Owl-carousel is that it's totally dependency free - hence less size.
So let's get cracking.

Main Course

Step 1: Get the latest Splide CDN

Let's grab the CDN from JSDeliver and import the Splide package into our code. Paste the code right after where the </body> tag ends. Reason for placing it at the bottom like we are doing now is we don't slow down the initial render of HTML.

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.4.21/dist/js/splide.min.js"></script>

Step 2: CDN link for styling

Now Splide comes with its own default as well as two thematic styling which are sea-green and sky-blue. If you are one of those people who loves custom styling things then just the default one which comes with basic styling such as arrows, pagination can be a great choice.

<link
rel="stylesheet"  
href="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.4.21/dist/css/splide.min.css"
/>

Step 3: Fundamental structure
Learning the very basic structure is important if you are building a custom site for somebody or yourself and want to apply your own styling. Here go ahead and type that in.

<div class="splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide"></li>
            <li class="splide__slide"></li>
            <li class="splide__slide"></li>
        </ul>
    </div>
</div>

Step 4: Adding the slide content - which in our case is the testimonial content inside each of the <li class="splide__slide"></li> tags.

<div class="splide__slide__container">
    <div class="slide__content">"I'm flabbergasted after using this product. No Regrets. Ever."
    </div>
</div>

Inside splide__slide__container is where we do all the adjustments such are setting the max-width for the content.

Tip: Having splide__slide__container is also pretty useful if you are having an image and you want to set a specific height for your image and go full blown cover mode but more on that later.

Now let us turn this plain text into something pretty.

Step 5: Styling your slide

add padding
centering the text content inside the container

General Tip 1: When in doubt, add a border-radius: 1px solid red around the element to easily identify where you are actually applying your styles.

General Tip 2: Always, I mean always just have your Dev tools open at all times while you are checking where you are applying certain styling like your padding. 90% of the problems can be solved by simply inspecting the element.

<style>
      *{
        box-sizing: border-box;
        font-family: 'Inter', sans-serif;
      }

      body{
        margin: 4rem 0;

      }
      .splide__slide{
        padding: 6rem;
        display: flex;
        justify-content: center;
        background: #ECF0F1 ;

      }

      .splide__slide__container{
        width: 600px;
        text-align: center;
      }

      .slide__content{
      margin: 1rem 0;
      font-size: 1.3rem;
      }

      .slide-img__wrapper{
        display: flex;
        align-items: center;

      }

      .slide-img{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        max-width: 100%;
        max-height: 100%;
      }

      .slide-img__caption{
        margin-left: 1rem;
      }

      .slide-img__caption span{
        color: #2E86C1 ;
        font-weight: 500;
      }
    </style>

Step 6: Adding JavaScript

Activate the carousel by creating a new Splide object to the HTML on page load.

<script>
    document.addEventListener( 'DOMContentLoaded', function () {
        new Splide( '.splide' ).mount();
    } );
</script>

and with this the carousel is done. Now if you want to further modify it, here's the trick. Go to the HTML page. Inspect the whole page and you can notice that there are elements like splide__arrows and splide__pagination. What do these mean ?

Step 7: Applying custom styles to Carousel elements (arrows, pagination)

If you are building a website which has a primary color and you would like to apply these to the arrows and the pagination at the bottom of the slide, you can just apply styles by grabbing the element class names from Dev tools and applying styles to them.

As an example,let's change the default style of the pagination circles.

.splide__pagination__page.is-active { transform: scale(1.5); //here I have changed the scale from 1.4 to 1.5 background: #0b72e7; //changed from default bg-color to blue }
This means that when the the current page is active, the color will be activated.

Same method can be used for the splide__arrows as well !

Dessert

There are sure a few more amazing way to modify your slider and for that do go check out the Splide Docs.

Find the whole code for this article on my Codesandbox

Hope you learned something new. Till then keep sliding !

Solving Event Handling Errors in React

Ridhik Govind — Sun, 25 Apr 2021 19:49:15 +0000

Event handling in React is one of the basic things you learn when you start learning React. Some example are: 'onClick', 'onSubmit', 'onChange' etc, and if you are coming from a Vanilla JavaScript path, handling events in React will feel a lot easier. But it does come with some basic understanding of the JSX syntax and using React state.

So let's get started ? As always starting with our end goal and how we would be reaching that goal.

GOAL: To change the word from 'heyy' to 'byee' on the click of the button

METHOD: Using an event handler and React state

below is a basic layout of how the app is structured

export default function App() {

  const[word,setWord] = useState('heyy')
  return(
    <div>
      {word}
      <button>Click here</button>
    </div>
  )
}

CASE - 1: Doing it the wrong way.

export default function App() {

  const[word,setWord] = useState('heyy')
  return(
    <div>
      {word}
      <button onClick="byee">Click here</button>
    </div>
  )
}

Now this isn't what people do in real life but I just wanted to show you the error which we will get if we do this: Here's the error:

Error
Expected `onClick` listener to be a function, instead got a value of `string` type.

Why ? Because event handlers must always be a function or a reference to a function. Here the button will not work because the event handler here i.e onClick is set to a string.

CASE - 2: Doing it the confusingly wrong way

<button onClick={setWord('bye')}>Click here</button>

Now look at the above code. Logically speaking when one looks at this code it is simple - you have an event handler which is set to setWord function, inside which we have 'bye' argument, hence its a function call. So if a user clicks this button, the state will be updated. Right ?

Simple answer is Yes, the state will be updated BUT with a BIG error that goes like this:

Error
Too many re-renders. React limits the number of renders to prevent an infinite loop.

So why do we get this 'too many re-renders' error ? Well, for that let's kick back some React basics.

Now in React curly braces like this one {} are a special JSX syntax which are used to evaluate some JavaScript variable, function or any code that has a value.

So if we look at the code above in this Case, we can see that we have written onClick={setWord('bye')}. The problem with this is that at the very first time the app runs (i.e first render), this curly braces gets executed regardless of whether it is attached to an event listener or not. That is one feature of this special curly braces. Don't believe me ? try the below code:

export default function App() {

  const[word,setWord] = useState('heyy')
  return(
    <div>
      {word}
      <button onClick={console.log('bleh! I just ran just like that')}>Click here</button>
    </div>
  )
}

Did you see that the output got logged at the first render itself without even clicking the button ? You bet !

Note: But if we click the button, nothing happens. This is because like we said curly braces is executing the console.log function, and we know that a function should return something. But since, here no value is being returned, undefined is being returned, thus nothing is logged out.

Now, I said that the 'STATE WILL BE UPDATED' in this case. But you wont be able to see because the error is being displayed on top of everything. But here's one way to debug you code and see what really happens under the hood. Try this code instead:

export default function App() {

    const[word,setWord] = useState('heyy')
+   console.log(word);
     return(
        <div>
        {word}
        <button onClick={setWord('byee')}>Click here</button>
       </div>
  )
}

Now check your console and you will see that the error has happened because the state has been updated too many times. Now combining the basics of curly braces, we can understand that this is what actually happens:

1st RENDER - curly braces runs the code inside it whether if it's attached to an event listener or not, state gets updated to 'byee', starts the 2nd RENDER
2nd RENDER - again same thing happens: curly braces are executed, state gets updated to 'byee' again, starts 3rd RENDER and it goes on..and on.. till React is like "Okay dude, enough is enough,this is too much, lemme show you some errors".

CASE - 3 : Some better ways to use an event handler

Better way - 1: Defining event handlers directly in the button's attribute

<button onClick={() => setWord('bye')}>Click here</button>

Basically, by setting the event handler to an arrow function which points to a reference, no function gets called until and only when the button is clicked.

When we do it this way, we are like "Hey onClick, I have given you one function, which contains some activity to be done. ONLY DO IT when I click something on screen.

Better way - 2: Cleaner way to do it.

Not many people prefer to do it the first way because sometimes, we have to add more than one activity to this function. So we can do it this way:

export default function App() {
  const [word, setWord] = useState("heyy");

  const handleClick = () => {
    setWord("Byee");
  };

  return (
    <div>
      {word}
      <button onClick={handleClick}>Click here</button>
    </div>
  );
}

Here, we have created a separate function that does something i.e change the state, and have attached this function to the event handler.

Conclusion:

Making sure you understand the bare basics of React is really important.You can get away with these tiny errors by making some adjustments, but in the long term its good to know what actually causes this error. Thanks for reading and hope you have learned something new today 😊. Byee !

How to style your React-Router links using styled-components

Ridhik Govind — Sun, 28 Feb 2021 06:08:40 +0000

So you've just started using React-Router for easily routing the pages in your React-web app and if you're also using Styled-components, then kudos - this article is for you. In this article I will explain how to easily style your React-Router Links by going through 3 main methods of styling.

Goals - To code out efficient and cleaner code that are reusable that can help us when we are making our application bigger.

Note: It is assumed that you already know how to work with React Router and styled-components at a basic level

METHOD 1: Styling links using inline style attribute.

//Nav.js  

import { Link } from "react-router-dom";
import styled from "styled-components";

const NavUnlisted = styled.ul`
  text-decoration: none;
`;

const linkStyle = {
  margin: "1rem",
  textDecoration: "none",
  color: 'blue'
};

function Nav() {
  return (
    <NavUnlisted>
      <Link to="/" style={linkStyle}>
        Home
      </Link>
      <Link to="/about" style={linkStyle}>
        About
      </Link>
    </NavUnlisted>
  );
}

export default Nav;

Explanation : So you have the following code with you. It contains an 'unordered nav list' component named NavUnlisted. But let's just keep our main focus on the Link component shall we. Now the thing is you cannot directly style the Link using styled components this way. Why ? Because under the hood, Link is just an anchor tag or <a> tag that we are importing from the styled-components. So we can't create a constant variable with this Link.

const Link = styled.a``;  //error - **Link** already has been declared

Solution : Use inline style attribute. These basically are similar to how we use inline styles in HTML.So we create a style attribute with the styles inside it in an object form.

Conclusion : This is not so great way as it will become difficult to code out and track individual styles as the app scales - Also, it does not meet the standards of our Goals stated at the beginning of the article.

Here is a Codesandbox link if you are interesting in taking a quick glance at the code for METHOD-1 and if you wish you can follow along too.

METHOD 2: Styling links using 'styled.componentName' format.

If you are familiar with styled components, you should know that styled is like the very basic thing you import from styled-components.styled together with 'tagNames' (e.g div or li or h1 etc) or a valid component name can be used to apply styles to a component.

The reason why we can use the latter one i.e component name, is because we have imported a component here that is Link, now we can pass this Link like this:

const StyledLink  = styled(Link)`
     //some CSS styles here
`;

Explanation : I know this one's a little tricky but here it goes. So basically what we are doing here is, we are creating a new component and telling it, "Hey I am a new component and I want to be like Mr.Link but in a stylish manner, so I am going to take all of the Mr.Link characteristics and add a little bit a style of my own". So in the end the code looks something like this:

const StyledLink = styled(Link)`
  color: Blue;
  text-decoration: none;
  margin: 1rem;
  position: relative;
`;

function Nav() {
  return (
    <NavUnlisted>
      <StyledLink to="/">Home</StyledLink>
      <StyledLink to="/about">About</StyledLink>
    </NavUnlisted>
  );
}

Solution : Now you can style your Link directly by creating another component instance i.e StyledLink, and then applying style to it.

Conclusion : This is a cleaner way than METHOD-1 because unlike in the earlier method, here we are actually writing CSS. What I meant by is that - in METHOD-1,we had to write textDecoration instead of text-decoration. Are you just noticing this now ? Greatttt !

METHOD-3: Styling React-Router links using 'NavLinks' and 'activeClassNames'.

Well well well, this was the moment where I found something really interesting that led me to write this article. React-Router has a module called NavLinks that we can use as a component. What's so special about it you may ask ? Well, it was built specifically for styling links you use with React-Router. NAVLINK is provided by REACT-ROUTER and NOT by STYLED-COMPONENTS. Well, that a whole lot of Well's in one paragraph. Anyway, let's jump into the code but beware there are some major changes here:

import { NavLink } from "react-router-dom";  

const NavUnlisted = styled.ul`

  display: flex;

  a {
    text-decoration: none;
  }

  li {
    color: red;
    margin: 0 0.8rem;
    font-size: 1.3rem;
    position: relative;
    list-style: none;
  }

  .current {
    li {
      border-bottom: 2px solid black;
    }
  }
`;


function Nav() {
  return (
    <NavUnlisted>
      <NavLink to="/" activeClassName="current" exact>
        <li>Home</li>
      </NavLink>
      <NavLink to="/about" activeClassName="current" exact>
        <li>About</li>
      </NavLink>
    </NavUnlisted>
  );
}

Explanation : So basically, NavLink is a special style of Link that we can add styles to it when it matches a certain path in the URL.So if I am currently in '/' i.e Home, I can apply a style border-bottom to the 'Home' link and if I am in '/about' path then apply style to 'About' link . It would look something like this:

activeClassName is an attribute that we can use to create a class that we can later apply style to it. In our case, we have used the .current and li tag to make a border-bottom to the corresponding link whenenver the path of the URL changes.
exact keyword is used so as to specifically target the currently selected URL. So if the path is '/' then styling will ONLY be applied to the Home page. try removing the exact and see the effect for yourself

Solution : Using NavLink, we can save time by not writing any JavaScript for triggering the current selection and applying corresponding styling. Instead we can simply use the NavLink provided by the React-Router.

Conclusion : This method is effective when you want to apply certain specific styling e.g when the link is currently selected and so on.

METHOD - 4: Writing a much cleaner code for METHOD - 3 [BONUS PART]

const NavUnlisted = styled.ul`
  display: flex;
  a {
    text-decoration: none;
  }
  li {
    color: red;
    margin: 0 0.8rem;
    font-size: 1.3rem;
    position: relative;
    list-style: none;
  }

  .current {
    li {
      border-bottom: 2px solid black;
    }
  }
`;


const links = [
  {name: "Home",path:"/"},
  {name: "About",path:"/about"},
];

function Nav() {
  return (
    <NavUnlisted>
      {links.map((link,index) => (
        <NavLink key={index} to={link.path} exact activeClassName="current">
          <li>{link.name}</li>
        </NavLink>
      ))}
    </NavUnlisted>
  );
}

Explanation: What we have done here is simple but it can save us a loads of time in the future if we want add or change links easily. Just create a new array with all the objects you need and just 'map' over them. That's pretty much it.

End

So I hope you have learned something new. If you happen to notice any errors or mistakes in this article please feel free to point it out. Wait... You have a much better way to do the above methods ?? Let me know in the comments below 😃

I know I know !

References:

Find the entire code for all the methods in this Codesandbox. Don't forget to uncomment the code for each method 😉

This is for the Twitter peeps - find me @fluffyRidz

MVC architecture: Explained with an example

Ridhik Govind — Sat, 20 Feb 2021 03:46:59 +0000

What is an MVC architecture ?

An MVC is a popular software design pattern which is used to make applications by dividing the user interface(UI) and the logic of the program into different components. MVC stands for Model, View and Controller.In simple terms, it is used to divide the server code and the client code into different parts.

How I used to think an MVC structure was at first. But don't be scared its not that complex okay !

Why use MVC ?

If you already using React, then you know how writing code into 'components' has made our life easier than before. An MVC architecture has an almost similar approach - meaning we can write code into 3 main components which has the following benefits:

Easy to maintain and expand since each important parts are in separate files namely Model,View and Controller.
Can easily be tested individually without affecting one another.
There are already many frameworks which uses MVC frameworks to build out web apps e.g Express, Ruby on Rails etc.

So what are Model,View and Controller first of all ?

View
- Consists of the UI(What the User actually sees and interacts with)
- e.g React can be considered a view or if you are using a JavaScript templating engine like Ejs,this can be a view too.
Model
- Contains all the logic of how the data should structure inside a database. e.g Mongoose Schemas (if you are familiar with it) or in simple terms the structure in which data is to be stored in the Database.
- Handles all the behind the scenes activities of storing data into the Database(Inserting,deleting,updating data etc.)
Controller
- The controller is like the intermediary through which all the requests and data between the View and the Model go through. Also do notice that: the View and the Model never meet or pass data with each other,every request must pass through the controller making it such an important component in an MVC architecture.
- It basically handles all the requests like (GET,POST,PUT,DELETE etc) through the use of View.

Pictorial explanation

So lets explain this concept with a help of a diagram:

So what happens here is there is a User, who wants to add a movie.He uses the View (which is the UI of the web app) to makes some changes to it - by inputting some movie details into an input field.
When the user submits the Data using a submit button in Step 1, a request( in this case its a HTTP POST request) is made to the Controller. So in simple terms we are sending the input value to the Controller.
The Controller receives this data from the View and then handles or passes the request (in our case it is a POST request) to the Database for storing - Because unless the data is stored,we wont be able to retrieve it later on.For this we need to send it to the Model.
The Model handles all the data logic for getting this data from the Controller and then storing it in the Database behind the scenes (e.g storing the data with the correct 'key:value' pair in the Database).In our case, we are inserting this movie details into our database which contains a list of movies. But its not finished yet, because the data is only inserted into our Database's movie list but the user is not made aware of this. That is why we have to send the "updated movie list" back to the user. How do we do this?

The Model sends the updated movie list back to the Controller with a message - "Hey I have successfully inserted the movies into the Database okay ? :)". But if the Model fails to insert the movie,then it sends an error message instead saying "Sorry but the movie couldn't be inserted into the Database :( ".

Now the Controller cannot 'control the happiness' (yep, pun intended!) of receiving the updated movie list from the Model and shares its happiness with the View.
In the View the movie list is finally updated and sends this results back to the browser that the user is using. Now the user can finally see the updated movie list on his screen including the new movie that he has created.

An example of how the MVC code structure looks like for a simple app.

#1 When using Ejs template engine as the view

Inside the 'Views' folder contains all the necessary pages that a user will interact with

#2 When using React as the view

*Inside the 'client' folder contains all the UI.

Conclusion

Learning the MVC pattern can be pretty useful when you want to big bigger apps that are easy to manage.If you havn't understood this concept in your first shot,no worries it takes some time.Please let me know if there are any mistakes or suggestions to be made in this article :)

Incase we are meeting for the time - Hi ! my name is Ridhik, I love building stuff up from scratch and jot down my learning into articles. Feel free to connect with me on Twitter(@fluffyRidz).

Learn React Context by building a dead simple wallet app (For beginners)

Ridhik Govind — Wed, 13 Jan 2021 09:35:57 +0000

If you are a beginner to React and you have been using props to pass data from one component to another then this article is for you to help level up your context game.

P.S - This article is mainly focused on absolute beginners and thats why I have tried to explain things in details - its gonna be pretty long. It is also assumed that you have the basic knowledge of how React Hooks work.

Why use React Context ?

You see there is a concept called as 'prop-drilling' in React . Basically it means passing down certain data from a parent component to another through props. React context is an easier alternative to this method.(explained in detail later on)

What are props ?

Imagine your own parents, see they must be having some kind of special characteristics. It could be the color of the eyes, skin color, shape of the nose etc. Similarly, in React each parent component has characteristics( or lets call it properties or even a better word would be - props) can be passed down to the children in case we want to make changes to the child components based on the parent components.

So what's with the whole 'props' my friend ?

Let's understand this with the help of an example.

Step 1: Create a parent component. Now also notice that we have created some styles that the parent wants to pass to its child.

import React from "react";

style = {
color: "red"
}

function Parent() {
  return (
    <div>
      Parent component
    </div>
  );
}

export default Parent;

Step 2: Create a Child component.

import React from 'react'

function Child() {
  return(
    <div>
      Child component
    </div>
  )
}

export default Child

Step 3: Now comes the important part - Passing props. First of all in your parent component import the Child component and wrap the child inside the parent. Second, pass the "style" variable as the props(named style) to the child component. Here's how you can do do that:

//Parent.js

function Parent() {
  return (
    <div>
      Parent component
+     <Child style={style} />
    </div>
  );
}

Step 4: Now the only part left is grabbing this passed prop from the child component's side and applying the style to the child element.

First, using the destructuring method, we extract the "style" prop from the parent. Now this is available as a variable we can use anywhere. e.g:

function Child({ style }) {
  return <div style={style}>Child component</div>;
}

Second, just apply the style to the child element, that's it voila ! The text in your element in now Red.

Here's how the final code for both parent and child components will look like:

https://codesandbox.io/s/react-context-parent-child-props-example-1f8kl?file=/src/App.js

But the title says we were going to build a dead simple wallet app? Where is that ?

So the reason I explained using the prop method this extensively is because first we won't be jumping into building a wallet using React Context. Instead, we will go through some base model code of how this wallet should be Using props and then we shall look at how easy-peasy it is using React context.

Let's begin >>>

METHOD 1: BASE CODE FOR WALLET - (USING PROPS)

Story time : There are 3 banks - Paytm, Sbi and Axis. These 3 banks they regularly deal with money. But the only problem is, if Paytm(1st bank) wants to send money to Axis(3rd bank), Paytm can ONLY do this by first transferring the money to Sbi and then Sbi will transfer the money to Axis. ( I know normally, this is not the case, but in our example we assume it this way ).

So the main way these three banks transfer money through each other is through 'props' - yep, the same props we have explained above.

GOAL: Our goal is to transfer money from Paytm to Axis bank by having Sbi as a middle group just for passing the props and nothing else. You can think Sbi as more of a bridge/agent here.

Step 1: Create 3 components namely - Paytm.js, Sbi.js, Axis.js.

Step 2: Let's talk about Paytm.js first. Here you go:

import React, { useState } from "react";
import Sbi from "./Sbi";
function Paytm() {
  const [amount, setAmount] = useState(200);

 //send PaytmName money to Axis bank
  return (
    <div>
      <h2>Paytm</h2>
      <Sbi amount={amount}/>
    </div>
  );
}

export default Paytm;

Explanation: So here have created a Paytm.js component. Inside there is a state hook that is having a default 'amount' value of 200. But could you just look at our goal: It says 'transfer this amount 200 to Axis bank using Sbi as an agent'. So we pass this 'amount' state varibale to the prop 'amount' (you can name your prop anything you want but for the sake of simplicity I'm naming it amount).

Step 3: Time for Sbi to act as an agent.

import React from "react";
import Axis from "./Axis";

function Sbi({amount}) {
  return (
    <div>
      <h2>Sbi</h2>
      <Axis amount={amount}/>
    </div>
  );
}

export default Sbi;

Explanation: Remember the Parent-Child example I explained from above ? And how I explained the whole dealing with the 'prop', 'destructuring' etc ? Here is the exact same thing we are doing. Here, Sbi extracts the prop passed from Paytm and then passes it as the props to its child element (Axis).If you havn't understood this part, don't worry, just go through the Parent-Child example.

Step 4: Last and final part - creating our Axis.js.

import React from "react";

function Axis({amount}) {
  return (
    <div>
      <h2>Axis received {amount} from Paytm through sbi by way of props</h2>
    </div>
  );
}

export default Axis;

Explanation: Same concepts applied - you destructure the value from the parent of Axis i.e Sbi and then you use the variable inside the text. Now if you are coding along with me until now, you will notice that the amount value of 200 has been Successfully been transferred from Paytm -> Axis Bank. This is how you pass a value through props MISSION COMPLETED.

Have a look at the code: https://codesandbox.io/s/react-bank-exampleusing-props-xpxv6?file=/src/Axis.js:0-192

METHOD 2: BUILDING A WALLET (USING REACT CONTEXT)

So this is basically what we will be building, I know its not much of a wallet app but there's a lot going on here.

Understanding React Context

'Context' in english language simply means 'any data/information that has been set already which can help us understand the current situation'. In React, creating a context simply means creating a universal store of values and grabbing them whenever we need.
The rule that React Context follow is: Store once, use anywhere. How it works is because React context has two objects - a Provider and a Consumer. A Provider, as the name suggests is where we have to store the data and a Consumer is the one who uses this data. So in our example, if Paytm is the Provider, then both Sbi and Axis are consumers. But when we look at our goal, then which one do you think our consumer should be ? Axis bank of course !

Goal: Send money from Paytm -> Axis bank without transferring the money through Sbi by using React Context.

Step 1: We start by creating MyContext.js file:

//MyContext.js

import React from "react";

const MyContext = React.createContext();

export default MyContext;

Explanation: In React, the context object comes pre-loaded. So if we need to make use of context, we have to initialize context by creating React context object using createContext and then storing this in a variable called 'MyContext', then exporting it.

Step 2: Create a Context Provider inside Paytm.js

//Paytm.js

import React, { useState } from "react";
import Sbi from "./Sbi";

import Total from "./Total";
import Balance from "./Balance";

import MyContext from "./MyContext";

const style = {
  background: "black",
  color: "red",
  padding: "0.5rem",
  display: "grid",
  gridTemplateColumns: "1fr 1fr"
};

 function Paytm() {

  const [amount, setAmount] = useState(200);
  const [total, setTotal] = useState(500);
  const [balance, setBalance] = useState(null);

  //Goal: send Paytm money to Axis bank without the passing the money through Sbi

  return (
    <MyContext.Provider value={{
        amount,
        total,
        setTotal,
        balance,
        setBalance,

      }}>
      <div>
      <div className="paytmWallet" style={style}>
          <Total />
          <Balance />
      </div>
        <h2>Paytm</h2>
        <Sbi />
      </div>
    </MyContext.Provider>
  );
}

Explanation:

First, we import the MyContext variable from MyContext.js. Why ? So that we can create a Provider.
Create a Provider object using MyContext as shown above. One important thing to notice here is that, you have to wrap the child components inside the Provider so that each child has access to the data from the central store of the Provider. E.g Since Axis is a child of Sbi, we have to wrap Sbi around Paytm's Provider.
Next, we create some state hooks with some default values that we will pass as 'props' to the Provider. This 'props' that we are passing is available to all the child elements down the road that is wrapped inside this Provider. e.g Since Sbi is wrapped inside, Sbi.js has access to it, so does Axis.js.
We have also created a small wallet section that is going to display our Paytm wallet details with some basic styling.

Step 3: We create the Sbi.js component which has nothing but its child component Axis.js

//Sbi.js

import Axis from "./Axis";

function Sbi() {
  return (
    <div>
      <h2>Sbi</h2>
      <Axis />
    </div>
  );
}

Step 4: Create Axis.js component. This is where we have to use useContext to grab the data that we have passed as props to the Provider.

In React, we can either follow one approach which is creating a Consumer object from 'MyContext'. But here we will be following the 'useContext' approach.
useContext is a hook (just like useEffect and useState) that is used to grab the prop values from the nearest Provider. It works by accepting the context object i.e MyContext and then returning the prop value of the nearest Provider i.e Paytm.

import React from "react";
import MyContext from './MyContext'

function Axis() {
  const value = React.useContext(MyContext)
  return (
    <div>
      <h2>Axis received <span style={value.amountStyle}>{value.amount}</span> from Paytm through sbi by way of useContext</h2>
    </div>
  );
}

export default Axis;

Explanation:

As you can see, the variable 'value' contains all the values of the 'value' prop that we have passed in the Provider. So in order to display the amount that has been transferred, you can use {value.amount}.
But it is not only state hooks that we can pass as 'props' to the Provider, we can even pass objects. E.g If we need to apply a certain style, we the pass the object 'amountStyle' and in Axis we can use it by way of {value.amountStyle} and this will apply all the styles as usual. See how easy it is than doing 'prop-drilling' !

In paytm.js pass in the following 'amountStyle' below 'style' object:

const amountStyle = {
  background: "black",
  color: "red"
};

Now pass 'amountStyle' to the list of value props of the Provider.

Step 5: This step will be one of the easist, because you already have an idea of how Context works now.
This step involves creating a 'Total' and 'Balance' component:

//Total.js

import React from 'react'
import MyContext from './MyContext'

function Total() {
  const value = React.useContext(MyContext)
  return (
    <div className="total">Total:{value.total} </div>
  )
}

export default Total;

//Balance.js

import React from 'react'
import MyContext from './MyContext'

function Balance() {

  const value = React.useContext(MyContext)

  return (
    <div className="Balance" >Balance:{value.total - value.amount} </div>
  )
}

export default Balance;

Explanation: While the total value remains the same, the balance value is changed dynamically according to the amount that has been transferred from 'Paytm wallet' to 'Axis' bank.

Try changing the 'amount' value from 200 to 300. You can notice that the 'balance' amount has changed - this is because we are changing the state of 'amount' in Paytm (Provider) also.

At the end the whole code would look something like this:

https://codesandbox.io/s/react-bank-wallet-using-usecontext-final-u8guh?file=/src/App.js

Side note: So if you looked at the above code, and you are thinking "What would I gain by just passing values around, I don't think I will be using this often !".
I used to think like this, until I started building bigger applications and passing data from one component to another can turn out to be a total mess. So if you are building a really small app - go on and use the prop method. But, if it has like components that are nested real deep - don't even think twice, use Context.It can be confusing at first, but you'll get the hang of it.

What we have learned so far:

Meaning of props through a 'Parent-Child' component example.
Prop-drilling (when to use it and when not to use it)
Understand how destructuring works(refer MDN docs for more)
How to use React context - Provider and Consumer concept
How to use the 'useContext' hook to grab data from the Context Provider easily by way of creating a wallet app.

As always the mandatory Gif is here:

This will be you after using React Context for the first time.

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using JavaScript (EASY WAY)

Ridhik Govind — Sat, 05 Dec 2020 09:13:42 +0000

So this title you are looking at - Yes its an actual stackoverflow question.The question has 980 upvotes and it's top answer has 723 upvotes. Then the question arises, why write an article about it then. Well, for starters I really wanted to answer this question, but since I didnt have enough "reputations",this article is my way of letting people know of this new easy method.

First things first

Scenerio 1:
Imagine you want to grab an element using JavaScript and change its color using JavaScript. Its pretty easy, here we go:

//HTML
<div id="text">Hey there !</div>

//CSS
#text{
color: red;
}

//JS
const text = document.getElementById('text');
text.style.color = 'blue';

Scenerio 2:
This time we create a :before pseudo element on the #text element and then try to change the pseudo element's background color. So lets see what happens here:

Create a basic pseudo element with the styling(if you are new to creating a pseudo element, I suggest you learn that first and come back here):

//CSS
#text{
color: red;
position: relative;
}

#text:before{
  position: absolute;
  height: 25px;
  width: 100px;
  background: black;
  top: -30px;
  left: 0;
  content: "";
}

Now just a little twist to this, instead of using black as the background color, we are gonna create a :root element in our CSS file inside which we will create a variable '--pseudo-backgroundcolor' with a value of 'red' and use this varible as the value for 'background' as shown below.

//CSS
:root{
--pseudo-backgroundcolor: red;
}

#test:before{
 background: var(--pseudo-backgroundcolor);
}

So by now I hope you are getting some hint of where I am heading. No ? Okay, let me explain. Our goal is simple, we should create a global background color variable and with the help of JavaScript we will grab the root value of the variable and update it using JavaScript so that the effect will be applied to the pseudo elements background color style automatically.

Lets get to work:

//JS
const root = document.querySelector(":root"); //grabbing the root element

**important part below** 

root.style.setProperty("--pseudo-backgroundcolor", 'green');

So as you can see, we grabbed the --pseudo-backgroundcolor varible and used setProperty function to first select the variable and then set its color value from red to green. This is pretty much the code we need.So now if we ever need to change the color, you can just do this dynamically.An example would be to create a button and on click of that button, you can loop through an array of different colors and apply it to this varible.

In the stackoverflow answer, you can see other right ways too, but they just seemed a bit long, while this one just needs you to set the root variable and just write some JS code.

BONUS PART:

Suppose you want to add a text to a pseudo element - we usually add text using the content = "" property.So instead of "" , just create a root variable like we did above and manipulate it using one line of JavaScript.Here's the code:

//CSS 
:root{
--pseudo-text: "just some text";
}

#text:before {
  content: var(--pseudo-text);
}

//JS
root.style.setProperty("--pseudo-text", `"YAY new text"`);
//**!! Dont forget to add the 'double quotes' around this new text above or else you can't see any changes

So thats it, Hope you learned something new today or even saved time finding this solution. I got to find this solution while I was making my app - PrettyCover - which you can use to create Beautiful Cover Images for your blogs.In fact, I have made this cover image using PrettyCover. I would appreciate if you could go and try it out, and if you like it, don't forget to ⭐ the repo.

Also, here is the codePen containing the full example codes: https://codepen.io/ridzman/pen/poEgPGq?editors=0011

And as always ending the article with a Gif. Please do let me know if there are any corrections or clarifications to be made. Ciao !

Asynchronous JavaScript explained in human language

Ridhik Govind — Fri, 20 Nov 2020 20:28:19 +0000

Async..WHAT JavaScript ??

An Async (short for Asynchronous) JavaScript allows us to run callback functions without actually blocking the execution block, which helps us to run the functions in pararrel to one another.

You know what ? Even I didnt understand a word of what an Async JS meant when I first heard of it - it took me a while to understand what it actually means. So here I won't be going that deep, but I will be explaining just the simple meaning of this while 'Asynckkyy' process. I have divided this article into 2 parts - Part 1 where I explain in language which humans can understand and Part 2 where you become a super human to understand more about it

PART 1: HUMAN LANGUAGE

RS Hotel is an amazing hotel that makes some of the best food in the city. But RS hotel has 2 branches: A branch named 'RS Hotel Sync' and another one named 'RS Hotel Async'. Lets first see how things are working in the first branch :

Sync Branch -

So what's happening in this branch ?

There are 4 people (A,B,C,D) waiting in line to order food at the kitchen counter.But there is a speciality at this branch - after you place an order you have to wait at the kitchen counter until the food has completed cooking.
So here if A places an order, A has to wait there until the food is cooked and delivered to him right there at the kitchen counter.
A leaves the counter after grabbing his food, now B comes up next a little frustrated because he had to wait for a long time, places his order and waits for the food to get cooked.
Similarly for C and D the same happens.

Async Branch -

So what's happening in this branch ?

At first, A place his order and while his food is being cooked, A is informed that he can go to the waiting area.
This clears up the kitchen counter so next up, B place his order, and right then you see a man behind the kitchen counter shouting "Hey A your food is ready, please come get it before it gets cold !!". A comes, grabs his food and leaves. B's food starts getting prepared and on seeing this B leave towards the waiting area.
Next up is C, C orders, right then the man shouts for B to come and grabs his food and leave, C's food starts getting prepared and C leaves.
similarly for D the same happens.

Conclusion for PART 1:

Notice in 'Sync' branch how people had to queue up for a long period of time for the food to actually finsish cooking ? This is called the Synchronous way. At a time only one dish can be prepared. This is actually ineffective as other people ( B, C, D) had to actually wait.
Meanwhile, in 'Async' branch, things are going as smooth as butter. People are placing orders, food is getting prepared and when the next person comes to order, the earlier person's food has finished cooking. Also, people are told to wait in a waiting room after ordering so there is literally no queue.This is actually an efficient way to handle mutliple number of processes because the people behind one other don't have to wait for a long time in a queue and also the cooking is being done at the same time behind the scenes.

PART 2: SUPER HUMAN LANGUAGE (ASYNC EXPLAINED A BIT DEEP)

This is where things starts to get a little interesting. Now since you have understood what Async basically is, lets actually see what is really happening asynchronously in an app with the help of my beautiful crafted 'figm-orial representation' - that I so call.

Explanation

Whats happening is similar to the PART 1 explanation, but just that you can see an additional item here - the 'Cooks'. Now the cooks inside the kitchen are really the ones who does all the hardwork okay!

So what happens here ? Suppose A orders the food, the order is taken by the kitchen and A's order is allocated to 'Cook 1' (the red arrow's gives you a much clear idea). As soon as A's food is done, 'Cook 1' returns this food to the kitchen and back to A. And in Async the orders are taken so fast that each order should be allocated to separate cooks.
So as soon as A's order is taken, A's food is allocated to 'Cook 1', next up B's order is taken, allocated to 'Cook 2', C's - 'Cook 3', D - 'Cook 4'. As soon as each cook is done, the food is returned to the kitchen where each customer can take the food. See no hassle - feels pretty organised to me.

Similarly

This is actually what happens in JavaScript. Just replace:

the 'Customers' with 'Tasks' - These tasks are usually functions inside an app(e.g a Node.js app) with a callback function (explained below)
replace the 'Kitchen' with the 'Event loop'- which takes in all the tasks and allocate it to 'threads'
replace 'cooks' with 'threads' - which handles and processes each task and returns back the completed version to the 'Event loop' which then returns back to the 'Node.js app'.

Someone explain to me what a callback function is !!!

Now a callback function is basically what I like to call it as a 'Boomerang function'. Know what a Boomerang is ? That curvy little thing that you flip in the air and it just returns back to you. Yup, callback functions can be thought like boomerangs who takes certain orders and then returns back the result after processing them.

But where is this 'Async' even used ?

Now, do note in your mind that, the word 'Async' just doesn't only have one meaning that is 'Async functions'. E.g Node.js is a server side framework which actually runs on the basis of these 'Async' operations. And guess what? That is why Node.js is such a popular framework (my favourite too !) because it can handle as many processes as it wants as it won't get blocked because the processes are run Asynchronously.This means less server overhead and faster processes. Now statements like this might make at least 40% sense to you now.

What are some things that you should know while using 'Async functions' ?

First things first, every good thing in this world also has to have some bad sides to it right ? One thing you should be doing is handling errors well. Because if you don't do that well there is a chance that your app might crash. Let the fast processing be the motivation behind handling errors.

Time to say bye

So, I hope you have got some idea of what Async is. I have tried to explain this as simple as possible keeping in mind you are an absolute beginner. But its fine if you don't understand it in your first read, because there will be a time when you finally understand it and feel like this:

Meanwhile, Here is one amazing video which will help you understand it better:

https://www.youtube.com/watch?v=8aGhZQkoFbQ&vl=en&ab_channel=JSConf

Oh and I am Ridhik and nice to meet ya. I am learning how to code better everyday, build and write about them. Currently I am learning React.js and Node.js. Please let me know if there are any errors or corrections to be made.Also, Feel free to Connect with me on Twitter.

z-index; Tackling this tiny beast.

Ridhik Govind — Sun, 08 Nov 2020 08:53:10 +0000

Ever since I start learning how to code, all I knew about z-index was that z-index was something that you could use to make one element position above another element. In fact, this is true and this is what most beginner friendly tutorials will tell you and that's all I knew about it. UNTIL I started designing my portfolio [http://ridhikgovind.netlify.app/] and I had to personally deal with this z-index trouble which made me go haywire for 3 whole days. So what did I do ? I did what 100% of what all those who code would do - google it. And the search results I found out was an eye opening for me.

first of all why 'z-index' ? why not 'a-index' or 'g-index' ? Ever thought of that ?

Okay so everyone knows the graph with x and y-axis right ? What about the z-axis in the graph ? For who don't know what it looks like:

Now 'z-index' works the same way like 'z-axis' and this is where the elements stack up. Here is a even better illustration from a *smashingmagazine blog (https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/):

Now that is why its called 'z-index' becuase the elements are stacked along the z-axis.

How to tame the z-index !

z-index may look pretty simple, but if you don't understand some of the underlying concepts of it, there is a great chance you might end up in the rabbit hole of using z-index: 999999; (okay maybe a little exaggerated here). Let's talk about some rules now:

Also, open up this codepen in another tab as we will be referring to it often but just don't make any modifications yet : https://codepen.io/ridzman/pen/qBNMQKB

RULE 1: Always remember the 'stacking order' concept - Elements that come later in the HTML markup will have a natural tendancy to be on top of the former elements. You can notice in the codepen you have opened how the grey,blue and green boxes are stacked well on top of each other.

RULE 2: z-index will ONLY work on positioned elements - Unless you set a fixed or relative or an absolute position property on an element, z-index will have no effect on those elements whatsoever.

Can't believe this? worry not ! Go ahead and uncomment that "position:relative" in the CSS file of the codepen above. Now watch the stack order get reversed. Wait what just happened ? Rule 2 has happened - grey having the highest z-index becomes the element of top, followed by blue and green having the lowest z-index only after applying the position property.

RULE 3: A child element takes in the z-index of the parent - Time to work your fingers now. Go ahead and make a new div with an id="parent" on top of all HTML elements. Inside this div, cut and paste the whole div with id="grey". Final code would look something like this:

<div id="parent">
  <div id="grey"></div>
</div>
<div id="blue"></div>
<div id="green"></div>

and give this parent the following CSS:

#parent {
  position: relative;
  z-index: 1;
}

What did we do here ? We made 'grey' the child element of 'parent'. Also, did you notice the grey element now? Oh, grey is under blue element even with a z-index of 9999. How ridiculous is that ! Well, time to face the truth my friend - A child can only act powerful and all bossy only if he is independent(which in reality its true !). But if the child is living under its parent, it only has power which the parents impose. Here the z-index: 1; of the parent is being passed down to the child as well and thus 'grey' element comes under 'blue' element.

Here is a codepen demo of RULE 3 to play with: https://codepen.io/ridzman/pen/mdEGYbG

Conclusion

Allow me to quote Paulo Coelho:

"The simple things are also the most extraordinary things, and only the wise can see them."

I hope reading this made you a little wise !

Hey there, I am Ridhik - a beginner learning how to code and allocating insane amount of time for fixing errors. Let me know if I've made any mistakes or there are areas which needs corrections. Connect with me on twitter: https://twitter.com/fluffyRidz

How to hide your precious API keys in React for beginners.

Ridhik Govind — Wed, 21 Oct 2020 18:54:08 +0000

Before reading this, it's assumed that you know the basics of how to push code using git and a bit of React but I have tried to keep it as simple as possible.

What are API keys anyway ?

These can be thought of like an access code that allows us to grab some form of data from somewhere. Eg. Weather data from a weather server (openweathermap.org).

Why should we hide it ?

Now for a simple app like this, revealing your API_KEY might not cause you much harm, but imagine if you are building a bigger app you definitely don’t want a random stranger to use your services using your API_KEY – hence its always important to maintain best practices from the beginning itself.

So the main question, How do we hide it?

Simple, create a .gitignore file and type in the file name you wanna hide.Okay if you are a beginner its a bit intense. Don’t worry we’ll figure it out along the way.

What in the world is a .gitignore file ?

It is basically a file where we can include the name of the file/folder we want to hide from the prying eyes of human beings when you are uploading your project files into your Github repo. Now what type of files are we talking about here ? Imagine if you are building a simple weather app and you have in your hand an API_KEY which gives access to the weather info and you don't want anyone else to grab this piece of info.

So now lets get our hands dirty, shall we ?

Step 1: Create a .gitignore file in the root (main section) of your project folder (this is important!).

Step 2: Create another file and name it api.js . Now you must have your API_KEY (or whatever you have named) variable with the key value in your App.js right ? Cut and paste this API_KEY and its key value to api.js. Dont forget to add export keyword before the variable. It would look something like this inside your api.js.

export const API_KEY = "629ce335eae4t5cce613adf9c55a514a";

This api.js now contains your API_KEY details, but hold your horses as your app won't work because now you don’t have any API_KEY in your App.js.

Step 3: import the API_KEY from api.js to App.js. What are we doing here ? In simple terms we want to make a copy of the variable in order to use it inside App.js. In React we can import like this:

import {API_KEY} from './api'

Now you can notice that the full circle is complete and now your app is working fine.But even though we made a copy of the key to another file, notice that this api.js file is still visible.

Step 4: Remember in Step 1 we created a weird file called .gitignore. Well, now its time to type in the name of the file we want to hide inside this file. Type in:

/src/api.js

Here are ‘/’ means the root of your project folder. So /src/api.js means we are going inside src folder then grabbing api.js.

Step 5. We are almost done, now you can push your code to Github using Git.Now open your Github and go to your weather app project.Are u seeing the .gitignore file in your root of your folder ? Yes you do. But wanna see the real magic? Go to your src folder and keep looking for that poor api.js file as you won’t be seeing it anymore. If you have played the game Among us, you can imagine api.js as an imposter and now he has vented into thin air.

BONUS SCENERIO: If your have already pushed your code containing this api.js file in your project folder even before creating a .gitignore file – Don't worry I have a simple one liner solution. Okay, go ahead and perform step 1 and step 4, and open git and type in the following:

git rm -–cached  api.js

Now what this does is it removes that specific file from the working tree or in simple terms the upload list. So when you are uploading/pushing your code this api.js file is ignored/not included. Now go ahead and push your code again to Github. Enjoy your magic again.

Thats it for now folks.Being a beginner in React I might have made some writing mistakes, please do let me know so that I can correct myself . Also this is my first blog post so yay!

 < HappyCoding />