How to use Lightning Component in Visualforce Page in Salesforce?

Use Lightning Components in Visualforce Pages
Add Aura components to your Visualforce pages to combine features you’ve built using both solutions. Implement new functionality using Aura components and then use it with existing Visualforce pages.
There are three steps to add Aura components to a Visualforce page.

1. Add the Lightning Components for Visualforce JavaScript library to your Visualforce page using the <apex:includeLightning/> component.
2. Create and reference a Lightning app that declares your component dependencies.
3. Write a JavaScript function that creates the component on the page using $Lightning.createComponent().

Add the Lightning Components for Visualforce JavaScript Library
Add <apex:includeLightning/> at the beginning of your page. This component loads the JavaScript file used by Lightning Components for Visualforce.
Create and Reference a Lightning Dependency App
To use Lightning Components for Visualforce, define component dependencies by referencing a Lightning dependency app. This app is globally accessible and extends ltng:outApp. The app declares dependencies on any Lightning definitions (like components) that it uses.
Creating a Component on a Page
Finally, add your top-level component to a page using $Lightning.createComponent(String type, Object attributes, String domLocator, function callback). This function is similar to $A.createComponent(), but includes an additional parameter, domLocator, which specifies the DOM element where you want the component inserted.