When we write code inside Hippo-CMS, hippo-site and hippo-essential? And when we use this component?
CMS and site are your tool and your product respectively. So the cms is what you use to edit content. The site is the you are building. Essentials is a tool for development purposes. It offers both standard components as well as some tools for automating some tasks. The cms can be customized to some extent and the site is wholly your responsibility.
Your question is very broad and very basic. I suggest you take a look at the tutorials available on documentation.bloomreach.com.