React.js Basics — Part 4 (for starters and Angular Developers)

Introduction In this post, we will resume our journey of learning React.js with few more examples. In this session, we will cover following topics: Generic Table Component React one-way Data Flow First item is mainly an enhancement on the code, which we wrote in previous session (showing vehicles data in a table). This will result … Read more

React.js Basics – Part 3 (for starters and Angular Developers)

Introduction In previous posts, we learned few react basics and build couple of simple components. we also learned about few resources available online to help speed up react learning. In todays posts, we will take few more steps and cover the followings: Refactoring Overview React Hooks Introduction (useState Hook) React Router Refactoring Overview Lets start … Read more

React.js Basics – Part 2 (for starters and Angular Developers)

Introduction In previous post on this topic, we started with the basics of React.js . We learned that, React is a JavaScript library to create and compose components. Writing a react app is creating components and putting them together. Each component has a name and three distinct characteristics: Props: Component can accept input from other … Read more

React.js Basics (for starters and Angular Developers)

Introduction JavaScript world has seen some great libraries, frameworks and practices throughout its history. Jquery is one of the great library when it comes to JavaScript development. Everyone knows popularity of jQuery and the ease it provides to build rich client-side applications. Later, jQuery UI was developed and jQuery plugins eco-system resulted in great many … Read more

Building UI using JavaScript Classes

Introduction Classes are fundamental to Object Oriented Programming. In our applications, it is very common to use Classes for business objects, data transfer objects etc. and today we will see how we can use classes to build a User Interface for front-end projects. Modern UI frameworks such as Angular, React etc. are already using classes … Read more

Import Bootstrap and Font-Awesome using Parcel JS

Introduction In previous post, I talked about importing jQuery and jQuery UI modules in our JavaScript code using Parcel JS. Today, I want to share that how to include bootstrap and font-awesome packages in our application. We will be continuing with the same code-base from previous post. However, I created a new branch (bootstrapimport), so … Read more

Import jQuery and jQuery-UI using Parcel JS

Introduction In my previous post I talked about Parcel JS and how it is a very easy to use JavaScript Bundler. Today, we will see how to import and use JQuery and JQuery-UI libraries in our application when using Parcel JS. Above mentioned libraries are very common and powerful in most of the applications. So, … Read more

Parcel JS – A Blazing fast, zero configuration web application bundler

Introduction JavaScript world has many great tools to assist us in building our applications with ease. One of the common tool in any JavaScript developer’s toolkit is a bundler. You may be already using one for your existing development activities. In this post, we will learn about Parcel. The official website mention it as a … Read more

Structure JavaScript – Building a Simple Data Service

Introduction Data is the life blood of any application. Most of the times, applications are busy doing data operations. Those can be reading, writing, updating or deleting data along with some other business specific data operations. In a typical client/server applications, data can requested from the backend server and then client application use it for … Read more

Structure JavaScript Code using Classes

Introduction Classes are fundamental to Object Oriented Programming (OOP). You can think of a class as a blueprint to create objects. OOP in JavaScript is different than classical OOP as it uses prototypes rather than classes. ES6 classes are a syntax shortcut for a common JavaScript pattern used to simulate classes. If you have worked … Read more