JSX is quasi-quoting
source link: https://xeiaso.net/blog/jsx-quasi-quoting
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
JSX is quasi-quoting
xeiaso.eth or 0xeA223Ca8968Ca59e0Bc79Ba331c2F6f636A3fB82. It helps fund the website's hosting bills and pay for the expensive technical editor that I use for my longer articles. Thanks and be well!JSX is quasi-quoting
Read time in minutes: 5
I've been writing a fair bit of JSX/TSX code lately and something has felt oddly familiar about that programming model. It was something that I couldn't really place until I had a breakthrough after hacking at my Emacs config again. When you are using JSX to write HTML in your JavaScript functions, you are using quasi-quoting.
Image generated by Waifu Diffusion -- glowing sigils, sigils, zen, yin yang, taoism, landscape, world trade center, peaceful, arknights, scifi, runic energy, spellcraft
I think one of the easiest ways to explain this is to use Emacs Lisp. Emacs Lisp
is the extension language for GNU Emacs,
the text editor that I am horribly addicted to using have used for the last
ten years.
One of the major concepts in Lisp is that code is data, and data is code. When you are writing in Lisp, you are writing linked lists that the computer interprets as code. For example, consider this small bit of Lisp:
(quote (+ 3 4))
You can evaluate this with ielm in Emacs by using M-x ielm:
M-x is Emacs-speak for
"alt-x".
*** Welcome to IELM *** Type (describe-mode) for help.
ELISP> (quote (+ 3 4))
(+ 3 4)
Quoting code into data is something you do very often in Lisp, so there's a
shortcut for doing this using the single quote character ':
ELISP> '(+ 3 4)
(+ 3 4)
This works great, but sometimes you need to put the value of a variable into a bit of data. Let's say you have this snippet of Lisp code:
(let ((filename "foobar.txt"))
'(filename))
(let ((var1 value) (var2 value)) code) is how you declare temporary variables in Lisp. Here the variable
name filename is set to "foobar.txt". Each variable declaration is a list of
two elements: the variable name and its value. Values can be data or code that
is evaluated down to data.If you put this into the Emacs Lisp interpreter, you won't get back what you think:
ELISP> (let ((filename "foobar.txt"))
'(filename))
(filename)
You need to have some way to quote code you want to be data, and then some way to unquote data back into code. Luckily, Emacs Lisp lets you do this with a construct they call Backquoting:
ELISP> (let ((filename "foobar.txt"))
`(,filename))
("foobar.txt")
The backtick ` lets you quote everything like the single quote
', but you can also unquote data using the comma ,
to turn your data back into code. This lets you construct complicated data
structures like an attribute list to convert into HTTP form data:
ELISP> (let ((fname (buffer-name))
(content "Hi there"))
`((fname . ,fname)
(content . ,content)))
((fname . "*ielm*")
(content . "Hi there"))
JSX is a syntax extension for JavaScript that lets you mix HTML data with JavaScript code. It's a lot like quasi-quoting in Lisp. Consider this small block of JSX code:
const name = "Aoi";
const header = (
<div>
<h2>{name}</h2>
<p>Hi there, {name}! How are you doing today?</p>
</div>
);
document.write(header);
This writes the equivalent of this HTML to the current page:
<div>
<h2>Aoi</h2>
<p>Hi there, Aoi! How are you doing today?</p>
</div>
You quote HTML data inside parentheses () and use curly braces {} to unquote
JavaScript code into HTML data.
Recommend
-
92
surround.vim Surround.vim is all about "surroundings": parentheses, brackets, quotes, XML tags, and more. The plugin provides mappings to easily delete, change and add such surroundings in pairs. It's easiest to explain with examp...
-
24
题目描述 给出一个数 \(n\) ，你需要将 \(n\) 写成若干个数的和，其中每个数的十进制表示中仅包含 \(0\) 和 \(1\) 。 问最少需要多少个数 输入输出...
-
17
Key Challenges with Quasi Experiments at NetflixKamer Toker-Yildiz, Colin McFarland
-
17
Oil Doesn't Require Quoting Everywhereblog | oilshell.org Oil Doesn't Require Quoting Everywhere 2021-04-09 I published the refe...
-
8
Understanding the Salesforce Revenue Cloud Quoting CycleI’ve lost track of the number of times I’ve had clients come to me looking for guidance on best practices with CPQ…. after they’ve implemented it. They come with tale...
-
10
Generating Quasi-Random NumbersQuasi-Random SequencesQuasi-random number generators (QRNGs) produce highly uniform samples of the unit hypercube. QRNGs minimize the discrepancy between the distribution of g...
-
9
Quasi-analytic Classes (Complex Analysis)Motivation There are a lot of nice properties of analytic functions, whose class is denoted by Cω. Formally we have the following definition: If f∈Cω and x0∈R, one...
-
9
iPad as quasi-primary device? MacAztec macrumors 68040 Original poster ...
-
3
Computer Science > Data Structures and Algorithms [Submitted on 15 Jul 2022] A tight quasi-polynomi...
-
6
From arXivPublished on March 27, 2024Hypergraph Unreliability in Quasi-Polynomial TimeThe hypergraph unreliability problem asks for the probability that a hypergraph gets disconnected when every hyp...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK