Geekly articles weekly

Buka webinar “Membuat Aplikasi di Webpack + React + Express”

Halo semuanya!

Pada bulan Juli 2018, guru kami di kursus Pengembang JavaScript, Yuri Dvorzhetsky, mengadakan webinar terbuka tentang topik “Membuat Aplikasi di Webpack + Bereaksi + Ekspres”, namun, sebagai bagian dari kursus kedua, di mana ia bertindak sebagai guru di salah satu modul yang didedikasikan untuk JavaScript. Dalam materi ini Anda dapat membiasakan diri dengan video dan menceritakan kembali secara singkat kelas master sebelumnya.

Pekerjaan dalam pelajaran terbuka dilakukan sesuai dengan rencana berikut:

  1. Memperkenalkan Node JS dan Express JS.
  2. Memperkenalkan Webpack.
  3. Memperkenalkan Bereaksi.

Jadi ayo pergi!


Node JS


Dengan munculnya standar ES6 baru, popularitas JavaScript telah meningkat secara nyata, sebagaimana dibuktikan oleh statistik yang sama pada jumlah permintaan tarikan di GitHub untuk 2017, di mana JS mengambil tempat pertama.

Salah satu driver JS adalah Node JS, platform perangkat lunak berbasis pada mesin V8 (menerjemahkan JavaScript ke dalam kode mesin) dan mengubah JavaScript dari bahasa yang sangat khusus ke bahasa tujuan umum. Banyak orang menyebut Node JS "sisi server" JavaScript, tetapi di sini definisi "server" daripada "server" lebih tepat. Misalnya, Node JS memiliki lingkungan yang sangat kaya, termasuk manajer paketnya sendiri yang disebut npm, yang dapat Anda jalankan dengan aman di mesin Anda (repositori tersedia di npmjs.com). Dan ini bukan satu-satunya manajer paket, ada yang lain. File konfigurasi adalah package.json dan mudah ditebak bahwa itu dikonfigurasi dalam format JSON.

Sebagai bagian dari pengantar Node JS, pengguna diminta untuk menyelesaikan langkah-langkah berikut:

  • Unduh NodeJS dari situs resmi nodejs.org/en/;
  • instal di komputer dan periksa versinya;
  • pastikan simpul –v berjalan di konsol.

Langkah selanjutnya adalah pembuatan proyek Node JS pertama. Anda bisa melakukan ini dalam satu dari dua cara:

  • perintah npm init (terus setuju dengan semuanya dengan menekan enter);
  • dengan mengunduh repositori dari tautan di GitHub dan memperkenalkan perintah git checkout 0.

Langkah selanjutnya adalah mengenal Express JS.

Ekspresikan js


Express JS adalah server web populer untuk lingkungan Node JS. Dalam hal Python, itu adalah sesuatu seperti Django, hanya di sana, pada kenyataannya, tidak ada yang lain selain metode REST. Express JS sempurna untuk membuat layanan REST yang menerima dan mengirim JSON, tetapi secara umum layanan ini cukup asketis, jadi semua yang Anda butuhkan diterima, seperti yang mereka katakan, "kacau". Omong-omong, server web lain juga dibuat atas dasar itu. Dalam hal ini, Anda perlu memahami bahwa Express adalah sesuatu seperti tautan perantara (middleware), yang masih perlu dikonfigurasi dan diisi dengan logika.
Sebagai bagian dari webinar, Express JS diinstal menggunakan perintah install instal npm dengan tambahan sakelar-save. Anda juga bisa langsung memeriksa di git (git checkout 1) dengan menginstal ejaan npm. Sebagai hasilnya, node_modules / folder telah dibuat, dan konten package.json berubah (dependensi yang sesuai muncul).

Setelah pekerjaan persiapan, tiba saatnya untuk menulis server itu sendiri:

  1. Pembuatan file /server.js di root proyek.
  2. Menempatkan di dalamnya kode tertentu yang ditulis dalam JavaScript. Tujuan dari skrip ini adalah:

- mendapatkan ekspres dari node_modules "misterius" /;
- Menambahkan handler ke URL /;
- luncurkan Node JS (menggunakan node server.js atau perintah mulai npm).

Anda juga bisa memeriksa tag nomor 2 (git checkout 2).

JS, ES6 dan pengalihan


Seperti yang disebutkan sebelumnya, ES6 adalah standar JS saat ini. Ini adalah serangkaian fitur yang tidak sepenuhnya didukung oleh browser apa pun (hanya sebagian dari set yang didukung). Akibatnya, muncul pertanyaan: bagaimana jika kita ingin menulis di ES6 modern, dan hanya ES5.1 yang didukung di browser? Di sini transpiling datang untuk menyelamatkan. Idenya adalah sebagai berikut:

  1. kami memiliki kode yang ditulis dalam ES6;
  2. kami mengkompilasinya (ES6 dikonversi ke ES5.1);
  3. JS-ku yang dihasilkan dapat ditempatkan pada halaman browser.

Akibatnya, menjadi mungkin untuk menggunakan tidak hanya ES6, tetapi juga dialek dan ekstensi yang berbeda, sehingga meningkatkan kekuatan JS, misalnya:

  • "Typed" JavaScript TypeScript (TS);
  • JSX - XHTML dalam JS (React framework);
  • Pengecek tipe aliran - statis.

Salah satu transpiling yang paling populer dan kuat adalah Babel. Dialah yang digunakan untuk memecahkan masalah pelajaran terbuka.

Manfaat Perakitan:

  • Anda dapat mengumpulkan semua file JS dalam satu bundel;
  • bundel dapat diminimalkan dan dikaburkan;
  • Anda dapat secara bersamaan menjalankan KURANG-> CSS, dll.

Paket web


Webpack adalah salah satu kolektor paling canggih. Secara konseptual rumit, terutama dalam hal terminologi, tetapi tidak ada bandingannya, dan versi terbaru lebih sederhana daripada yang sebelumnya. Namun, Anda tidak perlu takut, karena membuat konfigurasi dengan itu adalah pekerjaan satu kali. Dan tanpa berlebihan, jumlah roti yang termasuk dalam Webpack bisa menjadi "makan berlebihan".

Sebagai contoh, webpack.config.js ditunjukkan kepada pendengar webinar dan setiap baris file diperiksa secara terperinci untuk memahami terminologi secara keseluruhan.

Langkah selanjutnya adalah membuat klien dengan React dan Webpack yang telah dikonfigurasi sebelumnya (perintah npx minimal-reaksi klien atau git checkout 3 untuk orang-orang malas). Setelah itu, Anda bisa pergi ke klien cd / folder yang dibuat dengan cara ini dan membuka file webpack.config.js, sebuah fragmen yang ditunjukkan sedikit lebih awal.

Bereaksi


Secara bertahap, tiba saatnya untuk berkenalan dengan React - pustaka JavaScript open source untuk mengembangkan antarmuka pengguna.

Untuk pertama kalinya melihat React dan perendaman “lunak” di lingkungannya, siswa diminta untuk membuka client / src / index.js dan, jika tidak ada yang terjadi, buka client / src / komponen / app.js.
Inti dari React adalah JSX. Ini adalah dialek JS dan XHTML yang ditulis dalam JS. Terlepas dari kenyataan bahwa Bereaksi dapat digunakan tanpa BEJ, semua kekuatannya justru ada di BEJ. Adapun Bereaksi sendiri, ini adalah salah satu kerangka kerja paling populer menurut Hackernoon, berdasarkan pada pendekatan komponen. Ini memiliki sejumlah besar paket dukungan dan infrastruktur yang sangat besar. Aplikasi itu sendiri adalah seperangkat komponen yang berisi markup dan perilaku mereka.

Bereaksi Fitur:

  • komponen dapat saling menggunakan;
  • JS ini berjalan di browser;
  • pada kenyataannya, tidak ada markup di browser, tetapi muncul ketika browser klien mengeksekusi kode ini;
  • komponen membuat catatan mereka, dan komponen yang digunakan membuat sendiri;
  • markup tidak harus statis dan tidak;
  • Anda dapat meneruskan informasi ke komponen anak;
  • komponen dapat dibuat secara kondisional.

Setelah berkenalan dengan Bereaksi, bagian praktis dari webinar berlanjut, sebagai akibatnya langkah-langkah berikut diikuti:

  1. luncurkan webpack di folder klien (client / npm run dev);
  2. menulis komponen sederhana Anda sendiri sesuai dengan instruksi guru atau melalui git checkout 4 (Webpack tidak dapat dihentikan).

Selanjutnya, para siswa diminta untuk menggunakan benda-benda props dan melakukan rendering tipodinamik (git checkout 5).
Nuansa alat peraga:

  • Mengandung sifat-sifat komponen
  • Anda dapat mentransfer tidak hanya string, tetapi juga objek;
  • Idealnya, komunikasi pada jalur komponen reaksi selalu didasarkan pada alat peraga.

Pada tahap akhir pelatihan praktis, backend dan server web terhubung (git checkout 6).

AKHIR

Terima kasih atas perhatian Anda dan seperti biasa kami menunggu komentar dan saran Anda.

Source: https://habr.com/ru/post/id418855/

More articles:


All Articles