Bermula dengan React: Panduan Pemula '

React, sebuah perpustakaan JavaScript yang popular dalam industri pembangunan, memudahkan proses membina antara muka pengguna interaktif, dan skop aplikasi meliputi laman web, terminal mudah alih dan platform desktop. Banyak syarikat di seluruh dunia, termasuk gergasi seperti Netflix dan Airbnb, menggunakan React.

Panduan ini akan membawa anda untuk memulakan dengan React dengan cepat dan menerangkan konsep terasnya. Kami akan menggunakan alat Create React App untuk membina projek dengan cepat dan secara beransur -ansur membina aplikasi React mudah. Selepas kajian, anda akan menguasai asas -asas React dan bersedia untuk kajian lanjut.

Langkah berjaga -jaga

Sebelum belajar bertindak balas, adalah lebih baik untuk mempunyai pengetahuan asas HTML, CSS dan JavaScript. Memahami pengurus pakej Node.js dan NPM juga boleh membantu pembelajaran.

Tutorial ini memerlukan memasang nod dan npm pada mesin anda. Anda boleh mengakses halaman muat turun Node.js untuk memuat turun versi yang diperlukan (NPM dibundel dengan nod). Sebagai alternatif, anda boleh merujuk kepada tutorial kami untuk memasang nod menggunakan Pengurus Versi.

mata utama

React adalah perpustakaan JavaScript yang memberi tumpuan kepada bangunan antara muka pengguna dan digunakan secara meluas oleh syarikat -syarikat seperti Netflix dan Airbnb.
Sebelum mula belajar bertindak balas, anda perlu mempunyai pengetahuan asas HTML, CSS, JavaScript, Node.js dan NPM.
Aplikasi React dibina di sekitar komponen yang boleh diguna semula, yang boleh berasaskan kelas atau berasaskan fungsi, yang menjadi semakin popular kerana kemunculan cangkuk.
DOM maya React meningkatkan prestasi dengan mengemas kini HTML DOM mengikut perubahan dalam keadaan komponen UI.
JSX adalah lanjutan sintaks yang digunakan dalam React yang membolehkan menulis kod seperti HTML dalam fail JavaScript untuk meningkatkan pengalaman pembangunan dan kebolehbacaan.
Komponen React boleh digayakan secara langsung menggunakan gaya inline atau CSS luaran.

Apa itu bertindak balas?

React adalah perpustakaan JavaScript untuk membina komponen UI. Tidak seperti rangka kerja yang lebih lengkap seperti Angular atau VUE, bertindak balas hanya mengendalikan lapisan pandangan, jadi anda memerlukan perpustakaan lain untuk mengendalikan penghalaan, pengurusan negeri dan banyak lagi. Panduan ini akan memberi tumpuan kepada ciri-ciri Out-of-the-box React.

Aplikasi React dibina menggunakan komponen UI yang boleh diguna semula yang boleh berinteraksi antara satu sama lain. Komponen React boleh menjadi komponen berasaskan kelas atau komponen berfungsi yang dipanggil. Komponen berasaskan kelas ditakrifkan menggunakan kelas ES6, manakala komponen fungsi adalah fungsi asas JavaScript. Fungsi ini biasanya ditakrifkan menggunakan fungsi anak panah, tetapi kata kunci fungsi juga boleh digunakan. Komponen berasaskan kelas akan melaksanakan fungsi render yang mengembalikan beberapa JSX (lanjutan bertindak balas terhadap JavaScript biasa untuk membuat elemen React), sementara komponen fungsi akan mengembalikan JSX secara langsung. Jika anda tidak pernah mendengar tentang JSX, jangan risau, kami akan lebih terperinci kemudian.

Komponen React juga boleh dibahagikan kepada komponen negara dan komponen tanpa stat. Tugas komponen tanpa kewarganegaraan adalah hanya untuk memaparkan data yang diterima dari komponen React induk. Jika ia menerima sebarang peristiwa atau input, ia hanya boleh lulus peristiwa atau input tersebut kepada komponen induknya untuk mengendalikan.

Sebaliknya, komponen negara bertanggungjawab untuk mengekalkan keadaan permohonan tertentu. Ini mungkin melibatkan mendapatkan data dari sumber luaran, atau menjejaki sama ada pengguna log masuk. Komponen negara boleh mengemas kini status mereka sebagai tindak balas kepada peristiwa dan input.

Menurut pengalaman, anda harus menulis komponen tanpa statistik sebanyak mungkin. Komponen ini lebih mudah digunakan semula dalam aplikasi dan projek lain.

memahami dom maya

Sebelum anda memulakan pengekodan, anda perlu tahu bahawa React menggunakan DOM maya untuk mengendalikan rendering halaman. Jika anda sudah biasa dengan jQuery, anda tahu ia boleh memanipulasi laman web secara langsung melalui HTML DOM. Dalam banyak kes, interaksi langsung ini tidak mempunyai masalah. Walau bagaimanapun, untuk beberapa kes, seperti menjalankan aplikasi web masa nyata yang sangat interaktif, prestasi boleh dipengaruhi dengan sangat banyak.

Untuk menyelesaikan masalah ini, DOM maya (perwakilan memori DOM sebenar) dicipta, yang kini digunakan oleh banyak kerangka UI moden (termasuk React). Tidak seperti HTML DOM, DOM maya lebih mudah untuk beroperasi dan boleh mengendalikan sejumlah besar operasi dalam milisaat tanpa menjejaskan prestasi halaman. React secara kerap membandingkan DOM dan HTML DOM. Perbezaannya kemudian dikira dan digunakan untuk DOM HTML untuk dipadankan dengan DOM maya. Dengan cara ini, React memastikan bahawa aplikasi anda membuat 60 bingkai yang mantap sesaat, yang bermaksud bahawa pengguna mengalami hampir tidak ada kelewatan.

Mulakan projek React kosong

Berdasarkan prasyarat, saya menganggap anda telah menubuhkan persekitaran nod dan mempunyai versi terkini NPM (atau benang pilihan) yang dipasang.

Seterusnya kami akan menggunakan aplikasi Create React untuk membina aplikasi React First kami, skrip utiliti rasmi untuk membuat aplikasi React Page tunggal.

mari pasang sekarang:

<code>npm i -g create-react-app</code>

kemudian gunakannya untuk membuat aplikasi React baru.

<code>create-react-app message-app</code>

Bergantung pada kelajuan sambungan internet anda, jika ini adalah kali pertama anda menjalankan perintah create-react-app, ini mungkin mengambil sedikit masa untuk diselesaikan. Terdapat banyak pakej yang dipasang dalam proses yang diperlukan untuk menubuhkan persekitaran pembangunan yang mudah termasuk pelayan web, penyusun, dan alat ujian.

Jika anda tidak mahu memasang terlalu banyak pakej di seluruh dunia, anda juga boleh menggunakan NPX, yang membolehkan anda memuat turun dan menjalankan pakej tanpa memasangnya:

<code>npx i -g create-react-app</code>

menjalankan salah satu daripada kedua -dua perintah ini harus mengeluarkan sesuatu seperti yang berikut:

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

Selepas proses persediaan projek selesai, laksanakan perintah berikut untuk memulakan aplikasi React anda:

<code>cd message-app
npm start</code>

anda harus melihat output berikut:

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

penyemak imbas lalai anda harus bermula secara automatik, anda harus melihat skrin seperti ini:

Sekarang bahawa kami telah mengesahkan bahawa projek React Introductory kami berjalan tanpa kesilapan, mari kita lihat apa yang berlaku di belakang tabir. Anda boleh membuka Folder Mesej-App menggunakan editor kod kegemaran anda. Mari mulakan dengan fail pakej.json:

<code>npm i -g create-react-app</code>

Seperti yang anda lihat, aplikasi Create React telah memasang beberapa kebergantungan untuk kami. Tiga yang pertama berkaitan dengan Perpustakaan Ujian React, yang (seperti yang anda boleh meneka) membolehkan kami menguji kod React kami. Kemudian kami mempunyai React dan React-Dom, yang merupakan pakej teras untuk sebarang aplikasi React dan akhirnya bertindak balas, yang menubuhkan persekitaran pembangunan dan memulakan pelayan (anda baru sahaja melihatnya).

maka terdapat empat skrip npm untuk mengautomasikan tugas berulang:

• Mula memulakan pelayan pembangunan
• Bina membuat versi aplikasi yang siap pengeluaran aplikasi
• ujian menjalankan ujian yang disebutkan di atas
• Eject akan mendedahkan persekitaran pembangunan aplikasi

Perintah terakhir bernilai menerangkan secara terperinci. Alat Create React App memberikan perbezaan yang jelas antara kod sebenar anda dan persekitaran pembangunan anda. Jika anda menjalankan NPM Run Eject, aplikasi Create React berhenti menyembunyikan apa yang dilakukan di belakang tabir dan membuang segala -galanya ke dalam fail pakej.json projek. Walaupun ini memberi anda lebih banyak kawalan berbutir ke atas kebergantungan aplikasi anda, saya cadangkan anda tidak melakukan ini, kerana anda perlu menguruskan semua kod kompleks yang digunakan dalam projek binaan dan ujian anda. Jika anda mahu, anda boleh menggunakan Customize-CRA untuk mengkonfigurasi proses membina tanpa muncul.

Buat aplikasi React juga menyokong Eslint (seperti yang dapat dilihat dari harta Eslintconfig) dan dikonfigurasi menggunakan peraturan ESLint React-App.

Properti Browserslist dari fail Package.json

membolehkan anda menentukan senarai penyemak imbas yang akan disokong oleh permohonan itu. Konfigurasi ini digunakan oleh penukar seperti Alat Postcss dan Babel.

Salah satu ciri yang paling keren dari aplikasi Create React ialah ia menyediakan penambahbaikan panas dari kotak. Ini bermakna apa -apa perubahan yang kami buat kepada kod akan menyebabkan penyemak imbas menyegarkan secara automatik. Perubahan kepada kod JavaScript akan memuatkan semula halaman, sementara perubahan kepada CSS akan mengemas kini DOM tanpa memuat semula.

3 Selepas pelayan dihentikan, padamkan segala -galanya kecuali fail ServiceWorker.js dan setuptests.js dalam folder SRC. Jika anda berminat untuk memahami peranan pekerja perkhidmatan, anda boleh mengetahui lebih lanjut di sini.

Lain -lain itu, kami akan membuat semua kod dari awal supaya anda dapat memahami segala -galanya dalam folder SRC. Pengenalan kepada sintaks JSX

Dokumentasi React mentakrifkan JSX sebagai "lanjutan tatabahasa untuk JavaScript" yang menjadikannya mudah untuk menulis komponen React. Dengan JSX, kita boleh lulus struktur HTML atau elemen bertindak balas seperti yang kita lakukan dengan nilai JavaScript standard.

ini adalah contoh mudah:

Perhatikan garis ini

. Ini adalah JSX. Jika anda cuba menjalankannya dalam penyemak imbas web, ia akan memberi anda ralat. Walau bagaimanapun, dalam aplikasi React, JSX ditafsirkan oleh penukar (seperti Babel) dan diberikan sebagai kod JavaScript yang dapat difahami.

<code>create-react-app message-app</code>

NOTA: Anda boleh mengetahui lebih lanjut mengenai JSX dalam tutorial kami "Pemula JSX".

const message = <h1>I'm a heading</h1>;

Pada masa lalu, fail React JSX digunakan untuk menggunakan sambungan fail .jsx. Sekarang, alat Create React App menghasilkan fail React menggunakan sambungan fail .js. Walaupun lanjutan fail .jsx masih disokong, React penyelenggara mengesyorkan menggunakan .js. Walau bagaimanapun, terdapat juga sekumpulan pemaju React yang menentang (termasuk saya sendiri) yang lebih suka menggunakan lanjutan .jsx atas sebab -sebab berikut:

• Dalam kod VS, Emmet boleh digunakan untuk fail .jsx keluar dari kotak. Walau bagaimanapun, anda boleh mengkonfigurasi vs kod untuk merawat semua fail .js sebagai javascriptreact untuk membolehkan emmet berfungsi pada fail -fail ini.
• standard JavaScript dan REACT JavaScript Code mempunyai peraturan serat yang berbeza.

Walau bagaimanapun, dalam tutorial ini, saya akan mengikuti apa aplikasi Create React menyediakan dan melekat pada akhir fail .js.

"Hello, dunia!"

mari kita mula menulis beberapa kod. Dalam folder SRC dari aplikasi mesej yang baru dibuat, buat fail index.js dan tambahkan kod berikut:

Gunakan

<code>npm i -g create-react-app</code>

atau

sekali lagi untuk memulakan pelayan pembangunan. Penyemak imbas anda harus memaparkan perkara berikut: npm start yarn start

Ini adalah contoh yang paling asas "Hello World". Fail index.js adalah direktori root projek, di mana komponen React akan diberikan. Izinkan saya menerangkan bagaimana kod berfungsi:

Baris 1: Import pakej React untuk mengendalikan pemprosesan JSX.

Baris 2: Import pakej ReactDom untuk menjadikan komponen React Root.
baris 3: panggil fungsi render, lulus:
• : elemen jsx
  • <h1>Hello World</h1>: bekas HTML (elemen JSX akan diberikan di sini).
  • document.getElementById('root')
  HTML Container terletak di fail awam/indeks.html. Pada baris 31, anda harus melihat

. Ini dipanggil node dom root, kerana segala -galanya di dalamnya akan diuruskan oleh dom maya React.

Walaupun JSX kelihatan seperti HTML, terdapat beberapa perbezaan utama. Sebagai contoh, anda tidak boleh menggunakan atribut kelas kerana ia adalah kata kunci JavaScript. Sebaliknya, gunakan nama kelas sebaliknya. Di samping itu, peristiwa seperti Onclick dieja OnClick di JSX. Sekarang mari kita ubah kod Hello World kami:

<code>npm i -g create-react-app</code>

Saya telah memindahkan kod JSX saya ke dalam pembolehubah yang tetap dipanggil elemen. Saya juga menggantikan tag H1 dengan tag div. Agar JSX berfungsi, anda perlu membungkus unsur -unsur dalam tag induk.

Lihat contoh berikut:

<code>create-react-app message-app</code>

Kod di atas tidak berfungsi. Anda akan menerima ralat sintaks yang menunjukkan bahawa anda mesti memasukkan elemen JSX bersebelahan dalam tag tertutup. Seperti ini:

<code>npx i -g create-react-app</code>

Bagaimana untuk mengira ekspresi JavaScript di JSX? Sangat mudah. Hanya gunakan pendakap keriting seperti berikut:

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

... atau seperti ini:

<code>cd message-app
npm start</code>

Kemas kini kod anda dan sahkan bahawa penyemak imbas memaparkan "Hello, Jane Doe". Cuba contoh lain, seperti {5 2} <code>{5 2}. Sekarang anda mempunyai asas -asas JSX, mari kita teruskan dan buat komponen React.

mengisytiharkan komponen React

Contoh di atas adalah cara mudah untuk menunjukkan kepada anda bagaimana reactdom.render () berfungsi. Biasanya, kami merangkumi semua logik projek dalam komponen React dan lulus ke fungsi ReactDom.Render.

Dalam folder SRC, buat fail bernama App.js dan taipkan kod berikut:

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

di sini, kami membuat komponen React dengan menentukan kelas JavaScript, yang merupakan subclass react.component. Kami juga menentukan fungsi render yang mengembalikan elemen JSX. Anda boleh meletakkan kod JSX yang lain dalam tag

. Seterusnya, kemas kini src/index.js dengan kod berikut untuk melihat perubahan yang dicerminkan dalam penyemak imbas anda: <div> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>{ &quot;name&quot;: &quot;message-app&quot;, &quot;version&quot;: &quot;0.1.0&quot;, &quot;private&quot;: true, &quot;dependencies&quot;: { &quot;@testing-library/jest-dom&quot;: &quot;^4.2.4&quot;, &quot;@testing-library/react&quot;: &quot;^9.3.2&quot;, &quot;@testing-library/user-event&quot;: &quot;^7.1.2&quot;, &quot;react&quot;: &quot;^16.13.1&quot;, &quot;react-dom&quot;: &quot;^16.13.1&quot;, &quot;react-scripts&quot;: &quot;3.4.3&quot; }, &quot;scripts&quot;: { &quot;start&quot;: &quot;react-scripts start&quot;, &quot;build&quot;: &quot;react-scripts build&quot;, &quot;test&quot;: &quot;react-scripts test&quot;, &quot;eject&quot;: &quot;react-scripts eject&quot; }, &quot;eslintConfig&quot;: { &quot;extends&quot;: &quot;react-app&quot; }, &quot;browserslist&quot;: { &quot;production&quot;: [ &quot;&gt;0.2%&quot;, &quot;not dead&quot;, &quot;not op_mini all&quot; ], &quot;development&quot;: [ &quot;last 1 chrome version&quot;, &quot;last 1 firefox version&quot;, &quot;last 1 safari version&quot; ] } }</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> Pertama, kami mengimport komponen aplikasi. Kemudian kami membuat aplikasinya dalam format JSX seperti berikut: <code> <pl/> <sh>. Ini diperlukan supaya JSX dapat menyusunnya ke dalam elemen yang boleh ditolak ke reaksi. Selepas menyimpan perubahan, periksa penyemak imbas anda untuk memastikan ia membuat mesej yang betul. <p> <code><App/> Seterusnya, kita akan belajar cara menggunakan gaya.

Tetapkan gaya elemen JSX

Terdapat pelbagai cara untuk membuat komponen reaksi gaya. Dalam tutorial ini, kami akan memperkenalkan dua kaedah:

JSX Gaya inline

1. Lembaran Gaya Luaran
Berikut adalah contoh bagaimana kita melaksanakan gaya inline JSX:

Gaya React kelihatan seperti CSS biasa, tetapi terdapat beberapa perbezaan utama. Sebagai contoh, Headerstyle adalah objek literal. Kita tidak boleh menggunakan titik titik seperti yang biasanya kita lakukan. Di samping itu, banyak pengisytiharan CSS telah ditukar untuk menjadikannya serasi dengan sintaks JavaScript. Sebagai contoh, kami menggunakan teks teks dan bukannya teks. Pada asasnya, tatanama unta digunakan untuk semua kekunci CSS, kecuali untuk awalan vendor seperti WebKitTransition, yang mesti bermula dengan huruf besar.

import React from 'react';

export default function App() {
  const message = <h1>I'm a heading</h1>;  //JSX FTW!
  return ( message );
}

kita juga boleh melaksanakan gaya dengan cara ini:

<code>npm i -g create-react-app</code>

Kaedah kedua ialah menggunakan lembaran gaya luaran. Secara lalai, stylesheet CSS luaran sudah disokong. Jika anda ingin menggunakan preprocessor seperti SASS, rujuk dokumentasi untuk mengetahui cara mengkonfigurasinya.

Dalam folder SRC, buat fail bernama App.css dan taipkan kod berikut:

<code>create-react-app message-app</code>

Tambahkan penyata import berikut di bahagian atas fail SRC/APP.JS:

<code>npx i -g create-react-app</code>

Selepas menyimpan, anda harus melihat perubahan besar dalam saiz kandungan teks pada penyemak imbas anda. Anda juga boleh menggunakan kelas CSS seperti berikut:

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

kemas kini src/app.js seperti berikut:

<code>cd message-app
npm start</code>

kita tidak boleh menggunakan atribut kelas HTML kerana ia adalah kata kunci JavaScript yang disediakan. Sebaliknya, kami menggunakan nama kelas. Inilah output yang anda harapkan:

3

komponen tanpa statur dan negara

Komponen tanpa stateless, juga dikenali sebagai komponen bodoh, hanyalah komponen yang memaparkan maklumat. Ia tidak mengandungi sebarang logik untuk data operasi. Ia boleh menerima acara dari pengguna dan kemudian lulus mereka ke bekas induk untuk diproses.

Buat fail mesej-view.js dan salin kod sampel berikut ke dalamnya. Berikut adalah contoh sempurna komponen bodoh (walaupun secara teknikalnya lebih seperti komponen statik):

Seterusnya, gunakan kod berikut untuk menambah beberapa gaya asas ke src/app.css:

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

Akhirnya, ubah suai src/app.js supaya keseluruhan fail kelihatan seperti ini:

{
  "name": "message-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Kod harus sangat mudah difahami setakat ini, seperti yang telah saya jelaskan konsep -konsep yang terlibat setakat ini. Sekarang periksa penyemak imbas anda dan anda harus mendapatkan hasil berikut:

import React from 'react';

export default function App() {
  const message = <h1>I'm a heading</h1>;  //JSX FTW!
  return ( message );
}

Kami menyebut sebelum ini bahawa React menyediakan komponen berasaskan kelas dan fungsi. Kami boleh menulis semula MessAgeView menggunakan sintaks fungsi seperti berikut:

Perhatikan bahawa saya telah mengeluarkan import komponen kerana ia tidak diperlukan dalam sintaks fungsi. Gaya ini mungkin mengelirukan pada mulanya, tetapi anda akan mengetahui bahawa komponen React Write lebih cepat.

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));

Di samping itu, dengan kemunculan cangkuk reaksi, gaya penulisan reaksi ini menjadi semakin popular.

pemindahan data melalui props

Anda telah berjaya mencipta komponen React Stateless. Walau bagaimanapun, ia tidak lengkap, kerana ia juga memerlukan beberapa kerja tambahan untuk disatukan dengan betul dengan komponen atau bekas negara. Pada masa ini, MessageView memaparkan data statik. Kita perlu mengubah suai supaya ia dapat menerima parameter input. Kami menggunakan prop yang dipanggil untuk mencapai ini - data yang akan kami lalui dari komponen induk.

Pertama, tukar komponen MessageView seperti ini:

<code>npm i -g create-react-app</code>

Perkara utama yang perlu diperhatikan di sini adalah bagaimana kita menentukan pembolehubah mesej. Kami memberikannya kepada this.props.message dan kami melepaskannya dari komponen ibu bapa yang berkesempatan. Kemudian, dalam JSX kami, kami boleh merujuk pemboleh ubah mesej kami dan mengeluarkannya ke halaman.

Sekarang mari kita buat komponen induk untuk MessageView. Buat fail baru bernama Message.js dan tambahkan kod berikut:

<code>create-react-app message-app</code>

di sini, kami menggunakan Negeri untuk menyimpan objek yang mengandungi mesej kami. Keajaiban bertindak balas ialah apabila objek negara berubah, komponen akan diberikan semula (dan dengan itu mengemas kini UI).

Kemudian, dalam JSX kami, kami lulus harta mesej objek Negeri ke komponen MessageView.

Langkah terakhir adalah untuk mengemas kini komponen aplikasi kami untuk menjadikan komponen Messagelist yang baru dan bukannya komponen MessageView Stateless:

<code>npx i -g create-react-app</code>

Selepas menyimpan perubahan, periksa penyemak imbas anda untuk melihat hasilnya.

luangkan masa untuk memastikan anda memahami apa yang sedang berlaku. Kami mengisytiharkan objek negara dalam komponen Messagelist (Stateful). Harta mesej objek ini mengandungi mesej kami. Dalam fungsi render kami, kami boleh menyampaikan mesej itu kepada komponen kanak-kanak kami (tanpa statistik) menggunakan prop yang dipanggil.

Dalam komponen MessageView (stateless), kita boleh mengakses mesej menggunakan

. Kami kemudian boleh lulus nilai ini ke JSX kami untuk diberikan ke halaman. this.props.message

huh!

prop check

Apabila aplikasi tumbuh dan data diterangkan sebagai prop, ia akan berguna untuk mengesahkan bahawa komponen menerima jenis data yang mereka harapkan.

bernasib baik, kita boleh menggunakan pakej prop-jenis untuk mencapai matlamat ini. Untuk dengan cepat melihat contohnya yang sebenarnya, tukar komponen MessageView kami seperti berikut:

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

Jika prop mesej hilang, ini akan menyebabkan aplikasi React anda melaporkan ralat. Jika objek yang diterima oleh komponen bukan objek, ia juga akan menyebabkan ralat.

anda boleh mencuba dengan mengubah keadaan komponen induk seperti ini:

<code>cd message-app
npm start</code>

kembali ke penyemak imbas anda dan buka konsol. Anda harus melihat yang berikut didokumenkan dalam konsol:

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

penggunaan semula komponen

Sekarang mari kita lihat cara memaparkan pelbagai mesej menggunakan contoh MessageView. Di sinilah React mula berkedip kerana ia menjadikan kod semula digunakan sangat mudah (anda akan lihat).

Pertama, kita menukar State.Message untuk array dan menamakan semula kepada mesej. Kami kemudian akan menggunakan fungsi peta JavaScript untuk menghasilkan pelbagai contoh komponen MessageView, masing -masing sepadan dengan mesej dalam array State.messages.

kita juga perlu mengisi nilai yang unik dengan atribut khas yang dipanggil kunci, seperti ID. React memerlukan ini untuk menjejaki item mana dalam senarai telah diubah, ditambah, atau dipadam.

Kemas kini kod Messagelist seperti berikut:

{
  "name": "message-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

periksa penyemak imbas anda untuk melihat hasilnya:

seperti yang anda lihat, mudah untuk menentukan blok bangunan dengan bertindak balas untuk mewujudkan antara muka UI yang kuat dan kompleks.

refactored untuk menggunakan cangkuk reaksi

cangkuk adalah versi terkini React, tetapi mereka menyapu dunia React. Ringkasnya, mereka memungkinkan untuk menambah keadaan (dan fungsi lain) untuk bertindak balas komponen fungsi.

Saya akan mengakhiri tutorial ini dengan refactoring komponen MessageView ke dalam komponen fungsi, yang menguruskan keadaannya menggunakan cangkuk React. Sila ambil perhatian bahawa hanya mungkin apabila menggunakan React v16.8 dan kemudian.

<code>npm i -g create-react-app</code>

Dalam contoh di atas, saya telah menggantikan objek negara dengan cangkuk reaksi useState. Seperti namanya, ini membolehkan anda menguruskan keadaan komponen.

Menggunakan cangkuk akan membantu anda mengelakkan penggerudian prop yang dipanggil semasa bekerja pada projek besar. Penggerudian Prop akan membolehkan anda lulus prop ke pelbagai komponen (yang akhirnya tidak memerlukan data itu), hanya untuk mendapatkan komponen yang sangat bersarang.

kita juga boleh menukar komponen MessageView ke komponen fungsi:

<code>create-react-app message-app</code>

Perhatikan bagaimana kita sekarang menerima penyokong mesej dalam komponen:

<code>npx i -g create-react-app</code>

Ini menggunakan teknik yang dipanggil pemusnahan objek, yang membolehkan anda mengekstrak item individu dari array atau objek dan memasukkannya ke dalam pembolehubah menggunakan sintaks disingkat.

kami menggunakan teknik yang sama di sini, mendapatkan nilai yang kami perlukan dari objek mesej dan mengelakkan menambah mesej kepada segala -galanya:

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

itu sahaja!

Saya tidak berhasrat untuk memperkenalkan cangkuk React lagi dalam jawatan ini, hanya memberitahu anda bahawa mereka wujud dan bahawa mereka menjadi semakin popular dalam komuniti React. Sekiranya anda ingin mengetahui lebih lanjut mengenai cangkuk, baca panduan permulaan kami untuk bertindak balas.

Demo

ini adalah demonstrasi langsung yang boleh anda gunakan:

pautan demo codepen

Pembelajaran Tinjauan

Kami kini telah menyelesaikan panduan pengenalan ini. Terdapat banyak konsep reaksi yang saya tidak tutup, seperti pemerolehan data, pengendalian ralat, penghalaan, bentuk penggunaan, debugging, dll. Senarai ini berterusan ...

Berita baiknya ialah kami mempunyai banyak kandungan React Great di SitePoint Premium, serta banyak artikel hebat di blog kami. Saya menggalakkan anda untuk memeriksa mereka dan membina sesuatu yang hebat.

Soalan Lazim Mengenai Bermula Dengan React

Apakah prasyarat untuk pembelajaran bertindak balas?

Sebelum mula belajar bertindak balas, sangat penting untuk menguasai pengetahuan javascript pepejal, kerana React adalah perpustakaan JavaScript. Anda harus akrab dengan konsep seperti ciri ES6, penutupan, pengaturcaraan tak segerak dan kata kunci ini. Pengetahuan HTML dan CSS juga penting, kerana anda akan menggunakan JSX, sambungan sintaks JavaScript yang serupa dengan HTML. Ia juga bermanfaat untuk mengenali Node.js dan NPM (Pengurus Pakej Node) kerana ia biasanya digunakan untuk pengurusan pakej dan skrip pelaksanaan dalam pembangunan React.

Bagaimana untuk menubuhkan persekitaran pembangunan untuk React?

Untuk menubuhkan persekitaran pembangunan untuk React, anda perlu memasang Node.js dan NPM terlebih dahulu. Selepas pemasangan selesai, anda boleh membuat aplikasi React baru menggunakan alat baris arahan Create React App. Ia menubuhkan persekitaran pembangunan anda supaya anda boleh menggunakan ciri -ciri JavaScript terkini, memberikan pengalaman pembangunan yang baik, dan mengoptimumkan aplikasi anda untuk pengeluaran. Anda juga memerlukan editor teks seperti Visual Studio Code dan pelayar web untuk menguji aplikasi anda.

Apa itu JSX dan mengapa penting dalam React?

JSX bermaksud JavaScript XML. Ia adalah sambungan sintaks JavaScript yang dibangunkan oleh Facebook, yang membolehkan kami menulis HTML dalam React. JSX menjadikannya lebih mudah untuk menulis dan menambah HTML dalam React. Tanpa itu, kod JavaScript anda sukar dibaca dan ditulis. Ia juga membantu menjadikan kod modular dan lebih mudah difahami dan dikekalkan.

Apakah komponen dalam React?

Komponen adalah blok bangunan untuk sebarang aplikasi React. Komponen dalam React adalah sekeping kod yang boleh diguna semula yang mengawal sebahagian daripada UI. Setiap komponen adalah bebas dan boleh digabungkan untuk mewujudkan UI yang kompleks. Komponen React biasanya ditulis dalam JSX dan dapat mengekalkan keadaan dan prop mereka sendiri.

Apakah perbezaan antara negeri dan prop di React?

Dalam React, keadaan dan prop adalah objek JavaScript. Walaupun kedua -duanya memegang maklumat yang mempengaruhi output render, mereka melakukan yang berbeza ketika datang ke komponen. Props (singkatan sifat) adalah cara untuk lulus data dari komponen induk kepada komponen kanak-kanak. Sebaliknya, keadaan diuruskan di dalam komponen dan boleh diubah di dalam komponen.

bagaimana reaksi mengendalikan peristiwa?

Acara React dinamakan menggunakan Camelcase, bukan huruf kecil. Apabila menggunakan JSX, anda lulus fungsi sebagai pengendali acara, bukan rentetan. Sebagai contoh, acara klik HTML ditulis sebagai OnClick dalam JSX. React juga mempunyai sistem acara sintetik, yang bermaksud ia mempunyai sistem acara tersendiri, yang serasi sepenuhnya dengan sistem acara W3C.

Apakah maksud Kunci Tengah React?

Kekunci dalam React digunakan untuk mengenal pasti elemen maya yang unik dari data rendering pemacu yang sepadan. Mereka membantu bertindak balas mengoptimumkan rendering dengan gelung melalui elemen DOM yang sedia ada. Kunci mestilah nombor atau rentetan yang unik, dan menggunakan kekunci pendua boleh memecahkan aplikasi anda.

Apakah API konteks dalam React?

Konteks API adalah struktur komponen yang disediakan oleh React yang membolehkan kita berkongsi bentuk data tertentu di semua peringkat aplikasi kami. Matlamatnya adalah untuk menyelesaikan masalah penggerudian prop.

Apa itu Redux dan apa yang perlu dilakukan dengan React?

Redux adalah bekas keadaan yang boleh diramal yang direka untuk membantu anda menulis aplikasi JavaScript yang berjalan secara konsisten pada pelanggan, pelayan, dan persekitaran asli dan mudah diuji. Walaupun ia digunakan terutamanya sebagai alat pengurusan negeri untuk React, anda boleh menggunakannya dengan mana -mana rangka kerja JavaScript atau perpustakaan yang lain.

Apa itu cangkuk dalam React?

cangkuk adalah ciri baru dalam React 16.8 yang membolehkan anda menggunakan ciri -ciri React State dan lain -lain tanpa kelas menulis. Cangkuk adalah fungsi yang membolehkan anda "mengikat" fungsi keadaan dan kitaran hayat dari komponen fungsi. Mereka tidak bekerja di kelas - mereka membolehkan anda menggunakan React tanpa kelas.

Sila ambil perhatian bahawa kandungan di atas telah menulis semula dan menggilap teks asal, berusaha untuk meningkatkan kebolehbacaan dan kelancaran tanpa mengubah makna asal. Format imej tetap sama. Oleh kerana gambar rangkaian tidak dapat diakses secara langsung, pautan imej tetap sama.

Atas ialah kandungan terperinci Bermula dengan React: Panduan Pemula '. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!