designsystemdiego v1.0.1

Test component

This doc is usefull to test how to use a stencil web component inside react.

Stencil

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.

Getting Started

Create a new react proyect.

npx react-create-app mynewapp

and start it:

npm start

Download the component library

npm install designsystemdiego

Load the component

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

import { applyPolyfills, defineCustomElements } from "designsystemdiego/loader";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

applyPolyfills().then(() => {
  defineCustomElements(window);
});

Import the component into your App.js file

import logo from "./logo.svg";
import "./App.css";
import "designsystemdiego";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <my-component
          first="Stencil"
          last="'Don't call me a framework' JS"
        ></my-component>
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Need help? Call Diego