Utilize Web Components

Web Components are a great tool to develop a website. You can use other peoples already coded components and input them into yours, with a few easy steps. Find more compontents to use at https://www.webcomponents.org/ or play around on your own to find and make more.

Today I'm going to walk you through how to install, import, and utilize a web component with these six steps. If you are a visual learner you can watch the video down below, while using this code to help you.

1. Install node.js
The very first thing you need to do is install node.js at https://nodejs.org/en/. This will help your terminal to understand the prompts we give it.

2. Initialize the repository
Now that we have all the correct installations we can start our project. Open your terminal and run npm init @open-wc. This will ask for your preferences and the project name. I chose all of the suggested choices for the repository but feel free to play around with different options. From there we should change our directory to the actual project with cd <project-name>.

3. Open VS code
We are now ready to open the repository to make sure it worked correctly. You can do this using the command code ..

4. Install components
Heading back to our terminal, we are now ready to install our components. Today we used meme-maker and moar-sarcasm but dont be afraid to try new ones. You can install the components by running npm install @lrnwebcomponents/meme-maker and npm install @lrnwebcomponents/moar-sarcasm. Now we will go back into our js file to import them at the top using

import '@lrnwebcomponents/meme-maker';
import '@lrnwebcomponents/mpoar-sarcasm';

5. Start the project
To open the website in your browser run npm start in the terminal. Here you can make sure everything is working well before you try to use the components.

6. Use components
Now that we know the project is good we can go into our javascript again and in the render function actually use the component tags.

<meme-maker
  image-url="https://images.immediate.co.uk/production/volatile/sites/3/2021/02/Super-Bowl-meme-d53799a.jpg?quality=90&resize=620,413"
  top-text="trying to figure out"
  bottom-text="web components">
</meme-maker>
<moar-sarcasm>
  "trying to figure out web components"
</moar-sarcasm>

That looks great! Good luck with your exploration and keep coding!