5 Kesalahan yang Saya Buat Saat Memulai Proyek React Pertama Saya

Anda tahu bagaimana rasanya mengambil bahasa atau kerangka kerja baru. Terkadang ada dokumentasi yang bagus untuk membantu Anda menemukannya. Tetapi bahkan dokumentasi terbaik pun tidak mencakup semuanya. Dan saat Anda bekerja dengan sesuatu yang baru, Anda pasti akan menemukan masalah yang tidak memiliki solusi tertulis.

Begitulah bagi saya saat pertama kali membuat proyek React — dan React adalah salah satu kerangka kerja dengan dokumentasi yang luar biasa, terutama sekarang dengan dokumen beta. Tapi aku masih berjuang melewatinya. Sudah cukup lama sejak proyek itu, tetapi pelajaran yang saya peroleh darinya masih segar dalam ingatan saya. Dan meskipun ada banyak tutorial "how-to" React di luar sana, saya pikir saya akan membagikan apa yang saya harap saya ketahui saat pertama kali menggunakannya.

Jadi, itulah artikel ini — daftar kesalahan awal yang saya buat. Saya harap mereka membantu membuat pembelajaran Bereaksi jauh lebih lancar untuk Anda.

Menggunakan create-react-app untuk memulai proyek

TL;DR Gunakan Vite atau Parcel.

Buat Aplikasi Bereaksi (CRA) adalah alat yang membantu Anda menyiapkan proyek React baru. Ini menciptakan lingkungan pengembangan dengan opsi konfigurasi terbaik untuk sebagian besar proyek React. Ini berarti Anda tidak perlu menghabiskan waktu untuk mengonfigurasi apa pun sendiri.

Sebagai seorang pemula, ini sepertinya cara yang bagus untuk memulai pekerjaan saya! Tidak ada konfigurasi! Mulai saja pengkodean!

CRA menggunakan dua paket populer untuk mencapai ini, webpack dan Babel. webpack adalah bundel web yang mengoptimalkan semua aset dalam proyek Anda, seperti JavaScript, CSS, dan gambar. Babel adalah alat yang memungkinkan Anda menggunakan fitur JavaScript yang lebih baru, meskipun beberapa browser tidak mendukungnya.

Keduanya bagus, tetapi ada alat baru yang dapat melakukan pekerjaan dengan lebih baik, khususnya Tinggal dan Penyusun Web Cepat (SWC).

Alternatif baru dan lebih baik ini lebih cepat dan lebih mudah dikonfigurasi daripada webpack dan Babel. Ini membuatnya lebih mudah untuk menyesuaikan konfigurasi yang sulit dilakukan di create-react-app tanpa mengeluarkan.

Untuk menggunakan keduanya saat menyiapkan proyek React baru, Anda harus memastikan bahwa Anda memilikinya Node versi 12 atau lebih tinggi diinstal, kemudian jalankan perintah berikut.

npm create vite

Anda akan diminta untuk memilih nama untuk proyek Anda. Setelah Anda melakukannya, pilih Bereaksi dari daftar kerangka kerja. Setelah itu, Anda dapat memilih salah satunya Javascript + SWC or Typescript + SWC

Maka Anda harus mengubah direktori cd ke dalam proyek Anda dan jalankan perintah berikut;

npm i && npm run dev

Ini harus menjalankan server pengembangan untuk situs Anda dengan URL localhost:5173

Dan sesederhana itu.

Menggunakan defaultProps untuk nilai default

TL;DR Gunakan parameter fungsi default sebagai gantinya.

Data dapat diteruskan ke komponen React melalui sesuatu yang disebut props. Ini ditambahkan ke komponen seperti atribut dalam elemen HTML dan dapat digunakan dalam definisi komponen dengan mengambil nilai yang relevan dari objek prop yang diteruskan sebagai argumen.

// App.jsx
export default function App() { return <Card title="Hello" description="world" />
} // Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> );
} export default Card;

Jika nilai default diperlukan untuk a prop, yang defaultProp properti dapat digunakan:

// Card.jsx
function Card(props) { // ...
} Card.defaultProps = { title: 'Default title', description: 'Desc',
}; export default Card;

Dengan JavaScript modern, dimungkinkan untuk merusak struktur props objek dan tetapkan nilai default untuk semuanya dalam argumen fungsi.

// Card.jsx
function Card({title = "Default title", description= "Desc"}) { return ( <div> <h1>{title}</h1> <p>{description}</p> </div> )
} export default Card;

Ini lebih disukai sebagai kode yang dapat dibaca oleh browser modern tanpa perlu transformasi tambahan.

Sayangnya, defaultProps memang memerlukan beberapa transformasi untuk dibaca oleh browser karena JSX (JavaScript XML) tidak didukung di luar kotak. Ini berpotensi mempengaruhi kinerja aplikasi yang menggunakan banyak defaultProps.

Jangan gunakan propTypes

TL; DR Gunakan TypeScript.

Di Bereaksi, file propTypes properti dapat digunakan untuk memeriksa apakah suatu komponen dilewatkan dengan tipe data yang benar untuk propertinya. Mereka memungkinkan Anda untuk menentukan jenis data yang harus digunakan untuk setiap prop seperti string, angka, objek, dll. Mereka juga memungkinkan Anda untuk menentukan apakah sebuah prop diperlukan atau tidak.

Dengan cara ini, jika komponen melewatkan tipe data yang salah atau jika prop yang diperlukan tidak disediakan, maka React akan menampilkan kesalahan.

// Card.jsx
import { PropTypes } from "prop-types"; function Card(props) { // ...
} Card.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string,
}; export default Card;

TypeScript memberikan tingkat keamanan tipe dalam data yang diteruskan ke komponen. Begitu yakin, propTypes adalah ide yang baik kembali ketika saya mulai. Namun, sekarang TypeScript telah menjadi solusi masuk untuk keamanan tipe, saya akan sangat menyarankan untuk menggunakannya di atas hal lain.

// Card.tsx
interface CardProps { title: string, description?: string,
} export default function Card(props: CardProps) { // ...
}

TypeScript adalah bahasa pemrograman yang dibangun di atas JavaScript dengan menambahkan pemeriksaan tipe statis. TypeScript menyediakan sistem tipe yang lebih kuat, yang dapat menangkap lebih banyak potensi bug dan meningkatkan pengalaman pengembangan.

Menggunakan komponen kelas

TL; DR: Tulis komponen sebagai fungsi

Komponen kelas dalam React dibuat menggunakan kelas JavaScript. Mereka memiliki struktur yang lebih berorientasi objek dan juga beberapa fitur tambahan, seperti kemampuan untuk menggunakan this kata kunci dan metode siklus hidup.

// Card.jsx
class Card extends React.Component { render() { return ( <div> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </div> ) }
} export default Card;

Saya lebih suka menulis komponen dengan kelas daripada fungsi, tetapi kelas JavaScript lebih sulit dipahami oleh pemula dan this bisa sangat membingungkan. Sebaliknya, saya akan merekomendasikan menulis komponen sebagai fungsi:

// Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> )
} export default Card;

Komponen fungsi hanyalah fungsi JavaScript yang mengembalikan JSX. Mereka jauh lebih mudah dibaca, dan tidak memiliki fitur tambahan seperti this kata kunci dan metode siklus hidup yang membuatnya lebih berkinerja daripada komponen kelas.

Komponen fungsi juga memiliki keunggulan menggunakan pengait. Bereaksi Hooks memungkinkan Anda menggunakan status dan fitur React lainnya tanpa menulis komponen kelas, membuat kode Anda lebih mudah dibaca, dipelihara, dan digunakan kembali.

Mengimpor React secara tidak perlu

TL; DR: Tidak perlu melakukannya, kecuali jika Anda membutuhkan pengait.

Sejak React 17 dirilis pada tahun 2020, sekarang Anda tidak perlu lagi mengimpor React di bagian atas file setiap kali Anda membuat komponen.

import React from 'react'; // Not needed!
export default function Card() {}

Tapi kami harus melakukannya sebelum React 17 karena transformator JSX (hal yang mengubah JSX menjadi JavaScript biasa) menggunakan metode yang disebut React.createElement itu hanya akan berfungsi saat mengimpor React. Sejak itu, sebuah transformator baru telah dirilis yang dapat mengubah JSX tanpa createElement Metode.

Anda masih perlu mengimpor React untuk menggunakan hook, fragmen, dan fungsi atau komponen lain yang mungkin Anda perlukan dari pustaka:

import { useState } from 'react'; export default function Card() { const [count, setCount] = useState(0); // ...
}

Itu adalah kesalahan awal saya!

Mungkin "kesalahan" adalah kata yang terlalu kasar karena beberapa praktik yang lebih baik muncul belakangan. Namun, saya melihat banyak contoh di mana cara "lama" dalam melakukan sesuatu masih digunakan secara aktif dalam proyek dan tutorial lainnya.

Sejujurnya, saya mungkin membuat lebih dari lima kesalahan saat memulai. Setiap kali Anda meraih alat baru, itu akan lebih seperti perjalanan belajar untuk menggunakannya secara efektif, daripada membalik tombol. Tapi ini adalah hal-hal yang masih saya bawa bertahun-tahun kemudian!

Jika Anda sudah lama menggunakan React, apa saja hal yang ingin Anda ketahui sebelum memulai? Akan sangat bagus untuk mendapatkan koleksi untuk membantu orang lain menghindari pergumulan yang sama.

• Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. Akses Di Sini.
• Sumber: https://css-tricks.com/5-mistakes-starting-react/