The post Getting Started with Lightning Web Component appeared first on Salesforce Next Gen.
]]>Lightning Web Components is a new programming model for building Lightning components. It uses web standards breakthroughs, can coexist and interoperate with the Aura programming model, and delivers unparalleled performance. To create and develop Lightning Web Components and use their powerful features and performance benefits, you need to set up Salesforce DX. For this Quick Start, you also use Visual Studio Code, which is the recommended code editor for developing on the Salesforce platform. Once your developer environment is ready, you learn how to write a simple Lightning web component and add it to a page in Lightning Experience.
The Salesforce Developer Experience (DX) is a set of tools that streamlines the entire development life cycle. It improves team development and collaboration, facilitates automated testing and continuous integration, and makes the release cycle more efficient and agile.
Use the Salesforce CLI to control the full application life cycle of your Salesforce apps. With it you can easily create environments for development and testing, synchronize source code between your orgs and VCS, and execute tests.
Operating System | Link to Installer |
macOS | https://sfdc.co/sfdx_cli_osxRight-click the application you just downloaded and click Open. If you see a warning, click Open. |
Windows 32-bit | https://sfdc.co/sfdx_cli_winIt may be necessary to update your Class Path with the bin directory if you are not the only account on your machine. |
Windows 64-bit | https://sfdc.co/sfdx_cli_win64It may be necessary to update your Class Path with the bin directory if you are not the only account on your machine. |
Debian/Ubuntu 64 | https://sfdc.co/sfdx_cli_linuxDownload the archive from one of the URLs in the manifest, extract the archive, then run the ./install script. |
Debian/Ubuntu x86 | https://sfdc.co/sfdx_cli_linux_x86Download the archive from one of the URLs in the manifest, extract the archive, then run the ./install script. |
2. Let’s make sure the CLI is properly installed and you know how to access online help for the commands. In a command window, enter sfdx.
You see something like this:
Salesforce CLI
VERSION
sfdx-cli/7.36.0-sfdx-cli/7.36.0-b1c4e9c7c8 darwin-x64 node-v10.15.3
USAGE
$ sfdx [COMMAND]
COMMANDS
commands list all the commands
force tools for the Salesforce developer
In our next step, we set up our local development environment with Visual Studio Code.
Visual Studio Code is the go-to code editor for Salesforce developers. It’s free, open-source, and available for Windows, Linux, and macOS. This editor has easy-to-install extensions for syntax highlighting, code completion, and more.
In this project, we install Visual Studio Code and the recommended Salesforce Extension Pack.
Now that you’ve installed Visual Studio Code and enabled the necessary extensions, you need to test them out.
As you use more SFDX commands, those commands will show up in the recently used panel.
In the final step, you create your first Lightning web component and add it to your org’s home page.
Now that you’ve set up your development environment, you can create a simple Lightning web component.
This opens the Salesforce login in a separate browser window.
<template>
<lightning-card title=”HelloWorld” icon-name=”custom:custom14″>
<div class=”slds-m-around_medium”>
<p>Hello, {greeting}!</p>
<lightning-input label=”Name” value={greeting} onchange={changeHandler}></lightning-input>
</div>
</lightning-card>
</template>
import { LightningElement } from ‘lwc’;
export default class HelloWorld extends LightningElement {
greeting = ‘World’;
changeHandler(event) {
this.greeting = event.target.value;
}
}
<?xml version=”1.0″ encoding=”UTF-8″?>
<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata” fqn=”helloWorld”>
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
This opens your Trailhead Playground in a separate browser.
That’s your first Lightning Web Component. Hooray!!.
Suggested Articles.
For More Examples refer : Automate you Business Process
The post Getting Started with Lightning Web Component appeared first on Salesforce Next Gen.
]]>