React VS Liquid

React has come a long way over the last 10 years and the framework has undergone some major changes in the way it works. The legacy docs didn’t favour new developers who had to learn React twice - once with class components and then once again with Hooks. The new docs teach modern React and have a much better structure with more interactive examples, opinions and a better colour scheme (imo 😂). There are a lot of changes so, I wanted to outline my favourite things and why:

Now the new react documentation have been released they have pretty good examples. Go through it https://react.dev/

Regarding page rendering with Next.js, pre-rendering is a fundamental component. It is a key feature of Next.js, which means that static HTML content is generated in advance rather than dynamically on each request. When comparing the page source of a traditional React.js web app and a Next.js web app, it is clear that the Javascript code is loaded before the contents are rendered to the user, which is a bad user experience. However, when inspecting the contents of a Next.js page source, the HTML is already generated with all the necessary data, making Next.js the most efficient method for improved web performance and user experience.

In this blog tutorial, we will see how we can setup a ReactJs project with Typescript, styled-components and redux toolkit.

React has stated that this will be supported in the future. However that issue is old enough to be in kindergarten. So I'm looking for a nice easy abstraction in the meantime.

A bare closure would always see the latest values because it closes over them during render. And the latest useEffect closure will have closed over that method..

Here is the test suite for useEffectEvent and the test ensuring it does not provide a stable reference: https://github.com/facebook/react/blob/main/packages/react-r...

And then a wild 'exhaustive-deps'[0] appears!

[0]: https://github.com/facebook/react/issues/14920

React.js - for our frontend

The now-legacy documentation could originally be found at reactjs.org; this now redirects to the brand-new react.dev domain. When the new docs were still in beta, they were hosted at beta.reactjs.org, which now also redirects to react.dev. The original documentation can still be found, for those who need it, at legacy.reactjs.org. This was done to make a fresh start and clear separation between the current vs. legacy documentation.

I find this to be a very nice high-level explanation: https://medium.com/@ryardley/react-hooks-not-magic-just-arra...

In reality we use a linked list rather than an array. If you wanna dive into the code, I can give some pointers. For example, useState is implemented like this during first render (https://github.com/facebook/react/blob/87c803d1dad7e5fe88634...) and like this during next renders (https://github.com/facebook/react/blob/87c803d1dad7e5fe88634...).

However, _conceptually_ I'd recommend to think of Hook return values similar to "extra inputs" to your function, kind of like extra arguments. There are different ways to formalize it in different languages. We picked plain function calls for simplicity and low overhead, although you could imagine `yield` with generators or something like that.

In the meantime, Liquid v4.0.4 has been released, and allows building a Jekyll site with the latest Ruby.

Then, let’s create the simplest template for our static Eleventy page. We’ll write it using Liquid, but since it’s so simple, it won’t take advantage of any useful templating tags for now. Let’s call it index.liquid:

Previously I have used Jekyll for blogging and it has served me well for simple blogs and static websites. Jekyll is a static site generator that relies on Markdown, Liquid, HTML, and CSS. Which means no JavaScript -- a Jamstack without the J. With GitHub Pages you can even host Jekyll sites directly from your repository.2

Before march of last year, I was running Jekyll as my static site generator. It uses markdown and Liquid. My goal was to write a static site generator that would be a drop-in replacement so that I wouldn't have to change any of the input files.

For most of the common things I have to program, I didn't just program it, I programmed a program to generate it. Mostly an engine that parses Liquid Templates.

Liquid is an open-source template language created by Shopify and written in Ruby. It can be used to add dynamic content to pages, and to create a wide variety of custom templates. While DotLiquid is a templating system ported to the .NET framework from Ruby’s Liquid Markup.

Simpsons did it! Simpsons did it! :)

In my second (current) version I swapped all of that stuff out in favor of using Liquid - It made everything so much easier, and much more customizable for end-users. Just a tip, might be something to look into

Really interesting article! so does this mean you could use an eex Engine to render liquid? (https://shopify.github.io/liquid/)

- Shopify Themes Docs - Shopify Liquid Docs - Shopify Theme Development tutorials - Liquid Cheat Sheet