Nautil is a js framework written by me, it is built on react, so is completely compatible with react components. We will use nautil-cli which is the CLI tool of nautil to create a react web component.
Now, let's do it!
It is very easy to generate an empty project, by using:
mkdir nautil-app && cd nautil-app npx nautil-cli init
After a while, the project files are generated by nautil-cli. The directory structure is easy to understand.
Because we are going to write a web component only, so let us delete the no use files and modify
package.json to keep web component scripts only.
All are ready! Now let's coding.
src/app/app.jsx and copy your original react component's code here. Because nautil is compatible with react, so you do not need to worry.
src/web-component/index.js to change the name of your web component. And change the invoking in
To preview the effect, run the following CLI command:
npm run dev:webc
And open your browser to view.
To bundle, run:
npm run build:webc
And your will get the bundle files in
This is how to create a web component with react by using Nautil-CLI tool. Isn't it easy?
Maybe you want to know why, or be interested in the implement of nautil. Then you can look into the source code on github with the preious given link. If you want to know more, join me on github.