5 Kesalahan yang Saya Buat Saat Memulai Proyek React Pertama Saya | Tips CSS – Beragampengetahuan

Anda tahu bagaimana rasanya mengambil bahasa atau kerangka kerja baru. Terkadang ada dokumentasi bagus yang dapat membantu Anda menemukan solusi. Tetapi bahkan dokumentasi terbaik pun tidak dapat mencakup semuanya. Saat Anda menangani sesuatu yang baru, Anda pasti akan menemukan masalah yang tidak memiliki solusi tertulis.

Itulah yang saya rasakan saat pertama kali memulai proyek React – React adalah salah satu kerangka kerja yang memiliki dokumentasi yang sangat baik, apalagi sekarang ada dokumentasi beta. Tapi aku masih berjuang untuk melewatinya. Sudah lama sejak proyek itu, tetapi pelajaran yang saya pelajari darinya masih segar dalam ingatan saya. Meskipun ada banyak tutorial “how-to” React di luar sana, saya ingin membagikan apa yang saya harap saya ketahui saat pertama kali menggunakannya.

Jadi, itulah tujuan dari posting ini – untuk membuat daftar kesalahan yang saya buat sejak awal. Saya harap mereka membantu Anda mempelajari React dengan lebih lancar.

Mulai proyek dengan create-react-app

TL;DR Gunakan Vite atau Parcel.

Create React App (CRA) adalah alat untuk membantu Anda menyiapkan proyek React baru. Ini menciptakan lingkungan pengembangan dengan opsi konfigurasi optimal untuk sebagian besar proyek React. Ini berarti Anda tidak perlu menghabiskan waktu untuk mengonfigurasi apa pun sendiri.

Sebagai seorang pemula, ini sepertinya cara yang baik bagi saya untuk memulai! Tidak ada konfigurasi! Baru mulai pengkodean!

CRA melakukannya dengan menggunakan dua paket populer, webpack dan Babel. webpack adalah pengemas 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 bekerja lebih baik, terutama Vite dan Speedy Web Compiler (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 mengatur proyek React baru, Anda harus memastikan bahwa Anda telah menginstal Node versi 12 atau lebih tinggi, lalu jalankan perintah berikut.

npm create vite

Anda akan diminta untuk memilih nama untuk proyek Anda. Setelah selesai, pilih Bereaksi dari daftar kerangka kerja.Setelah itu, Anda dapat memilih Javascript + SWC atau Typescript + SWC

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

npm i && npm run dev

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

Sesederhana itu.

menggunakan defaultProps Default

TL;DR Gunakan argumen fungsi default sebagai gantinya.

Data dapat diakses melalui metode yang disebut propsMereka ditambahkan ke komponen seperti halnya properti dalam elemen HTML, dan dapat digunakan dalam definisi komponen dengan mendapatkan nilai yang relevan dari objek prop yang diteruskan sebagai parameter.

// 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;

Nilai default jika diinginkan propini 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 props objek dan tetapkan nilai default untuk semuanya dalam parameter fungsi.

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

export default Card;

Ini lebih menguntungkan karena kode dapat dibaca oleh browser modern tanpa transformasi tambahan.

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

Jangan gunakan propTypes

TL; DR Gunakan TypeScript.

Dalam Bereaksi, propTypes properti dapat digunakan untuk memeriksa apakah komponen mengirimkan tipe data yang benar untuk propertinya. Mereka memungkinkan Anda untuk menentukan tipe data yang harus digunakan untuk setiap prop, seperti string, angka, objek, dll. Mereka juga memungkinkan Anda untuk menentukan apakah prop tertentu diperlukan atau tidak.

Dengan cara ini, jika sebuah komponen melewatkan tipe data yang salah atau tidak menyediakan prop yang diperlukan, React akan memunculkan 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 tertentu untuk data yang diteruskan ke komponen. Jadi tentu saja, propTypes Itu ide yang bagus ketika saya pertama kali memulai. Namun, sekarang TypeScript telah menjadi solusi masuk untuk keamanan tipe, saya 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 menangkap lebih banyak kesalahan potensial dan meningkatkan pengalaman pengembangan.

Gunakan komponen kelas

TL; DR: Tulis komponen sebagai fungsi

Komponen kelas dalam React dibuat menggunakan kelas JavaScript.Mereka memiliki struktur yang lebih berorientasi objek dengan beberapa fitur tambahan, seperti 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. Sebagai gantinya, saya merekomendasikan penulisan 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 lebih mudah dibaca, dan tidak ada yang seperti itu this kata kunci dan metode siklus hidup, menjadikannya lebih efisien daripada komponen kelas.

Komponen fungsional juga memiliki keuntungan menggunakan pengait. React 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

TL; DR: Tidak perlu melakukan ini kecuali Anda membutuhkan pengait.

Sejak React 17 dirilis pada tahun 2020, sekarang tidak perlu mengimpor React di bagian atas file saat membuat komponen.

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

Tapi kami harus melakukan ini sebelum React 17 karena transpiler JSX (hal yang mengubah JSX menjadi JavaScript biasa) menggunakan metode yang disebut React.createElement Ini hanya berfungsi saat mengimpor React.Sejak itu, konverter baru telah dirilis yang berfungsi 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);
  // ...
}

Ini adalah kesalahan awal saya!

Mungkin “salah” adalah kata yang terlalu kasar, karena beberapa praktik yang lebih baik telah muncul sejak saat itu. 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 di awal. Setiap kali Anda menggunakan alat baru, ini lebih merupakan perjalanan pembelajaran untuk menggunakannya secara efektif daripada membalik tombol. Tapi ini yang masih saya bawa bertahun-tahun kemudian!

Jika Anda sudah lama menggunakan React, apa saja hal yang ingin Anda ketahui sebelum memulai? Alangkah baiknya memiliki serial untuk membantu orang lain menghindari dilema yang sama.