A beginners' tutorial to Preact (4 Part Series)
This series of posts will make up a tutorial for Preact that does not assume knowledge in React, or any other application framework. I found this specific area lacking when it comes to tutorials, as myself someone who has never used React.
- DOM Garderning
- JSX, or as it should be called: XML-in-JS
- First steps with Preact
- Components, props, state, and context
- Testing components
- Get hooked, Capt'n!
- To CSS and not to CSS
- Route it, link it, match it - technologic
- Manual Server-side Rendering
- Workshop: A music catalog application
This is where the "modern" view of the web clashes with its implementation. The modern web of web applications view a website as an application, from which its web pages are the multiple entry points. HTML, then, define the elements which compose the particular application, and how it is structured.
There is a way to, if not resolve, at least help bridge the gap between the early design and modern use of the web. By taking a step back from the HTML itself, and focusing instead on composing "elements" which render themselves into HTML. We can then stop thinking about "how will I write HTML in order to build my application?", and start thinking about "How can I break down my application into manageable chunks?", and this is the first step towards building applications that scale while staying maintainable.
However, this is not a perfect solution, as the technicalities of the document-centric workflow tend to creep up into these elements quite quickly (one being the "cascade" I mentioned earlier, which you'll understand if you have any experience with CSS, however styling is outside the scope of this series).
This very thinking led to the popularization of JS frameworks promising to implement this abstraction of HTML into reusable elements in a way that would benefit the developer. React, Angular, Vue, Elm, Svelte, dozens of frameworks each try to innovate on the above recipe in their own way.
This sets the stage and hopefully the mindset towards understanding the thought process behind the design of the technologies we are going to use throughout the series.