{"id":17351,"date":"2023-09-01T13:03:33","date_gmt":"2023-09-01T13:03:33","guid":{"rendered":"https:\/\/dialtous.com\/?p=17351"},"modified":"2023-09-01T13:03:33","modified_gmt":"2023-09-01T13:03:33","slug":"jsx-la-gi","status":"publish","type":"post","link":"https:\/\/dialtous.com\/jsx-la-gi\/","title":{"rendered":"Gi\u1edbi thi\u1ec7u JSX"},"content":{"rendered":"

Xem x\u00e9t \u0111o\u1ea1n khai b\u00e1o bi\u1ebfn d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n

C\u00fa ph\u00e1p c\u1ee7a \u0111o\u1ea1n n\u00e0y kh\u00f4ng ph\u1ea3i l\u00e0 m\u1ed9t chu\u1ed7i k\u00ed t\u1ef1 v\u00e0 c\u0169ng kh\u00f4ng ph\u1ea3i l\u00e0 m\u1ed9t th\u1ebb HTML. \u0110\u00e2y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 JSX, m\u1ed9t c\u00fa ph\u00e1p m\u1edf r\u1ed9ng cho JavaScript. Ch\u00fang t\u00f4i khuy\u1ebfn kh\u00edch s\u1eed d\u1ee5ng JSX c\u00f9ng v\u1edbi React \u0111\u1ec3 mi\u00eau t\u1ea3 giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng (UI). JSX c\u00f3 th\u1ec3 tr\u00f4ng gi\u1ed1ng ng\u00f4n ng\u1eef template, nh\u01b0ng n\u00f3 k\u1ebft h\u1ee3p t\u1ea5t c\u1ea3 c\u00e1c t\u00ednh n\u0103ng c\u1ee7a JavaScript.<\/p>\n

JSX t\u1ea1o ra c\u00e1c ph\u1ea7n t\u1eed React. Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u00e1ch ch\u00fang \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean DOM trong ph\u1ea7n ti\u1ebfp theo. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 nh\u1eefng ki\u1ebfn th\u1ee9c c\u01a1 b\u1ea3n v\u1ec1 JSX m\u00e0 b\u1ea1n c\u1ea7n \u0111\u1ec3 b\u1eaft \u0111\u1ea7u.<\/p>\n

T\u1ea1i sao l\u1ea1i s\u1eed d\u1ee5ng JSX?<\/h2>\n

React khuy\u1ebfn kh\u00edch ch\u00fang ta k\u1ebft h\u1ee3p logic render m\u1ed9t c\u00e1ch t\u1ef1 nhi\u00ean v\u1edbi c\u00e1c logic kh\u00e1c li\u00ean quan \u0111\u1ebfn giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng: x\u1eed l\u00fd s\u1ef1 ki\u1ec7n, thay \u0111\u1ed5i tr\u1ea1ng th\u00e1i theo th\u1eddi gian v\u00e0 chu\u1ea9n b\u1ecb d\u1eef li\u1ec7u \u0111\u1ec3 hi\u1ec3n th\u1ecb.<\/p>\n

Thay v\u00ec t\u00e1ch bi\u1ec7t c\u00e1c c\u00f4ng ngh\u1ec7 gi\u1ea3 t\u1ea1o b\u1eb1ng c\u00e1ch \u0111\u1ecbnh ngh\u0129a giao di\u1ec7n v\u00e0 logic trong c\u00e1c t\u1ec7p ri\u00eang bi\u1ec7t, React t\u00e1ch bi\u1ec7t ch\u00fang trong c\u00e1c \u0111\u01a1n v\u1ecb r\u1eddi r\u1ea1c g\u1ecdi l\u00e0 “components”. Ch\u00fang ta s\u1ebd th\u1ea3o lu\u1eadn v\u1ec1 components trong m\u1ed9t ph\u1ea7n kh\u00e1c, v\u00e0 n\u1ebfu b\u1ea1n v\u1eabn ch\u01b0a th\u1ea5y tho\u1ea3i m\u00e1i v\u1edbi vi\u1ec7c \u0111\u01b0a \u0111\u1ecbnh ngh\u0129a giao di\u1ec7n v\u00e0o trong JavaScript, bu\u1ed5i n\u00f3i chuy\u1ec7n n\u00e0y c\u00f3 th\u1ec3 thuy\u1ebft ph\u1ee5c b\u1ea1n.<\/p>\n

React kh\u00f4ng y\u00eau c\u1ea7u b\u1eaft bu\u1ed9c s\u1eed d\u1ee5ng JSX, nh\u01b0ng h\u1ea7u h\u1ebft m\u1ecdi ng\u01b0\u1eddi \u0111\u1ec1u th\u1ea5y n\u00f3 h\u1eefu \u00edch khi l\u00e0m vi\u1ec7c v\u1edbi giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng trong m\u00e3 JavaScript. JSX c\u0169ng cho ph\u00e9p React hi\u1ec3n th\u1ecb c\u00e1c th\u00f4ng b\u00e1o l\u1ed7i v\u00e0 c\u1ea3nh b\u00e1o h\u1eefu \u00edch h\u01a1n.<\/p>\n

V\u1eady b\u1eaft \u0111\u1ea7u ngay th\u00f4i!<\/p>\n

Nh\u00fang bi\u1ec3u th\u1ee9c trong JSX<\/h2>\n

Trong v\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y, ch\u00fang ta khai b\u00e1o m\u1ed9t bi\u1ebfn c\u00f3 t\u00ean l\u00e0 “name” v\u00e0 s\u1eed d\u1ee5ng n\u00f3 b\u00ean trong JSX b\u1eb1ng c\u00e1ch \u0111\u1eb7t n\u00f3 trong c\u1eb7p d\u1ea5u ngo\u1eb7c nh\u1ecdn:<\/p>\n

B\u1ea1n c\u00f3 th\u1ec3 nh\u00fang b\u1ea5t k\u1ef3 bi\u1ec3u th\u1ee9c JavaScript h\u1ee3p l\u1ec7 n\u00e0o v\u00e0o trong JSX b\u1eb1ng c\u00e1ch \u0111\u1eb7t ch\u00fang trong c\u1eb7p d\u1ea5u ngo\u1eb7c nh\u1ecdn. V\u00ed d\u1ee5: 2 + 2, user.firstName ho\u1eb7c formatName(user) \u0111\u1ec1u l\u00e0 c\u00e1c bi\u1ec3u th\u1ee9c h\u1ee3p l\u1ec7 trong JavaScript.<\/p>\n

Trong v\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y, ch\u00fang ta nh\u00fang k\u1ebft qu\u1ea3 c\u1ee7a m\u1ed9t h\u00e0m JavaScript, formatName(user), v\u00e0o trong ph\u1ea7n t\u1eed <\/p>\n

.<\/p>\n

\"Image\"<\/a><\/p>\n

Ch\u00fang ta c\u00f3 th\u1ec3 t\u00e1ch JSX v\u00e0o c\u00e1c t\u1ec7p ri\u00eang bi\u1ec7t \u0111\u1ec3 d\u1ec5 \u0111\u1ecdc. \u0110i\u1ec1u n\u00e0y kh\u00f4ng b\u1eaft bu\u1ed9c, nh\u01b0ng khi l\u00e0m nh\u01b0 v\u1eady, ch\u00fang t\u00f4i khuy\u1ebfn kh\u00edch b\u1ea1n \u0111\u1eb7t trong c\u1eb7p d\u1ea5u ngo\u1eb7c nh\u1ecdn \u0111\u1ec3 tr\u00e1nh r\u01a1i v\u00e0o t\u00ecnh hu\u1ed1ng m\u00e0 JavaScript Engine t\u1ef1 \u0111\u1ed9ng th\u00eam d\u1ea5u ch\u1ea5m ph\u1ea9y.<\/p>\n

JSX c\u0169ng l\u00e0 m\u1ed9t bi\u1ec3u th\u1ee9c<\/h2>\n

Sau khi \u0111\u01b0\u1ee3c bi\u00ean d\u1ecbch, bi\u1ec3u th\u1ee9c JSX tr\u1edf th\u00e0nh c\u00e1c cu\u1ed9c g\u1ecdi h\u00e0m th\u00f4ng th\u01b0\u1eddng c\u1ee7a JavaScript v\u00e0 tr\u1edf th\u00e0nh c\u00e1c \u0111\u1ed1i t\u01b0\u1ee3ng JavaScript khi \u0111\u01b0\u1ee3c g\u1ecdi.<\/p>\n

\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng JSX trong c\u00e2u l\u1ec7nh if ho\u1eb7c v\u00f2ng l\u1eb7p for, g\u00e1n n\u00f3 cho bi\u1ebfn, s\u1eed d\u1ee5ng nh\u01b0 tham s\u1ed1 c\u1ee7a h\u00e0m v\u00e0 tr\u1ea3 v\u1ec1 JSX t\u1eeb h\u00e0m.<\/p>\n

X\u00e1c \u0111\u1ecbnh thu\u1ed9c t\u00ednh c\u1ee7a th\u1ebb v\u1edbi JSX<\/h2>\n

B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng d\u1ea5u nh\u00e1y \u0111\u1ec3 khai b\u00e1o m\u1ed9t chu\u1ed7i nh\u01b0 m\u1ed9t thu\u1ed9c t\u00ednh c\u1ee7a th\u1ebb:<\/p>\n

B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng d\u1ea5u ngo\u1eb7c nh\u1ecdn \u0111\u1ec3 nh\u00fang m\u1ed9t bi\u1ec3u th\u1ee9c JavaScript v\u00e0o trong thu\u1ed9c t\u00ednh:<\/p>\n

\u0110\u1eebng \u0111\u1eb7t c\u1ea3 d\u1ea5u nh\u00e1y v\u00e0 d\u1ea5u ngo\u1eb7c nh\u1ecdn khi nh\u00fang bi\u1ec3u th\u1ee9c JavaScript v\u00e0o trong m\u1ed9t thu\u1ed9c t\u00ednh. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng d\u1ea5u nh\u00e1y (cho gi\u00e1 tr\u1ecb chu\u1ed7i) ho\u1eb7c d\u1ea5u ngo\u1eb7c nh\u1ecdn (cho bi\u1ec3u th\u1ee9c), nh\u01b0ng kh\u00f4ng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng c\u1ea3 hai cho c\u00f9ng m\u1ed9t thu\u1ed9c t\u00ednh.<\/p>\n

\n

C\u1ea2NH B\u00c1O:<\/strong><\/p>\n

V\u00ec JSX g\u1ea7n v\u1edbi JavaScript h\u01a1n l\u00e0 HTML, React DOM s\u1eed d\u1ee5ng quy t\u1eafc \u0111\u1eb7t t\u00ean camelCase cho thu\u1ed9c t\u00ednh thay v\u00ec s\u1eed d\u1ee5ng t\u00ean thu\u1ed9c t\u00ednh g\u1ed1c c\u1ee7a HTML.<\/p>\n

V\u00ed d\u1ee5: “class” tr\u1edf th\u00e0nh “className” trong JSX v\u00e0 “tabindex” tr\u1edf th\u00e0nh “tabIndex”.<\/p>\n<\/blockquote>\n

S\u1eed d\u1ee5ng th\u1ebb con trong JSX<\/h2>\n

N\u1ebfu th\u1ebb kh\u00f4ng c\u00f3 n\u1ed9i dung, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u00f3ng n\u00f3 ngay l\u1eadp t\u1ee9c b\u1eb1ng “\/>”, t\u01b0\u01a1ng t\u1ef1 nh\u01b0 XML:<\/p>\n

Th\u1ebb JSX c\u00f3 th\u1ec3 ch\u1ee9a c\u00e1c th\u1ebb con:<\/p>\n

JSX ch\u1ed1ng t\u1ea5n c\u00f4ng ki\u1ec3u Injection<\/h2>\n

Vi\u1ec7c nh\u00fang d\u1eef li\u1ec7u ng\u01b0\u1eddi d\u00f9ng v\u00e0o trong JSX l\u00e0 an to\u00e0n:<\/p>\n

M\u1eb7c \u0111\u1ecbnh, React DOM lo\u1ea1i b\u1ecf c\u00e1c k\u00fd t\u1ef1 \u0111\u1eb7c bi\u1ec7t trong b\u1ea5t k\u1ef3 gi\u00e1 tr\u1ecb n\u00e0o \u0111\u01b0\u1ee3c nh\u00fang v\u00e0o JSX tr\u01b0\u1edbc khi hi\u1ec3n th\u1ecb. \u0110i\u1ec1u n\u00e0y \u0111\u1ea3m b\u1ea3o kh\u00f4ng c\u00f3 gi\u00e1 tr\u1ecb \u0111\u1ed9c h\u1ea1i n\u00e0o \u0111\u01b0\u1ee3c truy\u1ec1n v\u00e0o \u1ee9ng d\u1ee5ng. T\u1ea5t c\u1ea3 \u0111\u1ec1u \u0111\u01b0\u1ee3c chuy\u1ec3n th\u00e0nh chu\u1ed7i tr\u01b0\u1edbc khi hi\u1ec3n th\u1ecb. \u0110i\u1ec1u n\u00e0y gi\u00fap ng\u0103n ch\u1eb7n c\u00e1c cu\u1ed9c t\u1ea5n c\u00f4ng XSS (cross-site scripting).<\/p>\n

JSX l\u00e0 \u0111\u1ed1i t\u01b0\u1ee3ng<\/h2>\n

Babel bi\u00ean d\u1ecbch JSX th\u00e0nh c\u00e1c cu\u1ed9c g\u1ecdi h\u00e0m React.createElement().<\/p>\n

Hai v\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y t\u01b0\u01a1ng t\u1ef1 nhau:<\/p>\n

React.createElement() th\u1ef1c hi\u1ec7n m\u1ed9t s\u1ed1 ki\u1ec3m tra \u0111\u1ec3 gi\u00fap b\u1ea1n vi\u1ebft m\u00e3 m\u00e0 kh\u00f4ng c\u00f3 l\u1ed7i, nh\u01b0ng c\u01a1 b\u1ea3n n\u00f3 t\u1ea1o ra m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng nh\u01b0 sau:<\/p>\n

C\u00e1c \u0111\u1ed1i t\u01b0\u1ee3ng n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 “ph\u1ea7n t\u1eed React”. B\u1ea1n c\u00f3 th\u1ec3 coi ch\u00fang nh\u01b0 m\u00f4 t\u1ea3 c\u1ee7a nh\u1eefng g\u00ec b\u1ea1n mu\u1ed1n hi\u1ec3n th\u1ecb tr\u00ean m\u00e0n h\u00ecnh. React \u0111\u1ecdc c\u00e1c \u0111\u1ed1i t\u01b0\u1ee3ng n\u00e0y v\u00e0 s\u1eed d\u1ee5ng ch\u00fang \u0111\u1ec3 x\u00e2y d\u1ef1ng DOM v\u00e0 c\u1eadp nh\u1eadt n\u00f3.<\/p>\n

Ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u c\u00e1ch c\u00e1c ph\u1ea7n t\u1eed React \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean DOM trong ph\u1ea7n ti\u1ebfp theo.<\/p>\n

\n

G\u1ee3i \u00fd:<\/strong><\/p>\n

Ch\u00fang t\u00f4i khuy\u1ebfn kh\u00edch b\u1ea1n s\u1eed d\u1ee5ng Babel \u0111\u1ec3 bi\u00ean d\u1ecbch m\u00e3 c\u1ee7a b\u1ea1n \u0111\u1ec3 d\u1ec5 \u0111\u1ecdc. Babel s\u1ebd l\u00e0m t\u00f4 s\u00e1ng c\u1ea3 m\u00e3 ES6 v\u00e0 JSX.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"

Xem x\u00e9t \u0111o\u1ea1n khai b\u00e1o bi\u1ebfn d\u01b0\u1edbi \u0111\u00e2y: C\u00fa ph\u00e1p c\u1ee7a \u0111o\u1ea1n n\u00e0y kh\u00f4ng ph\u1ea3i l\u00e0 m\u1ed9t chu\u1ed7i k\u00ed t\u1ef1 v\u00e0 c\u0169ng kh\u00f4ng ph\u1ea3i l\u00e0 m\u1ed9t th\u1ebb HTML. \u0110\u00e2y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 JSX, m\u1ed9t c\u00fa ph\u00e1p m\u1edf r\u1ed9ng cho JavaScript. Ch\u00fang t\u00f4i khuy\u1ebfn kh\u00edch s\u1eed d\u1ee5ng JSX c\u00f9ng v\u1edbi React \u0111\u1ec3 mi\u00eau t\u1ea3 giao di\u1ec7n […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"_links":{"self":[{"href":"https:\/\/dialtous.com\/wp-json\/wp\/v2\/posts\/17351"}],"collection":[{"href":"https:\/\/dialtous.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dialtous.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dialtous.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dialtous.com\/wp-json\/wp\/v2\/comments?post=17351"}],"version-history":[{"count":1,"href":"https:\/\/dialtous.com\/wp-json\/wp\/v2\/posts\/17351\/revisions"}],"predecessor-version":[{"id":17352,"href":"https:\/\/dialtous.com\/wp-json\/wp\/v2\/posts\/17351\/revisions\/17352"}],"wp:attachment":[{"href":"https:\/\/dialtous.com\/wp-json\/wp\/v2\/media?parent=17351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dialtous.com\/wp-json\/wp\/v2\/categories?post=17351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dialtous.com\/wp-json\/wp\/v2\/tags?post=17351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}