So, it's been a while since I wrote post. I spent my time with work and collect experience with new things, like native Web Components. I created an experimental project with them, that I would like to show you now.
You can find the project's source code on my GitHub profile.
🔎 Short description
My destination was clear:
- Create a native web component
- Use it multiple times in an HTML file
- I wanted to use same component, but different values to show inside them
- Connect them to a common store with the help of Redux
I wanted to use ES6 features, so I decided to use Webpack and Babel. Webpack took care about bundling process and development server function with webpack-dev-server.
The rest is very light. I created a counter component, that has a display to show a number, and under that there is a button that can help you to increase the number. I inserted three times counter component to the HTML DOM and connected them to a common store.
The Redux store is prepared to get three counter value with ID-s, so I can handle every counter component's value individually.
The main App module gets every counter value on the page and make a cumulate value with them and show it above the counters.
🎉 That's all!
You can give a try the project, feel free to clone it!🙂
Top comments (0)