Hey there,

I’ve been playing around with web components lately, and It's evident that Shadow DOM is an important aspect of web components, and this article aims to explain all there is to the Shadow DOM, so let’s get to it.👇🏻

First, before we jump into the details let’s understand the fundamentals:

First What is the Document Object Model (DOM) ⌛️:

According to MDN:

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects.

The DOM is the object-oriented representation of…

Lately, there has been a lot of buzzes and hype on web components, but not everyone knows exactly what it is, how it works or why it’s even needed, that’s going to change soon because we are going to be taking a peek 🤓.

🤔 What are Web Components?

Well according to MDN Web Docs.

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

But I would like to simplify that:

Web Components allows you to create components or…

Docker React

We will be setting up a dockerized react app that will provide us with a consistent environment from development (with hot reloading enabled) to production.

System Requirements (I assume you are fairly familiar with these technologies):

  1. Node V8+
  2. Docker

First we are going to create our react app, using this command:

npx create-react-app dockerized-react-app

Note: if you are using docker-machine on windows your project need to be under C:/Users/user/…

Let’s Setup the Dev Environment:

Now Let’s setup the development docker container for our react-app. Create the following files at the root of your project.

create DockerFile

create docker-compose.yml

create dev.yml

create .dockerignore

Marvin Tunji-ola

Frontend Developer, Lover of all things JS, ML Novice.

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