Preact: Documentation request for beginners

[amitguptagwl]

No doubt preact and surprisingly small. But I'm not able to follow the documentation much given on main site. It looks like the people who have already worked with reactjs and looking for small library can easily switch to preact. I couldn't even find much tutorials on google.

So what would be right way for the beginner who doesn't have basic knowledge of setting up babel, webpack etc.? Do we have documentation/API library? Do I need to learn reactjs first?

I started with a codepen example. But it looks like that the example given on type of component are also broken. When I click on "Run in REPL", nothing is displayed. I'm checking in chrome browser on Ubuntu machine.

[developit]

Hi there @amitguptagwl! You're right, the documentation for people who haven't worked with Virtual DOM Components previously is a little lacking. We have the Getting Started guide, but it intentionally skips over any sort of Babel/Webpack setup. This is done because Preact doesn't require any of that, rather it's just commonplace these days. However, it'd be nice to have a "zero to sixty" type tutorial, taking you from a <script> tag all the way to a small app.

The codepen examples probably the best place to start right now since that allows you to code productively without getting tangled up in tooling and setup. As for the Run In REPL issue you noted - those examples don't really do much that you could see visually - they render <a></a>, which is invisible and has no attributes 🐙

[amitguptagwl]

Thanks @developit , Let me try that. I'm actually trying to convert a custom element in preact that I initially created in riotjs. But due to some issue of rendering I decided to explore other react frameworks.

[developit]

Ah yes, that's definitely more geared towards preact-custom-element. If you're working in an environment where HTML is the source of application structure/composition, you'll want that library in order to blend Preact's JSX/VDOM world with that of the DOM :)

[amitguptagwl]

After 20 mins of try I found that registerCustomElement(Icons, "ta"); doesn't work. But registerCustomElement(Icons, "t-a"); works.

And do we have some more examples or detailed examples of custom event? Because it looks like, I can't use the conditions inside, I can not use variables which are defined outside the const etc.

[developit]

ahh, yes. That's actually enforced by the Custom Elements specification. I've submitted a PR to preact-custom-element to make a note of that in the readme.

[marvinhagemeister]

We've added a Getting Started guide and a Tutorial page on our new site :tada: