Exercise No. 2 - Lit Web Component
Exercise notes:
- Around 24 hrs spent
- Used Chart.js to display the graph layout
- The component is isolated generating its own data, but that can easily change later on if wanted, we can pass in props as the entry point
- Some time was spent looking at the litElement documentation and seeing how it works
- Deploying the component and making it actually work w/ next.js there were some dif there
How to Install
From inside your project run
npm i score-tracker-demo
Usage
<script type="module">
import 'score-tracker-demo';
</script>
<score-tracker-demo><score-tracker-demo/>
React Integration: there is several ways but by far the easiest is to install reactify-wc
import reactifyWc from 'reactify-wc';
import 'score-tracker-demo';
const ScoreTracker = reactifyWc('score-tracker-demo');
Dev
To run the project for development run: npm run serve
Go to: localhost:8000/dev/index.html