# 199: Messing dengan JSX - Trik CSS

Anonim

Saya mungkin seharusnya sudah mempelajarinya sejak lama, tetapi sayangnya, di sinilah kita. Ternyata Anda bisa mengetahui fungsi apa yang Anda ingin JSX gunakan. Ya, JSX sebenarnya hanya memiliki satu transformasi utama yang dilakukannya. Itu mengubah tanda kurung sudut di JavaScript menjadi panggilan fungsi. Jadi, jika Anda menulis baris seperti ini di JavaScript:

 Hello 

Setelah diproses (mungkin dengan Babel dan plugin JSX), Anda akan mendapatkan, secara default:

React.createElement("div", ( class: "big" ), "Hello");

Tetapi jika Anda menyertakan komentar direktif yang memberi tahu BEJ bahwa Anda ingin menggunakan fungsi Anda sendiri, Anda dapat mengubah keluaran itu:

/* @jsx myFunction */ Hello 

Berubah menjadi:

/* @jsx myFunction */ myFunction("div", ( class: "big" ), "Hello");

Artinya kita bisa menulis fungsi kita sendiri. Agak aneh, tapi oke.

Kasus penggunaan sebenarnya adalah untuk pustaka non-React, seperti Preact. Saya mempelajarinya dari melihat contoh Jason Miller:

Vue juga bisa dilakukan dengan cara ini. Perhatikan bahwa Vue dan Preact mengirimkan hfungsi khusus ini yang dirancang untuk ini:

Valeri Karpov memiliki beberapa kasus penggunaan yang menarik di postingan blog mereka, "Gambaran Umum JSX Dengan 3 Contoh Non-React" juga.