React.js: Apa yang Saya Pelajari daripada Projek Pertama Saya

asalnya diterbitkan ke Medium untuk JavaScript dalam bahasa Inggeris biasa pada 2 April, 2023

Sejak beberapa minggu yang lalu, saya telah mula belajar satu lagi kemahiran yang sangat dicari dalam dunia pembangunan web: React.js. Rasa sekurang -kurangnya agak selesa dengan banyak perkara dalam JavaScript, dan pada perintah beberapa mentor saya, saya fikir ini adalah langkah yang paling logik untuk diambil untuk mencapai matlamat kerjaya saya. Dalam artikel ini, saya akan berkongsi dengan anda beberapa perkara yang saya pelajari mengenainya sebagai pemain baru.

Untuk beberapa konteks, saya hanya bekerja dengan komponen kelas dalam React, tidak pernah dengan komponen berfungsi saya tidak akan menerangkan perbezaan di sini, kerana saya tidak tahu apa -apa tentang komponen berfungsi sekarang. Saya mungkin akan menulis artikel suatu hari nanti yang membezakan kedua -dua jenis. Walaupun pada masa saya menulis artikel ini, disyorkan oleh semua orang untuk menggunakan komponen berfungsi, tetapi masih membayar untuk mengetahui bagaimana komponen kelas berfungsi, kerana projek React yang lebih tua boleh menggunakannya.

Untuk projek pertama saya, saya ditugaskan untuk membina kalkulator hutang, di mana pengguna boleh memasukkan prinsipal hutang, kadar faedah, berapa banyak yang mereka mahu bayar. Terdapat beberapa ketetapan untuk medan input ini, tetapi anda boleh membaca tentang orang -orang di Readme.md projek (pautan repo GitHub adalah pada akhir artikel), atau anda boleh mencuba diri anda untuk melihat bagaimana ia berfungsi. Sebaik sahaja pengguna 'mengemukakan' pembayaran, item sejarah pembayaran akan muncul, memberikan butiran mengenai prinsipal, faedah, & baki. Kecuali pengguna membayar keseluruhan hutang dalam pembayaran pertama, semua medan input kecuali medan pembayaran dilumpuhkan apabila pembayaran pertama dibuat; Sekiranya keseluruhan hutang dibayar, keseluruhan borang dilumpuhkan, & pengguna boleh melihat sejarah pembayaran akhir, bersama-sama dengan mesej bahawa mereka bebas hutang.

Saya akan memberikan jawapan kepada soalan -soalan berikut yang saya ada mengenai bertindak balas semasa mula belajar mengenainya:

apa itu react.js, dan mengapa ia harus digunakan?

bagaimana saya mula membina aplikasi bertindak balas?

bagaimana rupa komponen biasa?

bagaimana saya boleh berkongsi maklumat antara komponen?

bolehkah saya membuat sesuatu secara kondusif dalam reaksi?

bagaimana saya boleh menggunakan aplikasi React?

---

Apa itu React.js, dan mengapa ia harus digunakan?

React adalah perpustakaan JS front-end (bukan rangka kerja?)) Yang menjadikan projek berskala besar lebih mudah. Ia pada asalnya dibangunkan di Facebook lebih lanjut di sini, & kini dikekalkan, tentu saja, oleh Meta, yang juga menggunakannya untuk Instagram. Ia kini digunakan secara meluas di banyak laman web di seluruh Interwebs, seperti Airbnb, BBC, Imgur, & Netflix, antara yang lain.

Kod React terdiri daripada komponen yang boleh diguna semula, yang mesti terletak di dalam folder SRC, dan namanya mesti dalam bentuk unta. Banyak komponen ditulis dalam JSX (JavaScript Syntax Extension), yang merupakan sejenis campuran antara HTML & JS. Saya panggil komponen ini 'boleh diguna semula' kerana mereka mempunyai struktur yang sama & maklumat yang berbeza boleh diserahkan kepada mereka & dipaparkan di laman web ini. Komponen juga boleh ditulis dalam JS biasa. Maklumat yang berbeza, seperti maklumat akaun pengguna, kemudiannya boleh diserahkan kepada komponen -komponen ini & mereka semua akan dipaparkan dengan cara yang sama.

Bagaimana saya mula membina aplikasi React?

Untuk memulakan aplikasi React, masukkan arahan berikut ke terminal:

npx create-react-app project-name
cd project-name
npm start

NPM Mula akan membuka projek dalam penyemak imbas lalai anda di port kosong.
Ia biasanya mengambil masa beberapa minit untuk semua yang akan ditubuhkan, jadi mungkin melakukan sesuatu yang produktif dalam masa yang sama, seperti memuat naik tarian bodoh ke Tiktok, atau mengetahui rumah Hogwarts yang akan disusun (ya, saya membuat kuiz itu).

Dokumentasi rasmi kini mengesyorkan menggunakan rangka kerja untuk memulakan aplikasi React. Saya belum menggunakannya, tetapi anda boleh membaca lebih lanjut mengenai perkara itu di sini.

Seperti apa komponen biasa?

seperti yang saya nyatakan, saya hanya bekerja dengan komponen kelas setakat ini, jadi saya hanya akan menutupi mereka dalam artikel ini. Komponen yang saya gunakan untuk projek pertama saya agak besar untuk diletakkan di sini, jadi sila lihat App.js & The PaymentHistory.jsx Files dalam folder SRC di repositori yang dikaitkan pada akhir artikel untuk melihatnya dalam tindakan. Walau bagaimanapun, komponen kelas biasa mungkin kelihatan seperti ini:

// Import React & ComponentOne:
import React from "react";
import ComponentOne from "./ComponentOne;

class App extends React.Component {
  /* Add props as params here, in case state values 
  are to be shared with another component */
  constructor(props) {
    super(props);

    // Initialize state values:
    this.state = {
      stateValue1: '',
      stateValue2: ''
    }
  }

  // Add some methods:
  changeFontColor = () => {
    // do something
  }
  changeFont= () => {
    // do something
  }

  // Determine what the component should render:
  render() {
    return (
      <div>
        <p key="pgHeader" onClick={this.changeFontColor}>Header</p>
        <p key="pgContent" onClick={this.changeFont}>Content</p>
        <p key="pgFooter">Footer</p>
      </div>
      // Give ComponentOne access to method changeFont by passing it in as a prop:
      <ComponentOne changeFont={this.changeFont} />
    )
  }
}
export default App;

Perhatikan bahawa saya menambah nilai utama kepada setiap & lt; p & gt; elemen di dalam & lt; div & gt;. Ini tidak semestinya penting untuk keupayaan aplikasi untuk berfungsi dengan baik, tetapi amalan terbaik untuk memasukkannya. Nilai kunci yang unik harus ditambah kepada setiap anak elemen induk di dalam pulangan ().

Seperti kelas JS biasa, perkara pertama yang harus datang ialah pembina (), diikuti oleh Super (). Jika kita ingin berkongsi, sebagai contoh, nilai atau kaedah negeri dari satu kelas ke kelas yang lain, kita perlu lulus dalam alat peraga, pendek untuk 'sifat', sebagai parameter untuk kedua -dua pembina () & super ().

Kemudian, kita harus memulakan nilai keadaan. Dalam projek kalkulator hutang saya, saya perlu menggunakan pelbagai nilai negeri untuk mengesan pelbagai jumlah wang yang berkaitan dengan pembayaran, prinsipal, faedah yang terhutang, & keseimbangan, tetapi saya juga menggunakan pasangan yang menentukan bagaimana atau jika perkara -perkara tertentu harus diberikan. Begini bagaimana saya menggunakan nilai keadaan ISDebtFree untuk membolehkan medan input apabila ia sama dengan palsu, & melumpuhkannya apabila ia benar:

npx create-react-app project-name
cd project-name
npm start

Seperti yang anda lihat, kami boleh menukar nilai keadaan dalam Komponen Kelas dengan menggunakan fungsi setState. Perlu diingat bahawa setState berjalan secara tidak segerak, jadi sebarang fungsi yang memerlukan nilai keadaan dikemas kini boleh dimasukkan ke dalam panggilan balik. Walau bagaimanapun, anda harus memastikan panggilan balik ini semudah mungkin, atau anda akan berakhir dalam dunia 'Callback Neraka' yang mengelirukan, jadi ikuti Prinsip Tanggungjawab Tunggal sebaik mungkin semasa mencipta kaedah dalam komponen. Anda juga harus tahu bahawa setiap kali keadaan ditukar dalam komponen, komponen itu dipaparkan semula.
DOM tidak boleh dimanipulasi secara langsung di dalam kaedah. Melakukannya dipanggil 'antipattern'. Perhatikan bagaimana saya tidak mengakses elemen DOM secara langsung dengan menetapkan atribut yang dilumpuhkan dalam kaedah, seperti:

// Import React & ComponentOne:
import React from "react";
import ComponentOne from "./ComponentOne;

class App extends React.Component {
  /* Add props as params here, in case state values 
  are to be shared with another component */
  constructor(props) {
    super(props);

    // Initialize state values:
    this.state = {
      stateValue1: '',
      stateValue2: ''
    }
  }

  // Add some methods:
  changeFontColor = () => {
    // do something
  }
  changeFont= () => {
    // do something
  }

  // Determine what the component should render:
  render() {
    return (
      <div>
        <p key="pgHeader" onClick={this.changeFontColor}>Header</p>
        <p key="pgContent" onClick={this.changeFont}>Content</p>
        <p key="pgFooter">Footer</p>
      </div>
      // Give ComponentOne access to method changeFont by passing it in as a prop:
      <ComponentOne changeFont={this.changeFont} />
    )
  }
}
export default App;

Sebaliknya, bahagian elemen HTML sebagai balasan() hendaklah ditetapkan kepada nilai keadaan, yang boleh berubah berdasarkan pelaksanaan kaedah dalam komponen, seperti yang saya tunjukkan kepada anda dalam blok kod sebelum yang betul-betul di atas perenggan ini.

Satu lagi perkara yang perlu diambil perhatian ialah ungkapan return() komponen hendaklah sesingkat mungkin, jadi elakkan meletakkan sebarang jenis ungkapan matematik di sana, serta kefungsian yang ditakrifkan di sini. Saya melakukan kesilapan ini pada mulanya apabila saya cuba menetapkan nilai min & maks dalam medan pembayaran, yang berubah berdasarkan nilai keadaan, yang berubah apabila nombor dimasukkan ke dalam medan Prinsipal & Kadar Faedah, & apabila pembayaran dibuat.

Saya sebaliknya membuat kaedah untuk setiap nilai ini, kemudian tetapkan nilai min & maks kepada kaedah yang dikembalikan. Kaedah pertama di bawah berfungsi, tetapi ia bukanlah cara yang baik untuk melakukannya dalam React, kerana, sekali lagi, bahagian return() komponen hendaklah sesingkat & mudah dibaca yang mungkin.

// Initialize isDebtFree:
// Should go inside the constructor, but left out here for brevity
this.state = {
  // other state values
  isDebtFree: false
  // other state values
}

// Change isDebtFree to true if payment equals the total remaining balance
// This method will be called upon payment submission
updateValues = () => {
  // other stuff
  if (newBalance === 0) {
    this.setState({
      isDebtFree: true
    })
   }
}

// Set the disabled property of an input field to equal isDebtFree:
render() {
  return (
    <input disabled={this.state.isDebtFree} />
  )
}

Cara di bawah lebih sesuai dengan semangat React:

// DO NOT ACCESS DOM ELEMENTS DIRECTLY INSIDE A METHOD!
updateValues = () => {
  if (newBalance === 0) {
  document.getElementById('payment').disabled = true;
 }
}

Bagaimanakah saya boleh berkongsi maklumat antara komponen?

Seperti yang anda boleh lihat dalam blok pengekodan pertama dalam artikel ini, saya menghantar kaedah dari satu komponen ke komponen lain menggunakan prop. Sekarang, mari kita lihat bagaimana komponen kedua ini boleh mengakses perkara yang kami hantar kepadanya daripada Apl dalam blok kod pertama di atas. Beginilah rupa bahagian itu, sekiranya anda terlalu malas untuk menatal ke atas untuk melihatnya:

// You could put math operations directly inside elements in return()...
// ... but this is not the best way
render() {
  return (
    <input
      type="number"
      min={
        this.state.principal / 100 +
            (this.state.principal * Number(this.state.interestRate)) / 100 / 12;
      }
      max = {
        this.state.principal +
            (this.state.principal * Number(this.state.interestRate)) / 100 / 12;
      }
    />
  )
}

Sekarang, dalam ComponentOne, mari import kaedah ini daripada Apl & gunakannya:

// A BETTER WAY
// Create 2 methods; one returns the min payment possible, the other the max:
getMinPmt = () => {
  let minPmt =
    this.cleanValue(this.state.principal / 100) +
    this.cleanValue(
      (this.state.principal * Number(this.state.interestRate)) / 100 / 12
    );
  let totalBalance =
    this.state.principal +
    this.cleanValue(
      (this.state.principal * Number(this.state.interestRate)) / 100 / 12
    );
  if (totalBalance <= 100 && totalBalance > 0) {
    minPmt = totalBalance;
  }
  return this.cleanValue(minPmt);
};
getMaxPmt = () => {
  let maxPmt =
    this.state.principal + 
    this.cleanValue(
      (this.state.principal * Number(this.state.interestRate)) / 100 / 12
    );
  return this.cleanValue(maxPmt);
};

// Set the min & max values of the input to what the respective method returns:
render() {
  return (
    <input
      type="number"
      min={this.getMinPmt()}
      max={this.getMaxPmt()}
    />
  )
}

Jadi, selepas mengakses kaedah changeFont, kami memanggilnya apabila h1 yang kami paparkan diklik.

Bolehkah saya membuat perkara dalam keadaan bertindak balas?

ya! React adalah mengenai perkara -perkara yang membuat keadaan. Terdapat beberapa cara untuk melakukannya. Anda boleh melakukan ini dengan kaedah, kemudian tetapkan nilai elemen sebagai balasan () untuk sama. Jadi, mari kita gunakan contoh kalkulator hutang sekali lagi. Katakan kami mahu memaparkan mesej "Anda bebas hutang!" Sekiranya nilai keadaan baki adalah 0, & butang yang mendorong pengguna untuk membuat pembayaran lain jika baki lebih dari 0. Terdapat beberapa cara yang dapat kita lakukan ini.

Mari kita menetapkan nilai elemen ini kepada kaedah yang dikembalikan, berdasarkan syarat -syarat:

npx create-react-app project-name
cd project-name
npm start

Menggunakan kaedah mungkin berfaedah, kerana ia membolehkan kita menyimpan pulangan () lebih ringkas. Kami juga boleh menambah keadaan lebih kompleks, seperti dalam fungsi JS biasa.

kita juga boleh menggunakan pengendali ternary di dalam pulangan () untuk mencapai perkara yang sama:

// Import React & ComponentOne:
import React from "react";
import ComponentOne from "./ComponentOne;

class App extends React.Component {
  /* Add props as params here, in case state values 
  are to be shared with another component */
  constructor(props) {
    super(props);

    // Initialize state values:
    this.state = {
      stateValue1: '',
      stateValue2: ''
    }
  }

  // Add some methods:
  changeFontColor = () => {
    // do something
  }
  changeFont= () => {
    // do something
  }

  // Determine what the component should render:
  render() {
    return (
      <div>
        <p key="pgHeader" onClick={this.changeFontColor}>Header</p>
        <p key="pgContent" onClick={this.changeFont}>Content</p>
        <p key="pgFooter">Footer</p>
      </div>
      // Give ComponentOne access to method changeFont by passing it in as a prop:
      <ComponentOne changeFont={this.changeFont} />
    )
  }
}
export default App;

Jika logik cukup mudah untuk dinyatakan dengan pengendali ternary & ia masih mudah dibaca, teruskan dan gunakan satu; Jika tidak, ia sentiasa boleh diterima untuk menggunakan kaedah.

Sebagai contoh, jika anda mempunyai syarat yang mudah & tidak mahu memaparkan apa -apa jika keadaan tidak dipenuhi, anda boleh melakukan ini:

// Initialize isDebtFree:
// Should go inside the constructor, but left out here for brevity
this.state = {
  // other state values
  isDebtFree: false
  // other state values
}

// Change isDebtFree to true if payment equals the total remaining balance
// This method will be called upon payment submission
updateValues = () => {
  // other stuff
  if (newBalance === 0) {
    this.setState({
      isDebtFree: true
    })
   }
}

// Set the disabled property of an input field to equal isDebtFree:
render() {
  return (
    <input disabled={this.state.isDebtFree} />
  )
}

Jika this.state.TotalBalance ketat sama dengan 0, maka mesej akan dipaparkan. Jika tidak, maka tiada apa yang akan dipaparkan.

Bagaimana saya boleh menggunakan aplikasi React?

Saya mengerahkan projek React pertama saya melalui Netlify, yang mana saya memberikan akses kepada repositori GitHub projek. Sebelum menggunakan, anda harus menjalankan NPM Run Build untuk membina aplikasi untuk pengeluaran ke folder Build. Ia berkas bertindak balas dalam mod pengeluaran dan mengoptimumkan binaan untuk prestasi terbaik. Anda boleh mengemas kini laman web ini kerana anda biasanya akan laman web lain.

Dalam fail index.html anda, anda mungkin perlu menukar beberapa laluan, termasuk URL Favicon, dalam & lt; kepala & gt;. Anda hanya perlu menggantikan '%public_url%' dengan ./. Cari arahan seperti ini di & lt; kepala & gt ;:

---

Jadi ada beberapa perkara yang saya pelajari semasa membina projek React pertama saya. Pengetahuan saya tentang React tidak menjalankan semua yang mendalam, jadi jika anda mempunyai sebarang cadangan untuk saya atau sebarang maklumat untuk ditambahkan, sila tambahkan komen. Jika anda mendapati ia membantu, sila tinggalkan komen yang bagus atau tinggalkan reaksi sejenis, & jika anda fikir orang lain boleh mendapat manfaat daripada membaca ini, lulus kepada mereka.

Terima kasih kerana membaca!

Dokumentasi React.js penuh

Projek pertama saya dalam tindakan
Repositori GitHub Projek

Atas ialah kandungan terperinci React.js: Apa yang Saya Pelajari daripada Projek Pertama Saya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!