Bagaimana memulai dengan React

React adalah pustaka javascript yang sangat populer yang terutama digunakan untuk membuat aplikasi web satu halaman. Ada begitu banyak hal yang dapat Anda lakukan dengan React, dan begitu banyak tutorial yang tersedia secara online, tetapi di sini saya hanya akan berbicara tentang langkah-langkah yang harus diikuti untuk beralih dari nol ke komponen reaksi pertama Anda.

Sebelum memulai

Anda memerlukan NodeJs versi terbaru, Anda dapat menginstal versi terbaru dari nodesource .

Juga jika Anda tidak terbiasa dengan sintaks JSX, periksa tautan ini .

Menyiapkan lingkungan pengembangan

Anda dapat langsung mencoba React, cukup dengan menyertakan tag skrip di halaman web Anda yang memuat file .js yang siap digunakan, tetapi saya rasa itu bukan cara yang tepat, karena Anda tidak ingin mencobanya begitu saja. , Anda ingin menggunakannya.

Dengan menggunakan alat create-react-app, Anda dapat mengatur boilerplate, yang memungkinkan Anda melihat seperti apa tampilan aplikasi reaksi dasar, dan kompiler langsung yang menunjukkan output kode Anda segera setelah Anda menyimpan file.

Setelah semuanya terinstal, Anda tinggal masuk ke folder aplikasi, dan Anda mengetik: npm start.

Memahami komponen dan props

Tujuan dari komponen adalah untuk membuat sesuatu untuk ditampilkan setiap kali peristiwa tertentu terjadi. Peristiwa yang memicu rendering ulang harus didefinisikan, kita berbicara tentang "mengubah status" suatu komponen.

props adalah objek dengan properti yang diteruskan ke fungsi komponen melalui variabel sebagai atribut html.

Pahami Kait

Kelas React pertama kali digunakan untuk mendefinisikan komponen, tetapi baru-baru ini menjadi mungkin untuk menggunakan fungsi untuk mendefinisikannya, dan kait adalah yang memungkinkan Anda untuk mengakses berbagai fungsi React di dalam fungsi-fungsi ini.

Status adalah fungsionalitas paling dasar, jadi kait pertama yang Anda perlukan adalah useState .

Komponen pertama Anda

Temukan file app.js (atau app.tsx jika Anda menggunakan TypeScript) di folder src, dan buka: fungsi App() akan menjadi komponen pertama Anda. Hapus apa yang ada di dalam return(), dan juga apa yang ada di atasnya, lalu mari kita coba sesuatu yang sangat sederhana:

Masukkan kode ini ke dalam return()

<button onClick={showMessage}>React!</button>

function showMessage(){
    console.log("It works!")
}

ReactDOM.render() adalah apa yang memungkinkan React untuk "menulis" komponen di halaman web, Anda akan menemukannya di dalam index.js (atau index.tsx).

Untuk memahami perubahan status, sebagian besar tutorial menunjukkan cara membuat penghitung yang meningkatkan nilainya setiap kali Anda mengklik tombol.

Plugin pertama Anda

Siapa pun dapat membuat pengaitnya sendiri, dan banyak pengait khusus tersedia sebagai "plugin". Salah satunya adalah react-hook-form , yang menangani tampilan dan validasi formulir,

Di RHF, useState digantikan oleh useForm , yang berisi fungsionalitas siap pakai yang didokumentasikan dengan sangat baik.