Membina Apl Berita Menggunakan React dan New York Times API

Dalam tutorial ini, saya akan menunjukkan kepada anda cara saya membina apl berita menggunakan React dan New York Times API. Projek ini merupakan cara terbaik untuk saya mengetahui lebih lanjut tentang React, cara bekerja dengan API dan cara menggunakan apl web dengan Vercel.

Perkara yang Kami Akan Liputi:

• Mendapatkan artikel berita daripada New York Times API
• Menambah penomboran dan animasi lancar
• Menggunakan apl pada Vercel

1. Gambaran Keseluruhan Projek

Apl Berita New York Times ialah aplikasi web ringkas yang membolehkan pengguna melihat berita terkini daripada New York Times. Apl ini mendapat data terus daripada New York Times API dan menunjukkannya dalam antara muka yang bersih dan mudah digunakan.

Ciri-ciri Utama:

• Penomoran halaman: Pengguna boleh bergerak melalui halaman artikel berita yang berbeza dengan mudah.
• Animasi Lancar: Artikel dimuatkan dengan peralihan yang lancar, menjadikan apl berasa lebih gilap.
• Pengerahan: Apl ini digunakan pada Vercel, jadi ia tersedia kepada sesiapa sahaja dalam talian. Anda boleh menyemak repositori GitHub untuk melihat semua kod dan mengetahui lebih lanjut.

2. Menyediakan Projek

Sebelum kami memulakan pengekodan, pastikan anda mempunyai perkara berikut pada komputer anda:

• Node.js dan npm: Anda memerlukan ini untuk menjalankan apl React dan memasang alatan lain.
• Kunci API New York Times: Anda boleh mendapatkannya dengan mendaftar di Portal Pembangun NY Times. Langkah Pemasangan Mari sediakan projek pada komputer setempat anda.

1. Klon Repositori:

git clone https://github.com/tomasdevs/the-new-york-times-app.git
cd the-new-york-times-app

2. Pasang Ketergantungan:
Kami perlu memasang alatan untuk kedua-dua bahagian klien dan pelayan apl kami.

cd client
npm install
npm install react-transition-group
cd ../server
npm install

3. Sediakan Pembolehubah Persekitaran:
Cipta fail .env dalam folder pelayan dan tambah kunci API New York Times anda:

KEY_API_NYT=kunci_api_anda_di sini

3. Membina Aplikasi

Mengambil Data daripada New York Times API

Dalam komponen Articles.js, saya menggunakan API Ambil untuk mendapatkan artikel berita terkini. Begini cara ia berfungsi:

const response = await fetch(
  process.env.NODE_ENV === "production"
    ? `https://api.nytimes.com/svc/topstories/v2/home.json?api-key=${process.env.REACT_APP_NYT_API_KEY}`
    : `${process.env.REACT_APP_API_URL}/api/articles`
);

Kod ini memastikan bahawa apabila apl disiarkan secara langsung, ia mendapat data terus daripada New York Times API. Semasa pembangunan, ia mendapat data daripada pelayan tempatan, yang menjadikan ujian lebih mudah.

Menambah Penomboran dan Animasi

Untuk mengendalikan penomboran, saya menambah logik mudah yang membahagikan senarai artikel kepada halaman. Saya juga menggunakan react-transition-group untuk menambah animasi lancar apabila bergerak antara artikel:

<TransitionGroup component="ul" className="articles-list">
  {currentArticles.map((article, index) => (
    <CSSTransition key={index} timeout={500} classNames="article">
      <ArticleItem article={article} />
    </CSSTransition>
  ))}
</TransitionGroup>

4. Cabaran dan Pengajaran

Mengendalikan Isu CORS

Pada mulanya, saya mempunyai beberapa masalah dengan CORS semasa cuba mendapatkan data daripada New York Times API semasa pembangunan tempatan. Saya menyelesaikannya dengan menyediakan pelayan bahagian belakang mudah yang bertindak sebagai proksi. Untuk versi langsung, saya mengambil data terus daripada API untuk memastikan perkara mudah.

Menguruskan Pembolehubah Persekitaran

Saya juga mengetahui betapa pentingnya mengurus pembolehubah persekitaran dengan betul, terutamanya apabila menggunakan platform seperti Vercel. Ini penting untuk memastikan data sensitif, seperti kunci API, selamat.

5. Kesimpulan

Projek ini merupakan pengalaman pembelajaran yang hebat. Ia membantu saya meningkatkan kemahiran saya dalam React, penyepaduan API dan penggunaan web. Saya sangat gembira dengan perkembangan apl itu dan saya teruja untuk membina projek yang lebih kompleks pada masa hadapan.
Jika anda mempunyai sebarang maklum balas atau cadangan, sila hubungi atau tinggalkan ulasan. Anda juga boleh menyemak kod di GitHub dan mencubanya sendiri.
Cuba tunjuk cara langsung di sini!

Terima kasih kerana membaca!

Atas ialah kandungan terperinci Membina Apl Berita Menggunakan React dan New York Times API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!