Pada tutorial ReactJS Bahasa Indonesia kali ini Konsep Koding akan berbagi tutorial mengenai bagaimana caranya mengubah Title, Meta dan Head pada ReactJS, pernah gak sih ketika kamu membuat React JS app dimana default headernya hanya satu untuk semua halaman karena ReactJS yang SPA, Nah title sendiri itu sangat berguna untuk SEO dan pencarian indexing Search Enggine, jadi kamu harus memikirkan hal tersebut.



Nah pada tutorial kali ini saya akan berbagi tutorial ReactJS Bahasa Indonesia mengenai caranya mengubah Header di ReactJS step by step.

Memulai Project

Pertama silahkan buat Project ReactJS terlebih dahulu, jika anda belum membuatnya, nah setelah anda berhasil membuatnya buka di terminal/cmd di Root folder and kemudian install library ini :


npm i react-helmet


Tunggu proses sampai selesai setelah itu ubah file App.js menjadi seperti di bawah ini :


import React, { useState, useEffect, Fragment } from "react";

import axios from "axios";

import { Helmet } from "react-helmet";


export default function App() {

  const [data, setdata] = useState([]);

  const [isLoading, setisLoading] = useState(false);

  const [isError, setisError] = useState(false);


  useEffect(() => {

    setisLoading(true);

    // URL Ganti dengan alamat github atau API kamu atau URL API MU

    // Method @{get, post, put, patch, delete}

    axios

      .get("https://jsonplaceholder.typicode.com/comments?postId=11")

      .then((response) => {

        setdata(response.data);

        setisLoading(false);

      })

      .catch((err) => {

        // Jika Gagal

        setisError(true);

        setisLoading(false);

      });

  }, []);


  if (isLoading) return <h1>Loading data</h1>;

  else if (data && !isError)

    return (

      <Fragment>

        <Helmet>

          <meta charSet="utf-8" />

          <title>Tutorial React JS Konsep Koding</title>

          <link rel="canonical" href="http://mysite.com/example" />

        </Helmet>

        <div className="app" style={{ marginLeft: "5em" }}>

          {data &&

            data.map((item) => (

              <div>

                <hr />

                <h1>{item.name.toUpperCase()}</h1>

                <i>{item.email}</i>

                <h2>{item.body}</h2>

                <hr />

              </div>

            ))}

        </div>

      </Fragment>

    );

  else {

    return <h1>Something Went Wrong</h1>;

  }

}


Kemudian run project anda dan jika berhasil maka tampilannya akan seperti gambar di bawah ini :


Nah title nya sudah berubah dan bisa di terapkan di semua Pages anda di halaman ReactJS anda, sekian semoga tutorial ReactJS ini dapat bermanfaat dan membantu kamu yang sedang mempelajari ReactJS.