This doc is usefull to test how to use a stencil web component inside react.
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.
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