Use Lightning Components in Visualforce Pages in salesforce.

There are three steps to add Lightning 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().

Thanks.

Hi,

Lightning app - 

<aura:application access="GLOBAL" extends="ltng:outApp">
<aura:dependency resource="c:FlipCard"/>
</aura:application>

In above Lightning Application, we have used access as global so that it can be used anywhere in Salesforce organization like Visualforce. extending ltng:outApp indicates that any component defined in this application can be used on Visualforce page.

Visualforce page - 

<apex:page >
<apex:includeLightning />

<div style="width:30%;height:100px;" id="FlipcardContainer" />

<script>
$Lightning.use("c:LightningOutContainerApp", function() {
$Lightning.createComponent("c:FlipCard",
{
borderColor : "#16325c",
bgColor : "#16325c" ,
fontColor : "#FFF",
frontText : "What's cool about Lightning Component Development",
backText : "You dont need to enable Lightning experience, It will work on Classic Instance as well"
},
"FlipcardContainer",
function(cmp) {
console.log('Component created, do something cool here');
});
});
</script>
</apex:page>

In above Visualforce page, apex:includeLightning tag imports necessary dependencies and scripts to enable Visualforce to act as Lightning component container.

Hope this helps.