Advertisement
  1. Code
  2. React

Bereaksi kecelakaan kursus untuk pemula, Bagian 2

Scroll to top
Read Time: 8 min
This post is part of a series called React Crash Course for Beginners.
React Crash Course for Beginners, Part 1
React Crash Course for Beginners, Part 3

Indonesian (Bahasa Indonesia) translation by graywest (you can also view the original English article)

Pada bagian salah satu seri tutorial ini, kita menggunakan alat buat-bereaksi-app untuk menciptakan sebuah aplikasi contoh kerja sebagai titik awal untuk apl Galeri 'Film Mojo' kami.

Dalam bagian kedua, kita akan mendapatkan untuk mengatasi dengan menambahkan komponen kustom kami pertama untuk menampilkan film setiap kartu. Kita juga akan melihat bagaimana menggunakan alat peraga memungkinkan kita untuk menyesuaikan tampilan komponen dengan lewat data daripada keras coding itu.

Ini menunjukkan fleksibilitas dan usabilitas komponen, dan bagaimana mereka dapat digunakan sebagai blok bangunan yang kuat dalam apl bereaksi.

Komponen pertama kami

OK, mari kita membuat sebuah komponen! Untuk mulai dengan, kami akan menjaga hal-hal yang cukup sederhana dan refactor header HTML ke dalam komponen sendiri.

Praktek-praktek terbaik bereaksi modern merekomendasikan memisahkan setiap komponen dalam aplikasi Anda ke dalam sebuah file terpisah. Kita akan mengikuti prinsip ini begitu, dalam proyek-proyek /src/komponen/folder, buat sebuah file baru yang disebut Header.js dan membukanya dalam editor teks.

Di bagian atas komponen file kita selalu mulai dengan mengimpor diperlukan Perpustakaan, komponen lainnya (seperti yang kita dapat sarang komponen), dan aset-aset tambahan yang kita butuhkan (misalnya gaya). Pernyataan impor merupakan bagian dari ES6 dan memungkinkan kita untuk menjaga proyek-proyek kami sangat modular.

Untuk kami <Header></Header> komponen, kita hanya perlu mengimpor bereaksi Perpustakaan, yang dapat kita lakukan dengan pernyataan ini:

1
import React, { Component } from 'react';

Ini mengimpor seluruh perpustakaan bereaksi dan membuatnya tersedia melalui variabel bereaksi. Itu juga mengimpor komponen objek langsung sehingga kita dapat menggunakannya tanpa harus secara khusus memenuhi syarat dengan bereaksi sebelumnya. referensi obyek.

Dengan kata lain, jika kita tidak secara eksplisit mengimpor komponen objek maka kita akan memiliki untuk mengaksesnya sebagai berikut:

React.Component

Tapi karena kami diimpor komponen secara langsung, kita hanya dapat menggunakannya pada sendiri tanpa referensi ke variabel bereaksi. Tidak peduli mana yang Anda gunakan, dan hanya ke preferensi.

Selanjutnya, untuk benar-benar membuat komponen, kita memperluas komponen objek untuk membuat sebuah class baru yang mendefinisikan kami <Header></Header> komponen. Setelah pernyataan impor, ketik:

1
class Header extends Component {
2
3
}
4
5
export default App;

Di sini, kami menggunakan kelas ES6 sebagai wadah komponen kami. Kelas adalah cara yang bagus untuk merangkum semua kode yang diperlukan untuk menggambarkan komponen Anda.

Anda mungkin juga melihat bahwa file komponen berakhir dengan pernyataan ekspor. Ini, seperti yang Anda duga, ekspor kami komponen dan membuatnya tersedia untuk file lainnya dalam proyek kami.

Paling minimal, Semua komponen bereaksi diwajibkan untuk memiliki metode render, yang mengembalikan beberapa markup. Ini bisa menjadi HTML, komponen bereaksi lainnya, atau campuran keduanya.

Tambahkan ini dalam kelas komponen Anda:

1
render() {
2
    return React.createElement( 'div', null, 'Hello there, this is a React component!' );
3
}

Metode React.createElement() menciptakan elemen HTML (<div>dalam kasus ini) dan menambahkan beberapa konten untuk itu. Menyimpan perubahan ke Header.js dan membuka App.js.</div>

Untuk menggunakan komponen bereaksi dalam komponen lain, kita perlu terlebih dulu mengimpor, jadi menambahkan ini ke daftar impor pernyataan di atas App.js:

1
import Header from './Header';

Perhatikan bagaimana Anda tidak perlu untuk menambahkan ekstensi file .js saat ini dianggap. Juga, karena <Header></Header> komponen adalah dalam folder yang sama sebagai kami <App></App> komponen, kita tidak perlu menentukan path lengkap.

Pada kenyataannya, jika Anda mencoba menggunakan mengimpor Header dari '. / komponen/Header '; dari dalam App.js, Anda akan mendapatkan kesalahan kompilasi.

Component file not foundComponent file not foundComponent file not found

Kita sekarang dapat menambahkan <Header></Header> komponen di dalam pernyataan kembali seperti elemen HTML. Namun, ada sebuah peringatan. Anda hanya dapat kembali salah satu tingkat atas unsur di dalam metode kembalinya komponen.

Jadi ini tidak diperbolehkan:

1
render() {
2
  return (
3
    <div className="apples"></div>

4
    <div className="oranges"></div>

5
  );
6
}

Jika Anda ingin kembali beberapa elemen maka Anda harus menggulung mereka semua di dalam elemen pembungkus tunggal:

1
render() {
2
  return (
3
    <div className="fruit">
4
      <div className="apples"></div>

5
      <div className="oranges"></div>

6
    </div>

7
  );
8
}

Jadi pastikan bahwa Anda menambahkan <Header></Header> komponen di dalam<div classname="App">elemen untuk menghindari kesalahan.</div>

1
class App extends Component {
2
  render() {
3
    return (
4
      <div className="App">
5
        <Header />
6
        <div className="App-header">
7
          <h2>Discover Your Movie Mojo!</h2>

8
        </div>

9
        <p className="App-intro">
10
          Welcome to the 'Movie Mojo' React app!
11
        </p>

12
      </div>

13
    );
14
  }
15
}

Hal ini akan mengakibatkan kami <Header></Header> komponen yang diberikan.

Initial Header componentInitial Header componentInitial Header component

Untuk menyelesaikan <Header></Header> komponen, kami akan menghapus blok berikut HTML dari App.js dan menambahkannya ke Header.js.

1
<div className="App-header">
2
  <h2>Discover Your Movie Mojo!</h2>
3
</div>

Namun, Anda mungkin melihat ada masalah. Di App.js <App></App> komponen render metode mengembalikan apa yang tampak seperti HTML. Namun di Header.js ada satu panggilan ke React.createElement(). Apa yang terjadi?

Jawabannya adalah BEJ. Dalam App.js kita menggunakan BEJ untuk menulis HTML-seperti sintaks untuk menentukan output komponen kami. Bandingkan ini dengan definisi komponen kita untuk Header.js.

1
React.createElement( 'div', null, 'Hello there, this is a React component!' );

Ini adalah bagaimana kita harus menulis bereaksi komponen tanpa BEJ. Pada kenyataannya, di bawah tenda, ini adalah apa BEJ disusun menjadi sebelum itu dapat diberikan ke browser.

Anda tidak perlu menggunakan BEJ sama sekali untuk Anda bereaksi komponen; Hal ini sepenuhnya terserah Anda. Tapi hampir semua komponen Anda akan datang di akan ditulis dalam BEJ karena itu hanya begitu jauh lebih mudah untuk menulis.

Hal ini juga sangat mudah dibaca orang lain baru kode. Bayangkan memiliki studi proyek bereaksi berisi puluhan berbagai komponen yang ditulis dalam JavaScript polos!

Jadi itu harus datang tidak mengejutkan bahwa kita akan menggunakan BEJ untuk definisi komponen seluruh sisa seri tutorial ini.

Pergi ke depan dan mengganti panggilan React.createElement() dengan BEJ setara kita disalin dari App.js. File Header.js Anda sekarang harus terlihat seperti ini:

1
import React, { Component } from 'react';
2
3
class Header extends Component {
4
  render() {
5
    return (
6
      <div className="App-header">
7
        <h2>Discover Your Movie Mojo!</h2>

8
      </div>

9
    );
10
  }
11
}
12
13
export default Header;

Sementara BEJ memungkinkan kita lebih banyak fleksibilitas dalam menulis kami komponen, ingatlah bahwa itu tidak sebenarnya HTML kita menulis tapi suatu abstraksi dari itu.

Anda dapat melihat ini dalam potongan kode di atas. Melihat di<div>Tag kami digunakan className daripada kelas untuk menunjukkan mana kita ingin menyatakan kelas CSS?</div> Hal ini karena semua BEJ dikompilasi ke murni JavaScript, dan kelas adalah sebuah kata yang disediakan di ES6 JavaScript.

Mari kita juga men-tweak gaya header. Buka App.css dan mengedit. App-header kelas CSS harus:

1
.App-header {
2
  background-color: steelblue;
3
  height: 70px;
4
  padding: 20px;
5
  color: white;
6
}

Ini update warna latar belakang header dan mengurangi ketinggian.

Updated app stylesUpdated app stylesUpdated app styles

Komponen alat peraga

Sejauh ini, kami <Header></Header> komponen statis. Ini akan menampilkan konten yang tetap yang tidak pernah berubah. Tapi komponen dapat dibuat menjadi dinamis dan menampilkan konten yang dilewatkan ke dalam mereka, melalui komponen alat peraga. Hal ini membuat komponen tiba-tiba jauh lebih berguna karena mereka menjadi generik dan dapat digunakan kembali.

Pikirkan komponen alat peraga sebagai mirip dengan tag HTML. Sebagai contoh,<div>Tag mungkin memiliki atribut untuk id, kelas, gaya dan sebagainya yang memungkinkan kita untuk menetapkan nilai-nilai yang unik untuk yang spesifik<div>elemen.</div></div>

Kita dapat melakukan hal yang sama untuk bereaksi komponen. Mengatakan kami tidak ingin kami header untuk output teks tetap 'Menemukan Anda film Mojo!' sepanjang waktu. Bukankah lebih baik jika header kami dapat menampilkan teks apapun?

Tidak seperti atribut HTML, kita dapat nama kami alat peraga komponen apa pun yang kita sukai. Di dalam App.js, memperbarui <Header></Header> tag harus:

1
<Header text="David's Movie Mojo App!" />

Kemudian, update <Header></Header> komponen untuk menggunakan teks prop.

1
<div className="App-header">
2
  <h2>{this.props.text}</h2>

3
</div>

Ini hasil dalam header kami menampilkan teks apa pun ditambahkan ke teks prop di App.js.

Using props to customize the Header componentUsing props to customize the Header componentUsing props to customize the Header component

Mari kita melihat lebih dekat bagaimana kami direferensikan prop teks di dalam Header.js menggunakan:

1
{this.props.text}

Kurung kurawal hanya memberitahu BEJ bahwa kita memiliki beberapa JavaScript yang kita inginkan untuk mengevaluasi. Ini membedakannya dari teks. Jika kita tidak menggunakan kurung kurawal apapun, string literal this.props.text akan outputted, yang tidak apa yang kita inginkan.

Kata kunci ini merujuk kepada kelas komponen Header, dan alat peraga adalah objek yang berisi nilai-nilai yang berlalu dalam dari <Header text="David's Movie Mojo App!"> </Header>. Dalam kasus kami, objek alat peraga berisi hanya satu entri, tapi Anda dapat menambahkan sebanyak yang Anda suka dalam praktek.

Kami <Header></Header> komponen sekarang jauh lebih generik dan tidak mengandung string keras-kode. Ini adalah praktik yang baik ketika menulis komponen bereaksi. Yang lebih umum Anda membuat mereka, lebih reusable mereka.

Ini adalah berita bagus ketika mengembangkan masa depan aplikasi bereaksi seperti yang Anda dapat menggunakan kembali komponen dari proyek sebelumnya sehingga Anda tidak perlu menulis segala sesuatu dari awal.

Kami menggunakan alat peraga di atas untuk lulus string tetap menjadi <Header></Header> komponen, tapi alat peraga juga dapat melewati variabel, fungsi referensi, dan negara untuk komponen.

Untuk mengirim sebuah variabel melalui alat peraga, kita bisa melakukan sesuatu seperti ini, dimana headerText adalah variabel:

1
<Header text={headerText} />

Memeriksa bereaksi komponen

Ada alat yang sangat berguna yang tersedia untuk browser Chrome yang memungkinkan Anda memeriksa informasi tentang aplikasi Anda bereaksi.

React developer toolsReact developer toolsReact developer tools

Alat-alat pengembang standar hanya memungkinkan Anda untuk melihat elemen HTML yang normal, tetapi dengan alat-alat pengembang bereaksi ekstensi diinstal, Anda dapat menavigasi melalui semua bereaksi komponen dalam aplikasi Anda.

Setelah itu diinstal, buka alat Inspektur browser Anda, dan klik pada tab. bereaksi baru tersedia pemberitahuan bahwa bukan elemen HTML, Anda melihat hirarki komponen bereaksi dalam app. Anda klik pada <App></App> komponen untuk memilihnya.

Inspecting propsInspecting propsInspecting props

Setelah dipilih, informasi tentang komponen akan ditampilkan di jendela ke kanan. <App></App> Komponen tidak memiliki apapun alat peraga dan jadi jendela kosong. Tetapi jika Anda memilih <Header></Header> komponen di dalam <App></App> maka Anda akan melihat 'teks' prop kami melewati di.

Inspecting Header component propsInspecting Header component propsInspecting Header component props

Bereaksi pengembang alat-alat sangat berguna untuk debugging, terutama ketika Anda mendapatkan ke mengembangkan aplikasi bereaksi lebih kompleks, sehingga layak mendapatkan digunakan untuk menggunakan mereka pada aplikasi sederhana.

Anda juga dapat menggunakan alat-alat pengembang bereaksi untuk memeriksa keadaan Anda aplikasi, yang kita akan mendapatkan ke dalam tutorial selanjutnya.

Kesimpulan

Dalam tutorial ini Anda akan belajar bagaimana untuk membagi aplikasi Anda menjadi komponen terpisah untuk membuatnya lebih modular. Komponen alat peraga memungkinkan Anda untuk lulus dalam nilai-nilai ke komponen individual, mirip dengan bagaimana Anda menambahkan atribut untuk elemen HTML.

Kami juga melihat bagaimana memanfaatkan alat-alat Inspektur browser baru untuk memeriksa data komponen dan alat peraga.

Pada bagian 3, kami akan menambahkan negara App kami untuk membantu kami mengelola data kami lebih efektif.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.