# Salesforce Study Group #session 2 --- # LWC in VisualForce Reference: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_visualforce ---- ### Step 1 Create Aura dependency app in `src/main/default/aura/lwc/lwc.app`. ```xml <aura:application extends="ltng:outApp" access="GLOBAL"> <aura:dependency resource="c:exampleComponent" /> </aura:application> ``` ---- ### Step 2 Create new VisualForce page in `src/main/default/pages/exampleComponentVF`. ```xml <apex:page standardController="Case"> <apex:includeLightning /> <div id="exampleContainer"></div> <script> $Lightning.use("c:lwc", () => { $Lightning.createComponent( "c:exampleComponent", {}, "exampleContainer", (cmp) => { console.log('exampleComponent created'); console.log(cmp); }); }); </script> </apex:page> ``` ---- ### Step 3 Now you can import the component in VisualForce page :) --- # Decorators in LWC LWC has three decorators that add functionality to a property or function. - @track - @api - @wire ---- # @track Fields are reactive. If a field’s value changes, the component rerenders and displays the new value. ---- # @api Public properties or methods are reactive. If the value of a public property changes, the component rerenders. To expose a public property, decorate a field with @api. Public properties define the API for a component. ---- # @wire To read Salesforce data, Lightning web components use a reactive wire service. When the wire service provisions data, the component rerenders. Components use @wire in their JavaScript class to specify a wire adapter or an Apex method. --- # Thanks ❤️