Apakah tindak balas? Apakah Reka Bentuk Semut?

React ialah rangka kerja pembangunan JavaScript yang dilancarkan oleh Facebook untuk membina antara muka pengguna Ia digunakan terutamanya untuk membina UI, menjadikannya mudah untuk mencipta UI interaktif. Ant Design ialah komponen UI yang dibangunkan oleh pasukan Alibaba Ant Financial berdasarkan React Ia digunakan terutamanya untuk sistem pertengahan dan belakang Ia dibina menggunakan TypeScript dan menyediakan fail definisi jenis yang lengkap.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi react18, komputer Dell G3.

Apakah tindak balas?

React ialah perpustakaan JavaScript untuk membina antara muka pengguna Ia berasal sebagai projek dalaman di Facebook Kerana syarikat itu tidak berpuas hati dengan semua rangka kerja JavaScript MVC di pasaran, ia memutuskan untuk tulis Setnya sendiri, digunakan untuk menyediakan tapak web Instagram. Selepas membuatnya, saya mendapati bahawa set perkara ini sangat berguna, jadi ia adalah sumber terbuka pada Mei 2013.

React ialah perpustakaan JavaScript deklaratif, cekap dan fleksibel untuk membina antara muka pengguna. React membolehkan anda menggabungkan coretan kod yang pendek dan bebas ke dalam antara muka UI yang kompleks. Coretan kod ini dipanggil "komponen".

Oleh kerana idea reka bentuk React sangat unik, ia merupakan inovasi revolusioner, mempunyai prestasi cemerlang, dan logik kodnya sangat mudah. Oleh itu, semakin ramai orang memberi perhatian dan menggunakannya, memikirkan bahawa ia mungkin alat arus perdana untuk pembangunan web pada masa hadapan.

React ialah perpustakaan JavaScript sumber terbuka yang menyediakan paparan HTML untuk data. Paparan tindak balas biasanya dipaparkan menggunakan komponen yang mengandungi komponen lain yang dinyatakan dalam teg HTML tersuai. React menyediakan pengaturcara dengan model di mana komponen kanak-kanak tidak boleh menjejaskan komponen luar secara langsung, kemas kini yang cekap pada dokumen HTML apabila data berubah dan pemisahan bersih antara komponen dalam aplikasi satu halaman moden.

React menjadikan mencipta UI interaktif menjadi mudah. Reka bentuk paparan ringkas untuk setiap keadaan dalam apl anda supaya React boleh mengemas kini dan memaparkan komponen dengan cekap dengan betul apabila data berubah. Logik komponen ditulis dalam JavaScript dan bukannya templat, jadi anda boleh menghantar data dengan mudah di sekeliling apl anda dan memastikan keadaan berasingan daripada DOM.

Ciri React

• Reka bentuk deklaratif: React mengamalkan paradigma deklaratif, yang boleh menerangkan aplikasi dengan mudah.

• Cekap: React meminimumkan interaksi dengan DOM dengan mensimulasikan DOM.

• Fleksibel: React dimainkan dengan baik dengan perpustakaan atau rangka kerja yang diketahui.

• JSX: JSX ialah lanjutan sintaks JavaScript. JSX tidak diperlukan untuk pembangunan React, tetapi ia disyorkan.

• Komponen: Membina komponen melalui React menjadikannya lebih mudah untuk menggunakan semula kod dan boleh digunakan dengan baik dalam pembangunan projek besar.

• Aliran data tindak balas sehala: React melaksanakan aliran data tindak balas sehala, dengan itu mengurangkan kod berulang, itulah sebabnya ia lebih mudah daripada pengikatan data tradisional.

Menguasai React bukan sahaja boleh membantu anda menangani pembangunan aplikasi bahagian hadapan, tetapi idea pengaturcaraannya juga boleh digunakan pada pembangunan bahagian belakang pembangunan Apl asli React Native dan bahagian pelayan rendering. Jadi sama ada anda terlibat dalam pembangunan bahagian hadapan atau tidak, pembelajaran React akan sangat membantu untuk meningkatkan kemahiran dan pembangunan kerjaya anda.

Apakah Reka Bentuk Semut?

Ant Design ialah komponen UI yang dibangunkan oleh pasukan Alibaba Ant Financial berdasarkan React dan digunakan terutamanya untuk sistem pertengahan dan belakang.

Tapak web rasmi: https://ant.design/index-cn

Ciri:

• Dipetik daripada bahasa interaktif dan gaya visual produk pertengahan dan belakang peringkat perusahaan.

• Komponen React berkualiti tinggi di luar kotak.

• Dibina menggunakan TypeScript, menyediakan fail definisi jenis lengkap.

• Pembangunan pautan penuh dan sistem alat reka bentuk.

Mulakan

• Memperkenalkan Ant Desig

Reka Bentuk Semut Ya Sistem reka bentuk yang menyediakan produk peringkat perusahaan, perpustakaan komponen ialah pelaksanaan Reactnya dan antd diterbitkan sebagai pakej npm untuk dipasang dan digunakan oleh pembangun.

Anda boleh menggunakan npm atau benang untuk pembangunan Bukan sahaja anda boleh menyahpepijat dengan mudah dalam persekitaran pembangunan, tetapi anda juga boleh membungkus dan menggunakannya dengan selamat dalam persekitaran pengeluaran, menikmati banyak faedah yang dibawa oleh keseluruhan ekosistem dan. rantai alat.

$ npm install antd --save
$ yarn add antd

Dalam umi, anda boleh membuka pemalam antd dengan mengkonfigurasi antd dalam set pemalam umi-plugin-react Pemalam antd akan membantu anda memperkenalkan antd dan melaksanakan atas permintaan kompilasi.

Konfigurasikan dalam fail config.js:

export default {
    plugins: [
        ['umi-plugin-react', {
            dva: true, // 开启dva功能
            antd: true // 开启Ant Design功能
        }]
    ]
};

• Cuba dahulu

Seterusnya, kita mula Gunakan antd komponen, ambil komponen tab sebagai contoh, alamat: https://ant.design/components/tabs-cn/
Kesan:

Rujuk rasmi Gunakan contoh berikut untuk mencipta fail 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">Content of Tab Pane 1</TabPane>
                <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
                <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
            </Tabs>
        )
    }
}
export default MyTabs;

Kesan:

Pada ketika ini, kami telah menguasai penggunaan asas komponen antd.

[Cadangan berkaitan: Tutorial video Redis]

Atas ialah kandungan terperinci Apakah tindak balas? Apakah Reka Bentuk Semut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!