Category Archive

• blog 13
• react 6
• javascript 4
• jQuery 3

blog

State Management

What is state management

From the previous post we know what is state, now let’s try to understand what is state management.

What is state

As frontend developers we keep hearing about state, and it can be confusing to begin with. When I started out I had no clue that such a thing existed. It took me sometime to figure out this state thing. In this post, let’s try and understand what is state.

A foodies guide to JavaScript array methods

JavaScript has a lot of built in array methods. Let’s have a look at some that will help us in our journey with React. We will be looking at :

• .map()
• .filter()
• .reduce()
• .includes()
• .find()
• .findIndex()
• .some()
• .every()

React - Styling

In the last two posts we covered JSX and Props, now it’s time to move forward in our journey in React and the next stop is styling the components. There are various ways to style a component in React :

• Inline styles
• CSS file
• SASS file
• CSS modules
• CSS-in-JS libraries

React - Props

What are props?

Props or properties are data passed to a component. A parent component will pass data to a child component as a prop. There are a couple of things to note about Props:

• props is a keyword in React and cannot be used as a variable name.
• props are immutable i.e. they are read-only

JSX - What is that?

In the last post I briefly mentioned JSX. In this post we will have a detailed view of JSX. So what is JXS? JXS is like a template language or a form of markup like HTML that gets complied to JavaScript code by react. React components are all JavaScript, hence we need something that will help us with the markup for our UI that is where JSX comes in. JSX looks like HTML but is incredibly powerful since it is complied down to JavaScript.

Getting started with React

What is react?

React or ReactJS is a component-based JavaScript library for building user interfaces. It is one of the most popular JavaScript UI libraries. Component-based means a complex UI is broken down into small pieces called components. These small components can manage their own state and encapsulate their own logic.

JavaScript Event Delegation

In our previous post we saw event delegation using jQuery, in this post we will see JavaScript event delegation.

jQuery Event Delegation

jQuery Event Delegation allows us to attach an event listener to a parent element, and this event will fire for all descendants matching the selector we pass.

Dynamically remove content from DOM using JavaScript

We have seen how jQuery can be used to remove elements from DOM. Now let us see how we can Dynamically remove content from DOM using JavaScript.

Dynamically remove content from DOM using jQuery

Another magic trick that I love most is when objects disappear. Specially pretty ladies, I wonder what magicians do with them.

Dynamically Add content to DOM using JavaScript

We have seen how our wand (jQuery) can be used to Dynamically Add content to DOM. But then there are powerful wizards who do not like to use wands for such small tricks. Here is how you perform the same trick with pure magic (JavaScript).

Dynamically Add content to DOM using jQuery

I love it when magicians conjure things out of thin air. A dove, a rabbit you name it and it’s there. Sure they have their tricks but what’s amazing is how it’s presented.

Back to Top ↑

react

State Management

What is state management

From the previous post we know what is state, now let’s try to understand what is state management.

What is state

As frontend developers we keep hearing about state, and it can be confusing to begin with. When I started out I had no clue that such a thing existed. It took me sometime to figure out this state thing. In this post, let’s try and understand what is state.

React - Styling

In the last two posts we covered JSX and Props, now it’s time to move forward in our journey in React and the next stop is styling the components. There are various ways to style a component in React :

• Inline styles
• CSS file
• SASS file
• CSS modules
• CSS-in-JS libraries

React - Props

What are props?

Props or properties are data passed to a component. A parent component will pass data to a child component as a prop. There are a couple of things to note about Props:

• props is a keyword in React and cannot be used as a variable name.
• props are immutable i.e. they are read-only

JSX - What is that?

In the last post I briefly mentioned JSX. In this post we will have a detailed view of JSX. So what is JXS? JXS is like a template language or a form of markup like HTML that gets complied to JavaScript code by react. React components are all JavaScript, hence we need something that will help us with the markup for our UI that is where JSX comes in. JSX looks like HTML but is incredibly powerful since it is complied down to JavaScript.

Getting started with React

What is react?

React or ReactJS is a component-based JavaScript library for building user interfaces. It is one of the most popular JavaScript UI libraries. Component-based means a complex UI is broken down into small pieces called components. These small components can manage their own state and encapsulate their own logic.

Back to Top ↑

javascript

A foodies guide to JavaScript array methods

JavaScript has a lot of built in array methods. Let’s have a look at some that will help us in our journey with React. We will be looking at :

• .map()
• .filter()
• .reduce()
• .includes()
• .find()
• .findIndex()
• .some()
• .every()

JavaScript Event Delegation

In our previous post we saw event delegation using jQuery, in this post we will see JavaScript event delegation.

Dynamically remove content from DOM using JavaScript

We have seen how jQuery can be used to remove elements from DOM. Now let us see how we can Dynamically remove content from DOM using JavaScript.

Dynamically Add content to DOM using JavaScript

We have seen how our wand (jQuery) can be used to Dynamically Add content to DOM. But then there are powerful wizards who do not like to use wands for such small tricks. Here is how you perform the same trick with pure magic (JavaScript).

Back to Top ↑

jQuery

jQuery Event Delegation

jQuery Event Delegation allows us to attach an event listener to a parent element, and this event will fire for all descendants matching the selector we pass.

Dynamically remove content from DOM using jQuery

Another magic trick that I love most is when objects disappear. Specially pretty ladies, I wonder what magicians do with them.

Dynamically Add content to DOM using jQuery

I love it when magicians conjure things out of thin air. A dove, a rabbit you name it and it’s there. Sure they have their tricks but what’s amazing is how it’s presented.

Back to Top ↑