Create a Hello World Lightning Web Component
Now that you’ve set up your development environment, you can create a simple Lightning web component.
- In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
- Type
SFDX
. - Select SFDX: Create Project.
- Enter
HelloWorldLightningWebComponent
as the project name. - Press Enter.
- Select a folder to store the project.
- Click Create Project. You should see something like this as your base setup.
- In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
- Type
SFDX
. - Select SFDX: Authorize an Org.
- Press Enter to accept the Project Default login URL option.
- Press Enter to accept the default alias.
- Log in using your Trailhead Playground credentials.
- If prompted to allow access, click Allow.
- After you authenticate in the browser, the CLI remembers your credentials. The success message should look like this:
- In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
- Type
SFDX
. - Select SFDX: Create Lightning Web Component.
- Press Enter to accept the default
force-app/main/default/lwc
. - Enter
helloWorld
for the name of the new component. - Press Enter.
- View the newly created files in Visual Studio Code.
- In the HTML file,
helloWorld.html
, copy and paste the following code.<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>
- Save the file.
- In the JavaScript file,
helloWorld.js
, copy and paste the following code.import { LightningElement, track } from 'lwc'; export default class HelloWorld extends LightningElement { @track greeting = 'World'; changeHandler(event) { this.greeting = event.target.value; } }
- Save the file.
- In the XML file
helloWorld.js-meta.xml
, copy and paste the following code.<?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>
- Save the file.
- Right-click the default folder.
- Click SFDX: Deploy Source to Org.
- In the Output tab of the integrated terminal, view the results of your deployment. You should have also received a notice that states:
SFDX: Deploy Source to Org ... ended with exit code 0
. This means that the command ran successfully.
- In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
- Type
SFDX
. - Select SFDX: Open Default Org.
- Click the app launcher icon
to open the App Launcher, then click Sales.
- Click the gear icon
to reveal the Setup menu, then click Edit Page.
- Drag the
helloWorld
Lightning web component from the list of custom components to the top of the Page Canvas. - Click Save.
- Click Activate.
- Click Assign as Org Default.
- Click Save.
- Click Save again, then click Back to return to the Home page.
- Refresh the page to view your new component.
You’ve officially made your first Lightning web component!
Check out the sample apps on
https://trailhead.salesforce.com/sample-gallery. Add more to your helloWorld
component, check out the other sample components, and build your own components! As you experiment, use the
Component Reference to learn more about how to code Lightning web components.