30 seconds of react native

30 detik reaksi-asli

Koleksi cuplikan bereaksi bermanfaat yang dapat Anda pahami dalam 30 detik atau kurang.

• Gunakan Ctrl + F atau Command + F untuk mencari cuplikan.
• Kontribusi Selamat Datang, Baca Panduan Kontribusi.
• Cuplikan ditulis dalam React 16.8.3 , react-native 0,59,9 , menggunakan kait .

Catatan : Repo ini tidak memiliki afiliasi dengan 30 detik kode asli, didasarkan pada 30 detik bereaksi tetapi tidak memiliki afiliasi dengan itu sama sekali

Prasyarat

Untuk mengimpor cuplikan ke dalam proyek Anda, Anda harus mengimpor React dan copy-paste kode JavaScript komponen seperti ini:

 import React from 'react' ;

function MyComponent ( props ) {
  /* ... */
}

Jika ada gaya yang terkait dengan komponen Anda, copy-paste ke file baru dengan nama yang sama dan ekstensi yang sesuai, maka impor seperti ini:

 import './MyComponentStyle' ; 

Proyek terkait

• 30 detik kode
• 30 detik CSS
• 30 detik wawancara
• 30 detik bereaksi

Daftar isi

Visual

Lihat Isi

• Jantung

---

Visual

Jantung

Membuat komponen ticker.

• Gunakan kait React.useState() untuk menginisialisasi variabel keadaan ticker ke 0 .
• Tentukan dua metode, tick dan reset , yang secara berkala akan menambah timer berdasarkan interval dan reset interval masing -masing.
• Kembalikan <View> dengan dua elemen <Button> , masing -masing memanggil tick dan reset masing -masing.

 function Ticker ( props ) {
  const [ ticker , setTicker ] = React . useState ( 0 ) ;
  let interval = null ;

  const tick = ( ) => {
    reset ( ) ;
    interval = setInterval ( ( ) => {
      if ( ticker < props . times ) setTicker ( ticker + 1 ) ;
      else clearInterval ( interval ) ;
    } , props . interval ) ;
  } ;

  const reset = ( ) => {
    setTicker ( 0 ) ;
    clearInterval ( interval ) ;
  } ;

  return (
    < View >
      < Text style = { { fontSize : 100 } } > { ticker } </ Text >
      < Button onPress = { tick } title = "Tick!" />
      < Button onPress = { reset } title = "Reset!" />
    </ View >
  ) ;
}

Contoh

 < Ticker times = { 5 } interval = { 1000 } />

⬆ Kembali ke atas

---

Repositori ini sedang dalam proses. Jika Anda ingin berkontribusi, silakan periksa masalah terbuka untuk melihat di mana dan bagaimana Anda dapat membantu!

Readme ini dibangun menggunakan penutihan-pembangun.