1- What is a callBack Function

  • A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

2- Why we need callBack functions in react

  • In ReactJs sometimes we need to pass props from a child component to his parent this operation isn’t simple as passing props from parent to child, you just need to pass the properties from the parent component then use it in the child Component as simple as that, here is a simple example :
const ChildComponent = ({prop1, prop2}) => {  return (    <div>      <h1>Property one: {prop1}</h1>
<h1>Property two: {prop2}</h1>

1. What is ESLint

ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. It was created by Nicholas C. Zakas in 2013. Rules in ESLint are configurable, and customized rules can be defined and loaded. ESLint covers both code quality and coding style issues. ESLint supports current standards of ECMAScript, and experimental syntax from drafts for future standards. Code using JSX or TypeScript can also be processed when a plugin or transpiler is used.

2. How to Use and configure it

. Installation and usage

You can install ESLint using npm or yarn:

npm install eslint --save-dev

# or

yarn add eslint --dev

You should then set up a…

What is tree shaking

Hello guys, first, I will explain the tree shaking term and how it works in our JS applications so let’s shake some trees

  • Tree shaking is a term commonly used in the JavaScript context for dead-code elimination, so usually, when we importor exportmodules in JavaScript there is some unused code around, logically that module will be imported with all its modules. Tree shaking or dead code elimination means that unused modules will not be included in the bundle during the build process.

I am sorry for the jQuery in the picture I do not like it either!

Async functions

Hello gays, first let's talk about async functions, they are available natively in Node JS and denoted by the async keyword in their declaration. They always return a promise, even if you don’t explicitly write them to do so. Also, the await keyword is only available inside async functions at the moment - it cannot be used in the global scope. In an async function, you can await any Promise or catch its rejection cause.

So if you had some logic implemented with promises:

function handler (req, res) {   
return request('https://user-handler-service')…

Hello guys, we all know that React is a library that intentionally doesn’t provide guidance about how to structure your project, there isn’t a particular pattern to organize the folder structure. But, it’s always better to organize your directory structure. So in this article, I’m going to present the best way to do that, here are 10 React best practices you need to know.

1. Organize directory structure

  • First, you can keep all of your components and related code in a src folder the other folder at the top level should be public with static assets. …

First, let’s take a moment to talk about Moment because it’s a really great library.

So what is Moment.js

Moment.js is a JavaScript library that allows you to parse, validate, anipulate, and display dates and times using a clean and concise API. It’s very clear and easy to use you can check out the documentation from the link below


Now if moment.js is that great, why should we change to date-fns?

  • First, let’s talk about JavaScript date and why we need to use libraries like moment and date-fns to deal with dates while we have Date function in JavaScript

What is Date in javascript?

JavaScript Date objects represent a single moment in time in a platform-independent format. …

Greetings, sometimes we need to get image dimensions, so we can control it in our components, so I developed a function that can get image width and height from the image source given as a parameter

First, we are going to create a helper and name it dimensions.js

AlaEddin TABAI

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store