One place for hosting & domains

      untuk

      Cara Menggunakan ViewChild di Angular untuk Mengakses Komponen Anak, Arahan, atau Elemen DOM


      Pengantar

      Artikel ini akan memperkenalkan Anda dengan dekorator ViewChild dari Angular.

      Mungkin ada kalanya Anda ingin mengakses arahan, komponen anak, atau elemen DOM dari kelas komponen induk. Dekorator ViewChild menghasilkan elemen pertama yang sesuai dengan suatu arahan, komponen, atau pemilih referensi templat yang ditentukan.

      Menggunakan ViewChild dengan Arahan

      ViewChild memungkinkan untuk mengakses arahan.

      Umpamakan kita memiliki SharkDirective.

      Idealnya, Anda akan menggunakan @angular/cli untuk melakukan generate arahan Anda:

      • ng generate directive shark

      Cara lainnya, Anda mungkin perlu menambahkannya secara manual ke app.module.ts:

      app.module.ts

      import { SharkDirective } from './shark.directive';
      ...
      @NgModule({
        declarations: [
          AppComponent,
          SharkDirective
        ],
        ...
      })
      

      Arahan kita akan mencari elemen dengan atribut appShark dan mengawali teks di dalam elemen dengan kata Shark:

      shark.directive.ts

      import {
        Directive,
        ElementRef,
        Renderer2
      } from '@angular/core';
      
      @Directive(
        { selector: '[appShark]' }
      )
      export class SharkDirective {
        creature="Dolphin";
      
        constructor(elem: ElementRef, renderer: Renderer2) {
          let shark = renderer.createText('Shark ');
          renderer.appendChild(elem.nativeElement, shark);
        }
      }
      

      Selanjutnya, kita akan menambahkan Shark ke Fin dengan menggunakannya di dalam templat komponen:

      app.component.html

      <span appShark>Fin!</span>
      

      Ketika melihat aplikasi di dalam peramban, akan muncul tampilan seperti:

      Output

      Shark Fin!

      Sekarang, kita dapat mengakses variabel instans creature dari SharkDirective dan menetapkan variabel instans extraCreature dengan nilainya:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit
      } from '@angular/core';
      import { SharkDirective } from './shark.directive';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent implements AfterViewInit {
        extraCreature: string;
      
        @ViewChild(SharkDirective)
        set appShark(directive: SharkDirective) {
          this.extraCreature = directive.creature;
        };
      
        ngAfterViewInit() {
          console.log(this.extraCreature); // Dolphin
        }
      }
      

      Kita menggunakan penentu di sini untuk menentukan variabel extraCreature. Perhatikan bahwa kita menunggu kait siklus hidup AfterViewInit untuk mengakses variabel, karena ini saatnya komponen anak dan arahan menjadi tersedia.

      Ketika melihat aplikasi di peramban, kita akan tetap melihat pesan "Shark Fin!". Namun, dalam log konsol, akan muncul tampilan:

      Output

      Dolphin

      Komponen induk dapat mengakses nilai dari arahan.

      Menggunakan ViewChild dengan Elemen DOM

      ViewChild memungkinkan untuk mengakses elemen DOM asli yang memiliki variabel referensi templat.

      Umpamakan kita memiliki <input> dalam templat dengan variabel referensi #someInput:

      app.component.html

      <input #someInput placeholder="Your favorite sea creature">
      

      Sekarang, kita dapat mengakses <input> dengan ViewChild dan menetapkan value:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit,
        ElementRef
      } from '@angular/core';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent implements AfterViewInit {
        @ViewChild('someInput') someInput: ElementRef;
        ngAfterViewInit() {
          this.someInput.nativeElement.value="Whale!";
        }
      }
      

      Ketika ngAfterViewInit dijalankan, nilai <input> akan ditetapkan menjadi:

      Output

      Whale!

      Komponen induk dapat mengatur nilai dari Element DOM anak.

      Menggunakan ViewChild dengan Komponen Anak

      ViewChild memungkinkan untuk mengakses komponen anak dan memanggil variabel instans akses atau metode yang tersedia bagi anak.

      Umpamakan kita memiliki ChildComponent. Idealnya, Anda akan menggunakan @angular/cli untuk melakukan generate kompenen:

      • ng generate component child --flat

      Cara lainnya, Anda mungkin perlu menciptakan berkas child.component.css dan child.component.html serta menambahkannya secara manual ke app.module.ts:

      app.module.ts

      import { ChildComponent } from './child.component';
      ...
      @NgModule({
        declarations: [
          AppComponent,
          ChildComponent
        ],
        ...
      })
      

      Kita akan menambahkan metode whoAmI ke ChildComponent yang menghasilkan pesan:

      child.component.ts

      whoAmI() {
        return 'I am a child component!';
      }
      

      Selanjutnya, kita akan mereferensikan komponen di dalam templat aplikasi kita:

      app.component.html

      <app-child>child works!</app-child>
      

      Sekarang, kita dapat memanggil metode whoAmI dari dalam kelas komponen induk dengan ViewChild seperti ini:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit
      } from '@angular/core';
      import { ChildComponent } from './child.component';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css'],
      })
      export class AppComponent implements AfterViewInit {
        @ViewChild(ChildComponent) child: ChildComponent;
        ngAfterViewInit() {
          console.log(this.child.whoAmI()); // I am a child component!
        }
      }
      

      Ketika melihat aplikasi di peramban, log konsol akan menampilkan:

      Output

      I am a child component!

      Komponen induk dapat memanggil metode whoAmI dari komponen anak.

      Kesimpulan

      Anda telah mempelajari cara menggunakan ViewChild untuk mengakses suatu arahan, komponen anak, dan elemen DOM dari kelas komponen induk.

      Jika referensi berubah menjadi elemen baru secara dinamis, ViewChild akan secara otomatis memperbarui referensinya.

      Dalam kasus saat Anda ingin mengakses beberapa anak, Anda akan menggunakan ViewChildren.

      Jika Anda ingin mempelajari lebih lanjut tentang Angular, lihat halaman topik Angular kami untuk proyek latihan dan pemrograman.



      Source link

      Empat Metode untuk Mencari di Dalam Larik di JavaScript


      Dalam JavasScript, ada banyak cara yang berguna untuk menemukan item di Larik (Array). Anda selalu dapat kembali menggunakan perulangan for dasar, tetapi dengan ES6+, ada banyak metode untuk mengulang data larik dan menemukan apa yang Anda perlukan dengan mudah.

      Dengan begitu banyak metode berbeda, manakah yang Anda gunakan dan dalam kasus apa? Misalnya, saat mencari di dalam larik, apakah Anda ingin tahu jika elemennya ada di dalam larik? Apakah Anda memerlukan indeks dari elemen atau elemennya itu sendiri?

      Dengan setiap metode berbeda yang akan kita bahas, penting untuk memahami bahwa semua itu adalah metode bawaan pada Array.prototype. Itu berarti Anda hanya perlu menambatkannya ke larik apa pun dengan notasi titik. Itu juga berarti metode ini tidak tersedia pada objek atau hal lainnya selain Larik (meskipun ada tumpang tindih dengan String).

      Kita akan membahas metode-metode Larik berikut:

      includes

      const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];
      
      alligator.includes("thick scales"); // returns true
      

      Metode .includes() menghasilkan nilai boolean dan sempurna untuk memberi tahu Anda jika suatu elemen ada di dalam larik atau tidak. Ini memberikan jawaban true atau false yang sederhana. Ini adalah sintaks dasarnya:

      arr.includes(valueToFind, [fromIndex]);
      

      Kini, seperti yang Anda lihat dalam contoh, kita hanya memiliki satu parameter – valueToFind. Ini adalah nilai untuk dicocokkan dalam larik. fromIndex opsional adalah angka, yang mengindikasikan dari indeks apa Anda ingin untuk memulai pencarian (asali adalah 0, yang berarti keseluruhan larik akan dicari). Jadi, karena dalam contoh kita item ‘thick scales’ berada di indeks 0, yang berikut ini akan menjadi salah: alligator.includes('thick scales', 1); karena pencarian dimulai dari indeks 1 dan seterusnya.

      Sekarang, ada beberapa hal penting yang harus diperhatikan. Metode .includes() ini menggunakan perbandingan yang ketat. Itu berarti, dari contoh di atas, yang berikut ini akan menghasilkan false: alligator.includes('80'); Itu karena meskipun 80 == '80' adalah benar, 80 === '80' adalah salah – jenis berbeda tidak akan berhasil melewati perbandingan yang ketat.

      find

      Bagaimana .find() berbeda dari metode includes()? Jika dalam contoh kita hanya mengubah teks “includes” menjadi “find”, kita akan mendapat pesan kesalahan ini:

      Uncaught TypeError: thick scales is not a function
      

      Itu karena metode pencarian ini membutuhkan fungsi yang harus dimasukkan. Itu karena metode pencarian tidak hanya akan menggunakan operator perbandingan sederhana seperti yang dilakukan “includes()”. Alih-alih, ini akan memasukkan setiap elemen ke dalam fungsi dan melihat apakah itu menghasilkan true atau false. Jadi, meskipun ini berfungsi: alligator.find(() => 'thick scales');, Anda mungkin ingin menempatkan operator perbandingan Anda di dalam fungsi agar mendapatkan hasil yang relevan.

      const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];
      
      alligator.find(el => el.length < 12); // returns '4 foot tail'
      

      Fungsi sederhana dalam metode pencarian kita ini mencari setiap elemen dari larik, dengan alias dari ‘el’ yang kita berikan, dan berhenti ketika menemukan elemen pertama yang benar. Dalam kasus kita, true (benar) berarti memiliki properti panjang kurang dari 12 (angka tidak memiliki properti panjang). Anda tentu dapat membuat fungsi ini serumit mungkin sesuai keperluan, yang membuat kondisi benar memenuhi kebutuhan Anda.

      Perhatikan juga, ini tidak menghasilkan true. Metode pencarian tidak menghasilkan boolean, tetapi menghasilkan elemen yang cocok pertama. Jika tidak ada elemen yang cocok – yang berarti tidak ada elemen yang memenuhi kriteria yang didefinisikan dalam fungsi – maka hasilnya adalah undefined.. Juga perhatikan bahwa yang dihasilkan adalah elemen yang pertama, jadi jika ada lebih dari satu elemen di dalam larik yang memenuhi kriteria, metode ini hanya akan mengambil instans pertama. Dalam contoh kita, jika ada string lainnya dengan panjang kurang dari 12 setelah ‘4 feet tall’, ini tidak akan mengubah hasil kita.

      Dalam contoh ini, kita hanya menggunakan pemanggilan kembali dengan satu parameter. Anda juga dapat menambahkan parameter untuk merujuk ke indeks elemen saat ini. Parameter lain dapat menjadi keseluruhan larik itu sendiri, tetapi saya menemukan hal ini jarang digunakan. Berikut adalah contoh penggunaan indeks:

      alligator.find((el, idx) => typeof el === "string" && idx === 2); // returns '4 foot tall'
      

      Kita tahu dalam larik kita ada 3 elemen berbeda yang memenuhi kondisi pertama (typeof el === ‘string’). Jika ini adalah satu-satunya kondisi kita, hasil yang muncul adalah yang pertama, ‘thick scales’. Namun, perbedaannya adalah hanya satu yang memiliki indeks 2 dan itu adalah ‘4 foot tall’.

      Berbicara tentang indeks, metode larik yang mirip adalah .findIndex(). Metode ini juga menerima fungsi, tetapi seperti yang Anda duga, metode ini menghasilkan indeks elemen alih-alih elemen itu sendiri.

      indexOf

      const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];
      
      alligator.indexOf("rounded snout"); // returns 3
      

      Seperti metode .includes(), .indexOf() menggunakan perbandingan ketat, bukan fungsi seperti yang kita lihat pada metode .find(). Namun, tidak seperti includes(), metode ini menghasilkan indeks dari elemen, alih-alih boolean. Anda juga dapat mengindikasikan pencarian akan dimulai di indeks yang berada dalam larik.

      Saya merasa indexOf() sangat berguna. Ini cepat dan mudah, dapat memberi tahu Anda lokasi elemen di dalam larik, dan dapat memberi tahu Anda jika elemen ada di dalam larik. Bagaimana metode ini memberi tahu Anda ketika elemen itu ada? Pada dasarnya, kita dapat mengetahui bahwa elemen ada jika hasil yang diberikan adalah angka positif, dan jika hasilnya adalah -1, kita tahu bahwa elemen itu tidak ada.

      alligator.indexOf("soft and fluffy"); // returns -1
      alligator.indexOf(80); // returns 1
      alligator.indexOf(80, 2); // returns -1
      

      Seperti yang Anda dapat lihat, meskipun kita dapat menemukan metode find() atau findIndex() untuk memberikan informasi yang sama, metode ini memerlukan penulisan yang jauh lebih sedikit. Kita tidak perlu menulis fungsi untuk perbandingan, karena itu sudah ada dalam metode indexOf.

      Sekarang, seperti yang lain, indexOf() juga mengembalikan indeks dari elemen cocok pertama yang ditemukan. JavaScript memberi kita metode larik alternatif .lastIndexOf(). Seperti yang Anda tebak, ini melakukan hal yang sama seperti indexOf() tetapi dimulai dari indeks larik terakhir dan bekerja ke arah belakang. Anda juga dapat menentukan parameter kedua, tetapi ingat bahwa indeks tidak berubah hanya karena Anda menggunakan metode yang berbeda.

      const alligator = ["thick scales", 80, "4 foot tail", "rounded snout", 80];
      
      alligator.indexOf(80); // returns 1
      alligator.lastIndexOf(80); // returns 4
      alligator.indexOf(80, 2); // returns 4
      alligator.lastIndexOf(80, 4); // returns 4
      alligator.lastIndexOf(80, 3); // returns 1
      

      Bonus: filter

      const alligator = ["thick scales", 80, "4 foot tail", "rounded snout", 80];
      
      alligator.filter(el => el === 80); //returns [80, 80]
      

      Metode filter() mirip seperti metode find(), dalam hal mengharuskan fungsi dimasukkan dan kondisi yang dihasilkan. Perbedaan utamanya adalah, filter() selalu menghasilkan suatu larik, bahkan jika hanya ada satu elemen yang cocok. Namun, metode ini akan menghasilkan semua elemen yang cocok, sedangkan find() hanya mengembalikan yang cocok.

      Hal penting tentang filter adalah metode ini menghasilkan semua elemen yang cocok dengan kriteria Anda. Mungkin ini pendapat saya saja, tetapi saya dapat bingung, memikirkan “ini adalah elemen yang saya inginkan untuk filter out”, padahal sebenarnya Anda mengindikasikan elemen yang Anda inginkan untuk filter in.

      Kesimpulan

      Menurut saya, metode termudah untuk digunakan ketika mencari sesuatu adalah metode find(), tetapi seperti yang Anda lihat bahwa ini tergantung kasus Anda.

      • Apakah Anda hanya perlu mengetahui jika elemennya ada? Gunakan .includes().
      • Apakah Anda perlu mendapatkan elemen itu sendiri? Gunakan .find(), atau .filter() untuk beberapa item.
      • Apakah Anda perlu mencari indeks dari elemen? Gunakan .indexof() atau findIndex() untuk pencarian yang lebih kompleks.

      Larik dalam contoh di sini sangatlah sederhana. Anda mungkin menemukan larik dari banyak objek. Berikut adalah beberapa contoh sederhana di bawah ini untuk bernavigasi di hutan dari begitu banyak objek yang disangkarkan:

      const jungle = [
        { name: "frog", threat: 0 },
        { name: "monkey", threat: 5 },
        { name: "gorilla", threat: 8 },
        { name: "lion", threat: 10 }
      ];
      
      // break the object down in order to use .includes() or .indexOf()
      const names = jungle.map(el => el.name); // returns ['frog', 'monkey', 'gorilla', 'lion']
      console.log(names.includes("gorilla")); // returns true
      console.log(names.indexOf("lion")); // returns 3 - which corresponds correctly assuming no sorting was done
      
      // methods we can do on the array of objects
      console.log(jungle.find(el => el.threat == 5)); // returns object - {name: "monkey", threat: 5}
      console.log(jungle.filter(el => el.threat > 5)); // returns array - [{name: "gorilla", threat: 8}, {name: 'lion', threat: 10}]
      



      Source link

      Cara Mengaktifkan Perenderan Sisi-Server untuk Aplikasi React


      Pengantar

      Perenderan sisi-server atau server-side rendering (SSR) adalah teknik populer untuk merender aplikasi laman tunggal (single page application atau SPA) sisi-klien pada server, lalu mengirim laman yang telah dirender sepenuhnya ke klien. Ini memungkinkan komponen dinamis untuk disajikan sebagai markup HTML statis.

      Pendekatan ini dapat berguna untuk optimisasi mesin pencari (SEO) ketika pengindeksan tidak menangani JavaScript dengan benar. Ini juga dapat bermanfaat dalam situasi ketika proses pengunduhan bundel JavaScript besar terganggu oleh jaringan yang lambat.

      Dalam tutorial ini, Anda akan menginisialisasi aplikasi React menggunakan Create React App, lalu memodifikasi proyek tersebut untuk mengaktifkan perenderan sisi-server.

      Di akhir tutorial ini, Anda akan memiliki proyek yang berjalan dengan aplikasi React sisi-klien dan aplikasi Express sisi-server.

      Catatan: Sebagai alternatif, Next.js menawarkan pendekatan modern untuk menciptakan aplikasi statis dan dirender oleh server, yang dibangun dengan React.

      Prasyarat

      Untuk menyelesaikan tutorial ini, Anda memerlukan:

      Tutorial ini diverifikasi dengan Node v14.4.0 dan npm v6.14.5.

      Langkah 1 — Menciptakan Aplikasi React dan Memodifikasi Komponen Aplikasi

      Pertama-tama, kita menggunakan npx untuk memulai aplikasi React yang baru menggunakan versi terbaru dari Create React App.

      Mari kita sebut aplikasi kita my-ssr-app:

      Kemudian, kita lakukan cd ke direktori baru:

      cd my-ssr-app
      

      Terakhir, kita mulai aplikasi sisi-klien baru dalam rangka memverifikasi instalasi tersebut:

      Anda akan melihat contoh tampilan aplikasi React di jendela peramban.

      Sekarang, mari kita ciptakan komponen <Home>:

      Selanjutnya, tambahkan kode berikut ke berkas Home.js:

      src/Home.js

      import React from 'react';
      
      export default props => {
        return <h1>Hello {props.name}!</h1>;
      };
      

      Ini akan menciptakan tajuk <h1> dengan pesan "Hello" yang ditujukan ke suatu nama.

      Selanjutnya, mari kita render <Home> dalam komponen <App>. Buka berkas App.js:

      Kemudian, ganti baris kode yang ada saat ini dengan baris kode baru berikut:

      src/App.js

      import React from 'react';
      import Home from './Home';
      
      export default () => {
        return <Home name="Sammy" />;
      };
      

      Ini meneruskan suatu name ke komponen <Home> sehingga pesan yang kita harapkan muncul adalah "Hello Sammy!".

      Dalam berkas index.js pada aplikasi, kita akan menggunakan metode hydrate dari ReactDOM alih-alih render untuk mengindikasikan kepada perender DOM bahwa kita merehidrasi kembali aplikasi setelah melakukan render sisi-server.

      Mari kita buka berkas index.js:

      Kemudian, ganti konten dari berkas index.js dengan kode berikut:

      index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import App from './App';
      
      ReactDOM.hydrate(<App />, document.getElementById('root'));
      

      Itu menjadi akhir dari penyiapan sisi-klien, kita dapat melanjutkan ke penyiapan sisi-server.

      Langkah 2 — Menciptakan Server Express dan Merender Komponen Aplikasi

      Karena kita telah memiliki aplikasi, mari kita siapkan server yang akan mengirimkan versi yang sudah dirender. Kita akan menggunakan Express untuk server kita. Mari kita tambahkan ini ke proyek dengan memasukkan perintah berikut di jendela terminal Anda:

      • npm install express@4.17.1

      Atau, gunakan yarn:

      Selanjutnya, ciptakan direktori server di sebelah direktori src dari aplikasi:

      Kemudian, ciptakan berkas index.js yang akan berisi kode server Express:

      Tambahkan hasil impor yang akan memerlukan dan mendefinisikan sebagian konstanta:

      server/index.js

      import path from 'path';
      import fs from 'fs';
      
      import React from 'react';
      import express from 'express';
      import ReactDOMServer from 'react-dom/server';
      
      import App from '../src/App';
      
      const PORT = process.env.PORT || 3006;
      const app = express();
      

      Selanjutnya, tambahkan kode server dengan beberapa penanganan kesalahan:

      server/index.js

      // ...
      
      app.get('/', (req, res) => {
        const app = ReactDOMServer.renderToString(<App />);
      
        const indexFile = path.resolve('./build/index.html');
        fs.readFile(indexFile, 'utf8', (err, data) => {
          if (err) {
            console.error('Something went wrong:', err);
            return res.status(500).send('Oops, better luck next time!');
          }
      
          return res.send(
            data.replace('<div id="root"></div>', `<div id="root">${app}</div>`)
          );
        });
      });
      
      app.use(express.static('./build'));
      
      app.listen(PORT, () => {
        console.log(`Server is listening on port ${PORT}`);
      });
      

      Seperti yang Anda lihat, kita dapat mengimpor komponen <App> pada aplikasi klien secara langsung dari server.

      Tiga hal penting berlangsung di sini:

      • Kita memberi tahu Express untuk menyajikan konten dari direktori build sebagai berkas statis.
      • Kita menggunakan metode dari ReactDOMServer, renderToString, untuk merender aplikasi kita ke string HTML statis.
      • Kemudian, kita membaca berkas index.html statis dari aplikasi klien yang sudah dibangun, menyuntikkan konten statis dari aplikasi kita di dalam <div> dengan suatu id dari "root", dan mengirimkannya sebagai respons terhadap permintaan.

      Langkah 3 — Mengonfigurasi webpack, Babel, dan Skrip npm

      Agar kode server bekerja, kita perlu membundel dan mentranspilasi ini dengan webpack dan Babel. Untuk melakukannya, mari kita tambahkan dependensi dev ke proyek dengan memasukkan perintah berikut di jendela terminal Anda:

      • npm install webpack@4.42.0 webpack-cli@3.3.12 webpack-node-externals@1.7.2 @babel/core@7.10.4 babel-loader@8.1.0 @babel/preset-env@7.10.4 @babel/preset-react@7.10.4 --save-dev

      Atau, gunakan yarn:

      • yarn add webpack@4.42.0 webpack-cli@3.3.12 webpack-node-externals@1.7.2 @babel/core@7.10.4 babel-loader@8.1.0 @babel/preset-env@7.10.4 @babel/preset-react@7.10.4 --dev

      Catatan: Versi sebelumnya dari tutorial ini menginstal babel-core, babel-preset-env, dan babel-preset-react-app. Paket ini sudah lama diarsipkan, sehingga versi repo mono yang digunakan.

      Selanjutnya, ciptakan berkas konfigurasi Babel:

      Kemudian, tambahkan prasetel env dan react-app:

      .babelrc.json

      {
        "presets": [
          "@babel/preset-env",
          "@babel/preset-react"
        ]
      }
      

      Catatan: Versi sebelumnya dari tutorial ini menggunakan berkas .babelrc (tidak ada ekstensi berkas .json). Ini adalah berkas konfigurasi untuk Babel 6, tetapi ini tidak lagi dapat diterapkan pada Babel 7.

      Sekarang, kita akan menciptakan konfigurasi webpack untuk server yang menggunakan Babel Loader untuk mentranspilasi kode. Mulailah dengan menciptakan berkas:

      Kemudian, tambahkan konfigurasi berikut ke berkas webpack.server.js:

      webpack.server.js

      const path = require('path');
      const nodeExternals = require('webpack-node-externals');
      
      module.exports = {
        entry: './server/index.js',
      
        target: 'node',
      
        externals: [nodeExternals()],
      
        output: {
          path: path.resolve('server-build'),
          filename: 'index.js'
        },
      
        module: {
          rules: [
            {
              test: /.js$/,
              use: 'babel-loader'
            }
          ]
        }
      };
      

      Dengan konfigurasi ini, bundel server kita yang telah ditranspilasi akan menjadi keluaran ke folder server-build di dalam berkas bernama index.js.

      Perhatikan penggunaan target: 'node' dan externals: [nodeExternals()] dari webpack-node-externals, yang akan mengabaikan berkas dari node_modules di dalam bundel; server dapat mengakses berkas ini secara langsung.

      Ini melengkapi instalasi dependensi dan konfigurasi webpack serta Babel.

      Sekarang, kita akan meninjau package.json untuk menambahkan skrip npm pembantu:

      Kita akan menambahkan dev:build-server, dev:start, dan skrip dev ke berkas package.json untuk membangun dan melayani aplikasi SSR kita dengan mudah:

      package.json

      "scripts": {
        "dev:build-server": "NODE_ENV=development webpack --config webpack.server.js --mode=development -w",
        "dev:start": "nodemon ./server-build/index.js",
        "dev": "npm-run-all --parallel build dev:*",
        ...
      },
      

      Kita menggunakan nodemon untuk memulai ulang server saat kita membuat perubahan padanya. Kita juga menggunakan npm-run-all untuk menjalankan beberapa perintah secara paralel.

      Mari kita instal paket itu sekarang dengan memasukkan perintah berikut di jendela terminal Anda:

      • npm install nodemon@2.0.4 npm-run-all@4.1.5 --save-dev

      Atau, gunakan yarn:

      • yarn add nodemon@2.0.4 npm-run-all@4.1.5 --dev

      Dengan ini, Anda dapat menjalankan yang berikut ini untuk membangun aplikasi sisi-klien, membundel dan mentranspilasi kode server, dan memulai server pada :3006:

      Atau, gunakan yarn:

      Konfigurasi webpack server kita akan mengawasi perubahan dan server kita akan memulai ulang jika ada perubahan. Namun, untuk aplikasi klien, saat ini kita masih tetap perlu membangunnya setiap kali kita membuat perubahan. Ada masalah yang terbuka untuk hal itu di sini.

      Sekarang, buka http://localhost:3006/ di peramban web dan Anda akan melihat aplikasi yang terender sisi-server.

      Sebelumnya, kode sumbernya menampilkan:

      Output

      <div id="root"></div>

      Namun sekarang, dengan perubahan yang Anda buat, kode sumbernya menampilkan:

      Output

      <div id="root"><h1 data-reactroot="">Hello <!-- -->Sammy<!-- -->!</h1></div>

      Perenderan sisi-server berhasil mengonversi komponen <App> menjadi HTML.

      Kesimpulan

      Dalam tutorial ini, Anda telah menginisialisasi aplikasi React dan mengaktifkan perenderan sisi-server.

      Dengan tulisan ini, kita telah mempelajari bagian permukaan dari hal-hal yang mungkin dilakukan. Hal-hal cenderung menjadi sedikit lebih rumit setelah perutean, pengambilan data, atau Redux juga perlu menjadi bagian dari aplikasi yang dirender sisi-server.

      Salah satu manfaat utama dari menggunakan SSR adalah memiliki aplikasi yang dapat dijelajahi kontennya, bahkan untuk penjelajah yang tidak mengeksekusi kode JavaScript. Ini dapat membantu optimisasi mesin pencari (SEO) dan menyediakan metadata pada saluran media sosial.

      SSR juga sering kali dapat membantu performa karena aplikasi yang dimuat secara penuh dikirimkan dari server pada permintaan pertama. Untuk aplikasi nontrivial, jarak tempuh Anda mungkin berbeda karena SSR memerlukan penyiapan yang dapat menjadi sedikit rumit, dan ini menciptakan muatan lebih besar pada server. Perihal menggunakan perenderan sisi-server untuk aplikasi React bergantung pada kebutuhan spesifik Anda dan untung-rugi yang paling masuk akal untuk kasus penggunaan Anda.

      Jika Anda ingin mempelajari lebih lanjut tentang React, lihat seri Cara Melakukan Pengodean di React.js dari kami, atau baca halaman topik React kami untuk proyek pemrograman dan latihan.



      Source link