React adalah kerangka pengembangan JavaScript yang diluncurkan oleh Facebook untuk membangun antarmuka pengguna. Ini terutama digunakan untuk membangun UI, sehingga memudahkan untuk membuat UI interaktif. Ant Design adalah komponen UI yang dikembangkan oleh tim Alibaba Ant Financial berdasarkan React. Komponen ini terutama digunakan untuk sistem middle dan back-end. Komponen ini dibuat menggunakan TypeScript dan menyediakan file definisi tipe yang lengkap.
Lingkungan operasi tutorial ini: sistem Windows7, versi react18, komputer Dell G3.
Apa itu reaksi?
React adalah pustaka JavaScript yang digunakan untuk membangun antarmuka pengguna. Ini berasal dari proyek internal Facebook. Karena perusahaan tidak puas dengan semua kerangka kerja JavaScript MVC yang ada di pasaran, mereka memutuskan untuk menulis kerangka kerja sendiri untuk membangun situs web Instagram. Setelah membuatnya, saya menemukan bahwa kumpulan hal ini sangat berguna, sehingga menjadi open source pada Mei 2013.
React adalah pustaka JavaScript yang deklaratif, efisien dan fleksibel untuk membangun antarmuka pengguna. Dengan menggunakan React, Anda dapat menggabungkan cuplikan kode pendek dan independen ke dalam antarmuka UI yang kompleks. Cuplikan kode ini disebut "komponen".
Karena ide desain React sangat unik, merupakan inovasi revolusioner, memiliki kinerja luar biasa, dan logika kodenya sangat sederhana. Oleh karena itu, semakin banyak orang yang mulai memperhatikan dan menggunakannya, berpikir bahwa ini mungkin menjadi alat utama untuk pengembangan Web di masa depan.
React adalah pustaka JavaScript sumber terbuka yang menyediakan tampilan data yang dirender ke dalam HTML. Tampilan React biasanya dirender menggunakan komponen yang berisi komponen lain yang ditentukan dalam markup HTML khusus. React memberi pemrogram model di mana komponen anak tidak dapat secara langsung mempengaruhi komponen luar, pembaruan dokumen HTML yang efisien ketika data berubah, dan pemisahan yang bersih antar komponen dalam aplikasi satu halaman modern.
React membuat pembuatan UI interaktif menjadi mudah. Rancang tampilan ringkas untuk setiap keadaan di aplikasi Anda sehingga React dapat secara efisien memperbarui dan merender komponen dengan benar ketika data berubah. Logika komponen ditulis dalam JavaScript, bukan templat, sehingga Anda dapat dengan mudah meneruskan data di sekitar aplikasi Anda dan memisahkan status dari DOM.
Fitur
Desain deklaratif: React mengadopsi paradigma deklaratif, yang membuatnya mudah untuk mendeskripsikan aplikasi.
Efisien: React meminimalkan interaksi dengan DOM dengan mensimulasikan DOM.
Fleksibel: React berfungsi baik dengan perpustakaan atau kerangka kerja yang dikenal.
JSX: JSX adalah perpanjangan dari sintaksis JavaScript. Pengembangan React tidak selalu menggunakan JSX, tapi kami merekomendasikannya.
Komponen: Membangun komponen melalui React memudahkan penggunaan kembali kode dan dapat diterapkan dengan baik dalam pengembangan proyek besar.
Aliran data respons satu arah: React mengimplementasikan aliran data respons satu arah, sehingga mengurangi kode duplikat, yang membuatnya lebih sederhana dibandingkan pengikatan data tradisional.
Menguasai React tidak hanya dapat membantu Anda menangani pengembangan aplikasi front-end, tetapi ide pemrogramannya juga dapat diterapkan pada pengembangan Aplikasi asli React Native dan pengembangan back-end rendering sisi server. Jadi, apakah Anda terlibat dalam pengembangan front-end atau tidak, mempelajari React akan sangat membantu dalam peningkatan keterampilan dan pengembangan karier.
Apa itu Desain Semut?
Ant Design adalah komponen UI yang dikembangkan oleh tim Alibaba Ant Financial berdasarkan React. Komponen ini terutama digunakan untuk penggunaan sistem mid-end dan back-end.
Situs web resmi: https://ant.design/index-cn
ciri:
Bahasa interaktif dan gaya visual yang diambil dari produk kelas menengah dan belakang tingkat perusahaan.
Komponen React berkualitas tinggi siap digunakan.
Dibangun menggunakan TypeScript, menyediakan file definisi tipe lengkap.
Sistem alat pengembangan dan desain tautan penuh.
Mulailah
Memperkenalkan Desain Semut
Ant Design adalah sistem desain yang melayani produk tingkat perusahaan. Pustaka komponen adalah implementasi React-nya dan diterbitkan sebagai paket npm untuk diinstal dan digunakan oleh pengembang.
Anda dapat menggunakan npm atau benang untuk pengembangan. Anda tidak hanya dapat melakukan debug dengan mudah di lingkungan pengembangan, Anda juga dapat mengemas dan menerapkannya dengan aman di lingkungan produksi, menikmati banyak manfaat yang dibawa oleh seluruh ekosistem dan rantai alat.
$ npm install antd --save$ benang tambahkan antdDi umi, Anda dapat membuka plug-in antd dengan mengonfigurasi antd di set plug-in umi-plugin-react. Plug-in antd akan membantu Anda memperkenalkan antd dan mengimplementasikan kompilasi sesuai permintaan.
Konfigurasikan di file config.js:
ekspor default { plugin: [ ['umi-plugin-react', { dva: true, // Aktifkan fungsi dva antd: true // Aktifkan fungsi Ant Design}] ]};Uji keterampilan Anda
Selanjutnya, kita mulai menggunakan komponen antd, mengambil komponen tab sebagai contoh, alamat: https://ant.design/components/tabs-cn/ Efek:
Lihat contoh resmi, gunakan, dan buat file MyTabs.js:
import React from 'react'import {Tabs} from 'antd'const TabPane = Tabs.TabPane;const callback = (key) => { console.log(key);}class MyTabs extends React.Component { render() { return ( <Tabs defaultActiveKey="1" onChange={callback}> <TabPane tab="Tab 1" key="1">Isi Tab Pane 1</TabPane> <TabPane tab="Tab 2" key="2" >Isi Tab Pane 2</TabPane> <TabPane tab="Tab 3" key="3">Isi Tab Pane 3</TabPane> </Tabs> ) }}ekspor MyTabs default;Memengaruhi:
Sampai disini kita sudah menguasai penggunaan dasar komponen antd.