Tutorial Mencipta Aplikasi Web Menggunakan React.js

React.js ialah pustaka pembangunan bahagian hadapan yang popular yang digunakan untuk membina antara muka pengguna interaktif (UI). Dibangunkan oleh Facebook, React.js telah digunakan oleh banyak syarikat utama, termasuk Instagram, Airbnb dan WhatsApp. Jika anda ingin membina aplikasi web yang berkesan, pantas dan responsif , React.js mungkin pilihan yang tepat untuk anda.

pengenalan

Sebelum kita mula, pastikan anda telah memasang Node.js dan npm (Pengurus Pakej Node) pada komputer anda. Node.js dan npm adalah penting kerana ia menyediakan persekitaran dan alatan yang diperlukan untuk membangunkan aplikasi web menggunakan React.js.

Langkah 1: Memulakan Projek React

Untuk mencipta aplikasi React.js yang baharu, kita boleh menggunakan Create React App, alat penciptaan aplikasi yang meminimumkan konfigurasi awal. Jalankan arahan berikut dalam terminal atau command prompt anda:

“`bash
npx buat-aplikasi-tindak balas aplikasi-saya
cd aplikasi saya
npm bermula
""

Arahan ini akan mencipta direktori baharu bernama `my-app`, memuat turun dan memasang semua kebergantungan yang diperlukan, dan memulakan pelayan pembangunan. Anda kini boleh membuka pelayar dan mengakses `http://localhost:3000` untuk melihat aplikasi React.js lalai.

Langkah 2: Struktur Folder

Mari kita lihat struktur folder yang telah dicipta oleh Create React App:

""
aplikasi-saya/
├── nod_modul/
├── awam/
│ └── indeks.html
└── src/
├── Aplikasi.css
├── App.js
├── App.test.js
├── indeks.css
├── indeks.js
└── logo.svg
""

– `node_modules/`: Mengandungi semua kebergantungan projek anda.
– `public/`: Mengandungi fail statik, termasuk `index.html` yang merupakan titik masuk aplikasi.
– `src/`: Tempat anda akan menghabiskan sebahagian besar masa anda. Mengandungi komponen React, fail CSS dan aset lain.

Langkah 3: Memadam Fail Yang Tidak Diperlukan

Untuk bermula dengan catatan yang bersih, mari kita padamkan beberapa fail yang tidak diperlukan. Padamkan `logo.svg` dan `App.test.js` di dalam folder `src/`. Kemudian, buka `App.css` dan `index.css`, padamkan semua kod CSS di dalamnya untuk bermula dengan helaian gaya yang bersih.

Langkah 4: Mencipta Komponen Pertama Anda

React.js berasaskan komponen. Komponen ialah blok binaan aplikasi web anda. Mari kita ubah suai `App.js` untuk mencipta komponen pertama kita.

Buka `src/App.js` dan gantikannya dengan kod berikut:

“`jsx
import React daripada 'react';
import './App.css';

function App() {
kembali (

);
}

eksport Aplikasi lalai;
""

Inisialkan kod React di dalam `App.js` menggunakan JSX (JavaScript XML), yang membolehkan kita menulis sintaks seperti HTML dalam JavaScript. Simpan perubahan anda dan lihat hasilnya dalam pelayar anda.

Langkah 5: Menambah Komponen Baharu

Sekarang mari kita tambah beberapa komponen baharu. Cipta folder baharu bernama `components` di dalam folder `src`. Kemudian cipta fail baharu `HelloWorld.js` dalam folder `components`.

“`jsx
import React daripada 'react';

fungsi HelloWorld() {
kembali (

);
}

eksport HelloWorld lalai;
""

Buka `App.js` dan import komponen `HelloWorld` yang baru kita cipta:

“`jsx
import React daripada 'react';
import './App.css';
import HelloWorld daripada './components/HelloWorld';

function App() {
kembali (

);
}

eksport Aplikasi lalai;
""

Kini, `App.js` memaparkan komponen `HelloWorld` pada halaman utama.

Langkah 6: Menambah Pengurusan Keadaan dengan useState

React mempunyai cangkuk yang sangat berkuasa untuk mengurus keadaan. Mari kita tambahkan beberapa keadaan pada aplikasi kita. Contohnya, mari kita tambahkan kaunter yang meningkat setiap kali butang diklik.

Buka `HelloWorld.js` dan tambahkan state dan `useState` hook:

“`jsx
import React, { useState } daripada 'react';

fungsi HelloWorld() {
const [kiraan, tetapkanKiraan] = gunakanKeadaan(0);

const kenaikanKiraan = () => {
tetapkanKiraan(kiraan + 1);
}

kembali (

);
}

eksport HelloWorld lalai;
""

Keadaan `count` diinisialisasikan dengan nilai 0, dan setiap kali butang diklik, fungsi `incrementCount` akan meningkatkan nilai ini.

Langkah 7: Menambah Gaya

Untuk menambah penggayaan, kita boleh menggunakan CSS dalam fail `App.css` atau kita boleh menggunakan pustaka CSS-in-JS seperti styled-components. Mari kita kekalkan dengan CSS standard buat masa ini.

Buka `App.css` dan tambahkan sedikit penggayaan:

"`css
.Aplikasi {
teks-align: center;
}

.Pengepala-aplikasi {
warna-latar-belakang: 282c34;
ketinggian min: 100vj;
paparan: flex;
arah lenturan: lajur;
align-item: tengah;
justify-content: pusat;
saiz-fon: calc(10px + 2vmin);
warna: putih;
}

butang {
padding: 10px 20px;
margin-top: 20px;
saiz fon: 16px;
}
""

Langkah 8: Menambah Penghalaan dengan Penghala React

Untuk menambah navigasi antara halaman yang berbeza dalam aplikasi kita, kita boleh menggunakan React Router. Pasang React Router dengan menjalankan arahan berikut:

“`bash
npm install react-router-dom
""

Kemudian, cipta dua komponen baharu: `Home.js` dan `About.js` dalam folder `components`.

`Laman Utama.js`:
“`jsx
import React daripada 'react';

fungsi Laman Utama() {
kembali (

);
}

eksport lalai Laman Utama;
""

`Perihal.js`:
“`jsx
import React daripada 'react';

fungsi Perihal() {
kembali (

);
}

eksport lalai Perihal;
""

Seterusnya, buka `App.js` dan sediakan penghalaan:

“`jsx
import React daripada 'react';
import { BrowserRouter sebagai Penghala, Laluan, Pautan, Suis } daripada 'react-router-dom';
import './App.css';
import HelloWorld daripada './components/HelloWorld';
import Laman Utama daripada './komponen/Laman Utama';
import Perihal daripada './komponen/Perihal';

function App() {
kembali (

);
}

eksport Aplikasi lalai;
""

Dengan ini, kami telah menambah navigasi asas antara halaman yang berbeza dalam aplikasi kami.

penutup

Itu tutorial asas untuk mencipta aplikasi web menggunakan React.js. Kita telah merangkumi persediaan projek, penciptaan komponen, pengurusan keadaan, penggayaan dan penghalaan. React.js mempunyai ekosistem yang kaya dengan pelbagai pustaka dan alatan yang boleh membantu anda membina aplikasi web yang lebih kompleks.

Semoga berjaya, dan saya harap tutorial ini dapat membantu anda memulakan perjalanan anda dengan React.js!