Clever Geek Handbook

Mesin Transformasi JSX Baru di Kandidat Rilis React 17

React 17 Release Candidate memperkenalkan cara baru untuk mengubah JSX. Dengannya, dalam satu bundel, Anda tidak memerlukan React itu sendiri, meskipun Anda masih membutuhkannya untuk menggunakan hook. Inilah manfaat utama dari mekanisme baru tersebut. Di bawah ini adalah terjemahan singkat dari artikel di blog ReactJS .



Apa itu Transformasi JSX



Karena browser tidak memahami JSX secara langsung, pengembang mengandalkan kompiler seperti Babel atau Typecript untuk mengubah JSX menjadi JS biasa. React 17 Release Candidate memperkenalkan mekanisme transformasi JSX ke JS opsional baru.



Berikut manfaatnya:



  • Menggunakan JSX tanpa React Import
  • Bergantung pada pengaturannya, bundel mungkin sedikit berkurang
  • Kedepannya akan tersedia fitur untuk mempermudah pekerjaan dengan react


(Mungkin saya tidak cukup menerjemahkannya secara akurat - ini aslinya: Ini akan memungkinkan perbaikan di masa depan yang mengurangi jumlah konsep yang perlu Anda pelajari React )



Upgrade tidak mengubah JSX itu sendiri dengan cara apapun dan semua kompiler bekerja dan akan bekerja. Tidak ada rencana untuk meninggalkan mereka. Direncanakan untuk mendukung mekanisme Transformasi JSX baru untuk versi React yang lebih lama: 16.x, 15.x, 14.x, berikut adalah instruksi untuk upgrade.



Apa yang berubah



Transformasi JSX lama bekerja seperti ini:



Kode 



import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}


Berubah menjadi 



import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}


Tapi ini tidak bagus dan inilah alasannya:





Untuk mengatasi ini, React 17 memperkenalkan dua titik masuk baru untuk digunakan oleh alat lain seperti Babel dan Typecript, dan sekarang alih-alih berubah menjadi React.createElement, fungsi baru dari paket React diimpor dan dipanggil.



Misalkan kode Anda terlihat seperti ini: 



function App() {
  return <h1>Hello World</h1>;
}


Setelah transformasi baru, akan terlihat seperti ini: 



// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}


Mekanisme baru tidak mengimpor React, meskipun masih diperlukan agar hook dapat berfungsi.



Transformasi baru sepenuhnya kompatibel dengan semua kode JSX yang ada, Anda tidak perlu mengubah apa pun. Berikut adalah rincian teknis bagaimana transformasi JSX baru bekerja.



Cara meningkatkan



Jika Anda tidak siap untuk meningkatkan atau menggunakan JSX untuk pustaka lain, jangan khawatir, transformasi lama tidak akan dihapus dan akan didukung.



Untuk meningkatkan, Anda memerlukan dua hal:



  • Versi React dengan dukungan transformasi baru. Sejauh ini baru 17, tapi kedepannya 16.x, 15.x dan 14.x
  • Kompiler yang kompatibel (lihat di bawah)


Buat Aplikasi



React Dukungan Buat Aplikasi React akan ada dalam rilis v4.0 sekarang dalam pengujian beta (per 09/22/2020)



Next.js



Next.js v9.5.3 + sudah menggunakan transformasi React baru untuk versi yang kompatibel.



Gatsby



Gatsby v2.24.5 + sudah menggunakan transformasi React baru untuk versi yang kompatibel.



catatan
Gatsby 17.0.0-rc.2, npm update







Dukungan Konfigurasi Babel Manual dari v7.9.0 dan yang lebih baru.



Jika Anda menggunakanbabel/ plugin-transform-react-jsx:



# npm

npm update @babel/core @babel/plugin-transform-react-jsx

# benang

yarn upgrade @babel/core @babel/plugin-transform-react-jsx



Jika Anda menggunakanbabel/ preset-react:



# npm

npm update @babel/core @babel/preset-react

# yarn

yarn upgrade @babel/core @babel/preset-react



Sekarang untuk mengubah JSX, menjadibabel/ plugin-transform-react-jsx dan in babel/ preset-react, defaultnya adalah {"runtime": "classic"} ini adalah transformasi versi lama. Untuk mengaktifkan transformasi baru, Anda memerlukan opsi {"runtime": "automatic"}



Jika Anda menggunakanbabel/ preset-react: 



{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}


Jika Anda menggunakan babel/ plugin-transform-react-jsx: 



{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "runtime": "automatic"
    }]
  ]
}


Mulai Babel 8, "otomatis" akan menjadi default untuk kedua plugin. Ada dokumentasi yang lebih rinci di sini @ babel / plugin-transform-react-jsx dan @ babel / preset-react .



Catatan
, importSource , . , .



ESLint



Jika Anda memiliki plugin eslint-plugin-react , maka aturan react / jsx-uses-react dan react / react-in-jsx-scope tidak lagi diperlukan dan dapat dihapus. 



{
  // ...
  "rules": {
    // ...
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}






Dukungan TypeScript untuk transformasi JSX sejak versi 4.1 beta . Dukungan



Aliran



untuk transformasi JSX dari versi 0.126.0 dan yang lebih tinggi.



Cara menghapus impor React yang tidak digunakan



Karena transformasi JSX baru akan secara otomatis mengimpor react / jsx-runtime, React tidak lagi diperlukan dalam lingkup untuk menggunakan JSX. Impor yang tidak digunakan tidak penting, tetapi jika Anda ingin menghapusnya, disarankan untuk menggunakan skrip codemod. 



cd your_project
npx react-codemod update-react-imports


Hasil dari:



  • Hapus impor React yang tidak digunakan
  • Semua impor seperti import React dari "react" akan diubah menjadi import {useState} dari "react". Ini adalah metode impor yang disukai. Codemod tidak akan memengaruhi impor seperti import * karena React from "react", ini juga merupakan impor yang valid dan di versi 17 akan berfungsi, tetapi di masa mendatang kami akan meminta Anda untuk membuangnya


Kode: 



import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}


Akan diganti oleh: 



function App() {
  return <h1>Hello World</h1>;
}


Jika Anda menggunakan sesuatu yang lain di react (misalnya hook), maka import bernama akan muncul di kode:



Code 



import React from 'react';

function App() {
  const [text, setText] = React.useState('Hello World');
  return <h1>{text}</h1>;
}


Diganti dengan kode: 



import { useState } from 'react';

function App() {
  const [text, setText] = useState('Hello World');
  return <h1>{text}</h1>;
}


Menghapus impor yang tidak terpakai akan membantu mempersiapkan versi React berikutnya (bukan 17) di mana akan ada dukungan untuk modul ES dan tidak akan ada ekspor default.



Ucapan Terima Kasih



Kami ingin berterima kasih kepada tim Babel, TypeScript, Create React App, Next.js, Gatsby, ESLint, dan Flow atas bantuan mereka dalam mengintegrasikan mesin transformasi JSX yang baru. Kami juga berterima kasih kepada komunitas React atas umpan balik dan diskusi mereka tentang RFC .


More articles:


All Articles