Beginners’ Guide to React JS

A person working on a laptop with a neutron ring floating ahead of him with the words react beginner

React is a JavaScript library for creating user interfaces. Its core principles are declarative code, efficiency, and flexibility. Simply specify what your component looks like and React will keep it up-to-date when the underlying data changes.

– Official React Documentation


React JS and React have been used interchangeably throughout the blog and mean the same thing.

React Native: React code that is usable across the web and  mobile.

Angular: MVC framework for UI.

Transpiler: A type of compiler that takes the source code of a program written in one programming language as its input and produces the equivalent source code in another programming language. Transpiler and compiler can be used interchangeably.

DOM: Document Object Model is a tree of HTML objects.

Note: This blog has been written entirely from my perspective and is what I feel as a newbie to the world of React.

Let’s get started.

There’s a lot of good buzz about React out there.

It seems like React JS has become a library many want to try out but somehow, it’s always out of reach. This blog is aimed towards the audience who is looking for a perfect mix of theory and hands-on.

What is React?

React provides you a templating language and some function holders to primarily render HTML. That’s all React yields, HTML. React is mainly the view layer. React is listed in the same verticals as other JavaScript frameworks but ‘React vs Angular’ doesn’t make sense at all because they aren’t directly comparable. Angular is a complete framework (including the view layer).

Is it worth the hype? Why is it getting so popular?

These are some of the benefits which make React JS standout among its contemporaries:

  • Easy to learn and easy to use:  Being able to do awesome things is great, but only if you don’t have to spend the rest of your life becoming perfect in a new technology. React is easy to learn and easy to use and comes with a good supply of documentation and an exponentially growing community.

    Github Stars History for Angular, React & Vue (Source)

  • Components: Everything in React is a component (will be explained later on). They are like the basic building blocks for your application . Components help you break your design into smaller parts that can be worked upon.
  • The Virtual DOM: One of the really cool parts of React is the virtual DOM. Usually, when you develop an app that has a lot of user interaction and data changes, you have to carefully notice how your app’ design is going to influence performance. Even with quick client side browsers, extensive DOM manipulation can be a performance deteriorator and result in an annoying user experience. Worse, because the DOM is tree-structured, simple changes at the top level can cause huge problems. React caters this by using a virtual DOM. This is, as the name implies, a virtual representation of the DOM. Any new view changes are first performed on the virtual DOM, which lives in memory and not on your screen.

An efficient algorithm then determines the changes made to the virtual DOM to identify the changes that need to be made to the real DOM. It then determines the most suitable way to make these changes and then applies only those changes to the real DOM. This ensures a minimum update time to the real DOM, providing higher performance and a cleaner user experience all around.

All that is fine but what’s up with all that jargon ?
  • Component: A React app comprises of components. A component is a reusable piece of code which defines how some features should look. All the parts you see in the below picture can be broken down into different components like the button, the display panel, all clubbed as a single component.
  • Properties (props): We can pass data to our components that remain unchanged throughout the lifecycle of that component. We can even pass methods as data in our props.
  • State: state, as the name suggests, defines the state of a component. Unlike props, they can change on user-based interactions and internal calculations. Think of them as observable data that control the behaviour of the component. 
  • JSX: It is basically a flavour of JS that can constitute HTML as well. It is highly intelligible. JSX (JavaScript Extended) is not understood by the browser. So, the browser doesn’t freak out, we use a transpiler like Babel which converts JSX into regular JS and renders HTML out of it.

We will take up something to code on React in the next part of this blog…

My view about React Js 

Coming from JAVA background and having noob level knowledge about fronted (JS, CSS, HTML) lingo, React JS didn’t feel like something that couldn’t be done. A basic syntax of JS (maybe ECMA 6) is what you need to know to get started.

Effort required is a lot less as compared to other JS libraries and frameworks ( Angular for example).
Also when you know that you are getting into something that is largely industry friendly and has a great developer community, it just feels the right thing to do.
React JS when combined with react-router and react-bootstrap, serves as a complete package.

When I first encountered JSX as HTML being written inside JS, the idea itself sounded crazy. I thought why would anybody want that. But
after spending some time with it, everything made a lot of sense. The ability to re-render components based on state changes in the most efficient way is what makes React stand apart.

AEM-DTM-Target Integration. Simplified! – Part1

AEM-DTM Target Integration
Let’s start with the introduction of three gems of Adobe Experience Cloud crown:
  1. AEM – Adobe Experience Manager (AEM) is a web content management system with a lot of powerful features to manage, organise and deliver the content with best in class experience. AEM came to Adobe with the acquisition of Day Software in 2010, earlier it was known as Day CQ (Communique). For this article, we are using AEM 6.3 version.
  2. DTM – Dynamic Tag Management(DTM) is a tag management tool which offers tools to integrate Adobe Experience Cloud Solutions as well as solutions like Google Analytics etc. DTM used to be known as ‘Satellite’ before Adobe had acquired it in 2013.
  3. Target – Adobe Target is a personalization solution of Adobe Experience Cloud Suite, which delivers the personalisation of content based on different type rules. Target came to Adobe with the acquisition of Omniture in 2009. In this article, we are going to demonstrate the Target VEC capabilities.
AEM can be integrated with Target directly without using DTM. However, it’s recommended to use DTM in between due to listed benefits:
  1. Efficiency –DTM allows you to optimise the loading time of multiple tools and marketing tags.
  2. Reduce Cost – Minimise the development cost as once Data Layer is in place multiple solution can leverage the same.
  3. Flexibility – DTM allows you to quickly test and optimise tags without being bound by release cycles.
  4. Multiple Sites – Using DTM you can manage multiple sites from the single console.

AEM is usually connected with DTM using AEM Cloud Services and Target is connected to DTM using Experience Cloud configuration. Here is the relevant diagram:


Request Flow:

How a request flows from AEM to Target via DTM:

  1. AEM starts rendering a site page.
  2. Site has a DTM script attached along with Data Layer. DTM script is associated with a relevant property. Data Layer discussed below.
  3. DTM Property has Target added to it, which raises a request to Target and share required data.
  4. Target pushes its response back to AEM instance using mbox js. Note: Now mbox.js has a newer and updated alternative which is known as at.js
  5. AEM page got Target response which gets rendered on the page.     

Data Layer:

As you might have noticed in request flow that AEM site has got the DTM Script and Data Layer associated. Data layer is a W3C standard to store values in javascript object. Data layer is created at AEM and consumed by DTM to get the required data from AEM instance and push to any solution like Analytics, Target etc. We are going to create a sample data layer below in DTM Rules section.

DTM Setup:

To get the access of DTM, one has to raise the request with Adobe Client Care with proper information. Once the access is granted, go to and login with the credentials provisioned by Client Care.

To start with DTM, create a new property with the URL of the website. Thereafter add the required tools in the property like Adobe Analytics or Adobe Target. In AEM configuration, we are going to use same DTM Property in order to integrate the AEM with Analytics, Target, etc.

For this article we are going to add Adobe Target, for this we need Client Code which will be provided by the Client Care or alternatively you can try adding using Experience Cloud membership.


DTM Property

Adding Tool in DTM Property

Adding Target as a Tool in DTM Property

DTM Rules:

In above steps you have created a new DTM property, added Target as a tool in the same property. Now you need to know how to play with data, DTM uses data layer to get the data from AEM instance. For example, using Target you need to render homepage of website based on browser, location, devices etc or you can also get the user specific details like age, gender, interests etc. Hence you need to get all such information from AEM in data layer. For example, here the data layer:

   var dataLayer = {} = {
        pageInfo: {
            pageName: document.title,
            url: document.location

Once the data-layer is all set, fetch the values from data layer and set it in DTM data elements. We use these data elements in different types of rules. DTM has got three type of rules:
1. Event Based Rule – Rules executed when visitor interacts with on-page elements.
2. Page Load Rule – Rules executed when visitor loads the page.
3. Direct Call Rule – Rules executed when you want to tell DTM to do something specifically.



DTM Rules

Creating a data element using data layer is quite straight forward. You can see the below screenshot, here we have created a new data element Page Title which is mapped with pageName field of data layer created above 

Data Elements

DTM Workflow:

Every property in DTM follows a standard workflow. Workflow has got three steps:

  1. Creation of property and rules.
  2. Approve the newly added and modified rules.
  3. Publish the property to make the changes live.
AEM-DTM Integration:
There are two ways to integrate DTM with AEM:
  1. Using Cloud Services
  2. Embed JS
  1. Using Cloud Services:

Using AEM admin console, go to Tools > Deployment > Cloud Services. Find ‘Dynamic Tag Management’ and click on ‘Configure now’. Provide a Title and Name of the configuration keeping Parent Configuration field intact. Enter the details as below:

API TokenThe value of the API Token property of your Dynamic Tag Management user account. AEM uses this property to authenticate with Dynamic Tag Management.
CompanyThe company with which your login ID is associated.
PropertyThe name of the Web Property that you created for managing the tags for your AEM site.
Include Production Code on AuthorSelect this option to cause the AEM author and publish instances to use the production version of the Dynamic Tag Management libraries.

When this option is not selected, the Staging Settings apply to the author instance, and the Production Settings apply to the publish instance.

There is an option to self-host the DTM libraries which means AEM will host the DTM libraries if this option is checked, if we want to use the libraries from the cloud then we should uncheck this option. Here we are using later one.

  1. Embed JS:

Go to the DTM Console using and click on the relevant property.
Go to Embed tab, copy the Header and Footer staging script, go to the AEM author instance and copy the script in header and footer of the website respectively. Similarly, copy the header and footer production script and put in the AEM publish instance.

Let’s say you have integrated DTM with AEM using one of the above-mentioned method, assign the DTM config to the root of your site using AEM Sites console.

DTM-AEM Connection Test:

Now you need to test whether DTM script is getting loaded with your website. In browser, try to open any page of your website where you have assigned the DTM config and open browser console. If “_satellite” object exists then it means DTM script is getting loaded. You can also try retrieving the data elements that you have created in DTM using “_satellite.dataElements”. If you are able to find all the details, you are good to go.

If _satellite object doesn’t exist, it means page doesn’t have the DTM header/footer script. You can view the source of the page to confirm the same.


Satellite Object


Satellite Data Elements



DTM Debugging Tools:

In DTM we play with different types of scenarios and scripts, hence we might need to check if the scripts are working fine and order they are getting executed.
There are couple browser plugins are available which proved to be quite for debugging.

Launch Switch:

It enables the logging in console and as well as we can test the changes using staging script, before making the changes live.

There are two button available on the plugin console. Tweaking them will do the following:
Debug: It enables the logging of the rules, you can also add the logs using _satellite.notify(“info”).
Staging: It will enable the changes you have made in property which you have not published. This is used for testing the changes  before making them live.

Download URL for Chrome:



It shows the detailed information about all the DTM Rules. 
Download URL Chrome  


Adobe DTM Documentation:

This is the first part 1 of “AEM-DTM-Target Integration. Simplified!” where you have learned how to setup DTM, create DTM property and data elements, integrate DTM with AEM and debug DTM. In Part 2, you will learn how to create different types of rules in DTM, use these rules to share the information to Target, Target activities, Target audience and how to use Target VEC (Visual Enhanced Composer) along with the Target debugging tweaks.