(Quick tip) Easy debugging styled-component with CRA

maxime.io — Thu, 30 Jul 2020 13:35:04 +0000

(This is a just quick tip not an elaborated post sorry)

Thanks to Babel Macro, we don't need to eject our CRA project.

Use import styled from 'styled-components/macro'
Install npm install babel-plugin-macros
Create .babelrc in your project root
Then add this to your .babelrc

{ 
   "plugins": ["babel-plugin-styled-components"]
}

This option enhances the attached CSS class name on each component with richer output to help identify your components in the DOM without React DevTools.

It also allows you to see the component's displayName in React DevTools.

Voilà, enjoy!

More info: https://styled-components.com/docs/tooling#babel-macro

Running JSX in your browser without Babel

maxime.io — Tue, 03 Sep 2019 09:03:58 +0000

Just for fun, I wondering if I could run React + JSX code directly in a modern browser without transpilation and packaging.

The answer is not rocket science and explained on reactjs.org

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

And for JSX, we just have to add babel too

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Voilà! 🤗

But!

This approach is fine for learning and creating simple demos. However, it makes your website slow and isn’t suitable for production.

That's right, your code is not optimized and loading Babel can be too heavy.

Remember, it's for just for fun. There is another (and probably better) way with HTM (Hyperscript Tagged Markup) a JSX alternative using standard tagged templates made by @_developit , creator of Preact.

The download weight difference is huge if we don't really need Babel.

Lib	Version	Loading Size
Babel	6.26	<195KB
HTM	2.2.1	>1KB

<script src="https://unpkg.com/htm@2.2.1" crossorigin></script>
<script type="module">
// Bind htm with createElement
const html = htm.bind(createElement);
</script>

It's like JSX but also lit

The syntax you write when using HTM is as close as possible to JSX:

Spread props: <div ...${props}>
Self-closing tags: <div />
Components: <${Foo}> (where Foo is a component reference)
Boolean attributes: <div draggable />

Improvements over JSX

htm actually takes the JSX-style syntax a couple steps further!

Here's some ergonomic features you get for free that aren't present in JSX:

No transpiler necessary
HTML's optional quotes: <div class=foo>
Component end-tags: <${Footer}>footer content<//>
Syntax highlighting and language support via the [lit-html VSCode extension] and [vim-jsx-pretty plugin].
Multiple root element (fragments): <div /><div />
Support for HTML-style comments: <div></div>

Syntax differences

There is few syntax differences by using tag function html

// JSX syntax
function Header({title}) { return <h1>${title}</h1>} 

function App() {    
  const name="World"
  return (
    <div>
      <Header title="Hello, ${name}!"/>
    </div> 
  );
}

// HTM syntax
function Header({title}) { return html`<h1>${title}</h1>`} 

function App() { 
  const name="World"
  return html`
    <div>
      <${Header} title="Hello, ${name}!"/>
    </div>
  `;
}

Demo

Knowing these differences, you are ready to have fun with React (or Preact of course) in your browser without any transpiler.

Bonus (Preact with Hooks)

If you want to use Hooks with Preact 10 (Currently in Release Candidate).

<script src="https://unpkg.com/preact@10.0.0-rc.1/dist/preact.umd.js" crossorigin></script>
<script src="https://unpkg.com/preact@10.0.0-rc.1/hooks/dist/hooks.umd.js" crossorigin></script>

<script type="module">
const { useState } = preactHooks;
// ...
</script>

First post on dev.to, if you enjoy it and want more don't forget to like ❤️

Forem: maxime.io