CODEWITHSUNDEEP
reactjsstencils
Icare
Icare

Reputation: 1371

Convert React component to Stenciljs

For the challenge and to help me to learn Stenciljs, I want to convert some React components that a team did to Stencil ones.

I don't know React and a little bit of Stenciljs, but I know Angular. I know Stenciljs is a mix of good things from different "frameworks", so probably I will be able to understand a bit. :-)

Any advice about the component porting?

Is it feasible?

Anyone already did that kind of thing? If so, any examples or steps that could be useful would be nice.

Thanks

Upvotes: 1

Views: 2353

Answers (1)

Schadenn
Schadenn

Reputation: 934

We're going to do the same in the next weeks and it looks like it's going to be pretty easy.

We've used react together with Typescript so we already have interfaces for props and state which just have to be rewritten using decorators @Prop() and @State(). Because in stencil you also have a render() function, similar to react class components, you can just copy the code of your react render() function (or if you've got a functional react component which basically just consists of a render() function, just copy everything).

One thing to note is that {children} in react is much more powerful than <slot /> in stencil. So if you've got bigger components with a lot of parent/child relations, translating won't be that easy as you can't do stuff like slot.map(item => <SomethingElse prop="stuff" />) as far as I can see.

Upvotes: 1

Related Questions