Test Using the LWC Playground
Before describing the content, let’s see how the app will look in a web browser.
Since our two files are ‘client-side’ documents, we can display them in a web browser. Salesforce has provided an environment to rapidly test our LWCs called the LWC Playground: https://developer.salesforce.com/docs/component-library/tools/playground.
All we have to do is replace the content of app.html with the content from helloWorld.html, and replace the content of app.js with helloWorld.js. Once we successfully copied these files to the Playground and saved them, you will see the HelloWorld app under the Preview section in the right pane.
Test it out by entering, removing, and entering something else in the Name text box.
That’s It! We’ve created our very first (albeit very small) Lightning Web Component.
As we have shown, an LWC needs a minimum of an HTML file and a JavaScript file to run on a browser. But most of the LWCs we will create will also have a .js-meta.xml file and an optional CSS file, and these files will sit inside of a folder which will have the same name as your main class. We’ll talk about those later.