… and stop worrying about the bomb.

Why does everyone keep talking about contexts … ?

A bit of … well, context 🤭

Note: skip this section if you wanna dive straight away.

is a very cool feature, and extremely practical to use with the hooks API. You’ve surely met some, and probably recognize them right way.

Today I’d like to share what I learned when creating my own React contexts: what I consider to be a good context and how to write one.

There’s another exploration I’d like to share later that won’t be in this post: how and when to split a context in 2 or more.

Let’s dive


Heard about export map ? It’s quite powerful !

TL;DR

The documentation for the exports package.json field is it comes from . I won’t cover everything, so check out the proposal if you need any additional information.
Plus I did not cover the mirror imports field that is very interesting in the ESModule world.

Seriously, how ?!

“Export” what ?

The exports field (or “export map”) provides a way to expose your package modules for different environments and JavaScript flavors WHILE restricting access to its internal parts.

  • Environments like NodeJS, browser, of even node-env-like filters production/development, for instance React could (or does ?) …


🧶

Let’s face it, hooks have been wandering around for a while now. Yet it feels like I discover new stuff every day. Today, I’d like to share a new discovery because it is very far from obvious − to say the least!

So you think you master hooks … ?

Small recap: an async effect

An async effect is an effect calling a promise and setting some state based on that promise.

With an example − Fetching a user

First approach

The problem


Part 3: Events

If you come from the React world, it’s kind of the equivalent of callback props

Write a completely useless − yet experimental − component <events-demo />

The specs:

  • Emit the event 'change' using a button
  • Emit a custom event 'sayhello' using another button
  • Be able to use listeners shorthand .onchange and .onsayhello .
The component we are about to build

The template (HTML)

First, let’s start with our web component template:

<!-- index.html -->
<body>
<template id="events-demo-template">
<div>
<button id="dispatch-change">
Trigger change Event
</button>
</div>
<div>
<button id="dispatch-sayhello">
Trigger custom event "sayhello"
</button>
</div>
<style>…</style>
</template>

</body>

The component constructor

Now let’s see how we can dispatch those events using our buttons:

As always, let’s start with the boilerplate:

// events-demo.js
export…


Part 2: Using slots

If you come from the React world, slots are an approximate equivalent of render props, although they are not functions 😅

Today, we’ll write a <page-layout /> web component

The specs. The <page-layout /> component :

  • can have an aside part, piloted by an attribute
  • must have in its layout: a header, a footer, a main part, and optionally an aside part
Where to start…? Ah yes.

Step 1/4 − The skeleton

// page-layout.jsexport const PAGE_LAYOUT_TAGNAME = 'page-layout';const template = document.createElement('template);
template.innerHTML = `

`
export class HTMLPageLayoutElement extends HTMLElement {
static get observedAttributes () {
return [];
// I don't need to observe the aside attribute since…

Part 1: Using Attributes

First things first, MDN is our friend.

Web Components aims at achieving code re-usability. It consists of three main technologies − I’m completely paraphrasing here −:
- Custom Elements ()
- Shadow DOM ()
- HTML Template and Slot ()

MDN also has a .

Let’s begin.

Today, we will focus on using attributes. If you come from the React world, attributes can be used to pass on primitive type variables (strings, booleans, numbers, …)

Building a badge/chip component

Let’s start small and easy by building a chip component:

Thomas Juster

Front-end Developer; I‘m not sure who I am.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store