{"id":20580558,"url":"https://github.com/cramouchegit/cara-kerja-react","last_synced_at":"2026-06-05T19:31:27.085Z","repository":{"id":254558627,"uuid":"846904906","full_name":"Cramouchegit/cara-kerja-react","owner":"Cramouchegit","description":"Cara kerja react dengan sebuah project ","archived":false,"fork":false,"pushed_at":"2024-08-24T10:06:22.000Z","size":79,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-06T22:53:26.820Z","etag":null,"topics":["reactjs","tutorial-sourcecode"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Cramouchegit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-24T09:29:34.000Z","updated_at":"2024-08-24T10:09:36.000Z","dependencies_parsed_at":"2024-08-24T10:54:55.442Z","dependency_job_id":null,"html_url":"https://github.com/Cramouchegit/cara-kerja-react","commit_stats":null,"previous_names":["cramouchegit/cara-kerja-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Cramouchegit/cara-kerja-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cramouchegit%2Fcara-kerja-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cramouchegit%2Fcara-kerja-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cramouchegit%2Fcara-kerja-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cramouchegit%2Fcara-kerja-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cramouchegit","download_url":"https://codeload.github.com/Cramouchegit/cara-kerja-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cramouchegit%2Fcara-kerja-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33957498,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-05T02:00:06.157Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["reactjs","tutorial-sourcecode"],"created_at":"2024-11-16T06:24:21.724Z","updated_at":"2026-06-05T19:31:27.056Z","avatar_url":"https://github.com/Cramouchegit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCurrently, two official plugins are available:\n\n- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n\n\u003chr/ \u003e\n\n- # Cara Kerja React di Browser\n\n  ## Rendering Awal:\n\n1. Ketika komponen App pertama kali dirender, React akan merender Tabbed di dalamnya.\n   State activeTab diatur ke 0, sehingga tab pertama (Tab 1) akan aktif.\n   Komponen TabContent dirender dengan konten dari content[0].\n   Interaksi Pengguna:\n\n2. Ketika pengguna mengklik tab lain, fungsi onClick yang dioper ke Tab dipanggil, mengubah activeTab.\n   React kemudian merender ulang komponen Tabbed dengan tab yang baru dipilih, merender ulang TabContent atau AnotherTabContent.\n   Pembaruan State:\n\n3. Ketika pengguna berinteraksi dengan tombol di dalam TabContent, state showDetails dan likes diperbarui.\n   Setiap perubahan state menyebabkan React merender ulang komponen untuk mencerminkan perubahan tersebut di UI.\n   Conditional Rendering:\n\n4. TabContent atau AnotherTabContent hanya dirender jika kondisi tertentu terpenuhi (tergantung nilai activeTab).\n   Pengelolaan State:\n\n5. State dikelola secara lokal dalam komponen, memungkinkan interaksi yang lebih dinamis tanpa harus memuat ulang halaman.\n   Performance:\n\n6. React melakukan \"Virtual DOM diffing\" untuk meminimalisir perubahan di DOM nyata, memastikan performa tetap optimal bahkan saat ada banyak perubahan di UI.\n\n- ## Penjelasan Code dalam Komentar\n\n  ```bash\n    import { useState } from \"react\";\n    import \"./App.css\";\n\n\n    // Mengimpor hook `useState` dari React dan stylesheet \"App.css\".\n    // `useState` digunakan untuk membuat state lokal di dalam komponen.\n  ```\n\n  ```bash\n    const content = [\n    {\n        id: 1,\n        title: \"Pendidikan Berkualitas\",\n        body: \"Mendapatkan pendidikan yang baik dan relevan dengan minat dan tujuan karir Anda adalah langkah pertama menuju sukses. Ini membantu membangun fondasi pengetahuan dan keterampilan yang diperlukan.\",\n    },\n    {\n        id: 2,\n        title: \"Kerja Keras dan Konsistensi\",\n        body: \"Kerja keras, dedikasi, dan konsistensi adalah kunci untuk mencapai tujuan. Tetap fokus pada upaya Anda, terus belajar, dan tidak mudah menyerah adalah bagian penting dari perjalanan menuju sukses.\",\n    },\n    {\n        id: 3,\n        title: \"Networking dan Kolaborasi\",\n        body: \"Membangun hubungan dengan orang lain di bidang Anda, belajar dari mereka, dan bekerja sama dalam proyek-proyek yang relevan dapat membuka pintu untuk peluang baru dan memperluas jaringan profesional Anda.\",\n    },\n  ];\n\n    // Variabel `content` adalah array yang berisi objek-objek dengan `id`, `title`, dan `body`.\n    // Data ini digunakan sebagai konten yang ditampilkan dalam tab.\n  ```\n\n  ```bash\n  export default function App() {\n    return (\n      \u003cdiv\u003e\n        \u003cTabbed content={content} /\u003e\n      \u003c/div\u003e\n    );\n  }\n  \n  // Komponen `App` adalah komponen utama yang akan dirender oleh React.\n  // Komponen ini hanya berfungsi untuk merender komponen `Tabbed` dan meneruskan prop `content`.\n  ```\n\n  ```bash\n    function Tabbed({ content }) {\n      const [activeTab, setActiveTab] = useState(0);\n\n  // `activeTab` adalah state yang menyimpan indeks tab yang aktif.\n  // `setActiveTab` adalah fungsi untuk mengubah state `activeTab`.\n  // Awalnya, `activeTab` diset ke 0, yang berarti tab pertama akan ditampilkan.\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv className=\"tabs\"\u003e\n        \u003cTab num={0} activeTab={activeTab} onClick={setActiveTab} /\u003e\n        \u003cTab num={1} activeTab={activeTab} onClick={setActiveTab} /\u003e\n        \u003cTab num={2} activeTab={activeTab} onClick={setActiveTab} /\u003e\n        \u003cTab num={3} activeTab={activeTab} onClick={setActiveTab} /\u003e\n      \u003c/div\u003e\n\n        {activeTab \u003c= 2 ? (\n          \u003cTabContent\n            item={content.at(activeTab)}\n            key={content.at(activeTab).id}\n          /\u003e\n        ) : (\n          \u003cAnotherTabContent /\u003e\n        )}\n      \u003c/div\u003e\n    );\n  }\n\n    // Komponen `Tabbed` adalah komponen yang mengatur logika untuk menampilkan tab.\n    // `activeTab` digunakan untuk menentukan tab mana yang aktif.\n    // Ketika salah satu tab di klik, `setActiveTab` dipanggil untuk mengubah state `activeTab`.\n    // Komponen `TabContent` akan dirender jika `activeTab` adalah 0, 1, atau 2.\n    // Jika `activeTab` lebih besar dari 2, `AnotherTabContent` akan dirender.\n  ```\n\n  ```bash\n  function Tab({ num, activeTab, onClick }) {\n    return (\n      \u003cbutton\n        className={activeTab === num ? \"tab active\" : \"tab\"}\n        onClick={() =\u003e onClick(num)}\n        \u003e\n        Tab {num + 1}\n      \u003c/button\u003e\n    );\n  }\n\n  // Komponen `Tab` adalah komponen yang bertanggung jawab untuk merender setiap tombol tab.\n  // Jika tab ini adalah tab aktif, maka kelas \"active\" ditambahkan untuk mengubah gaya.\n  // Ketika tombol di klik, `onClick` dipanggil dengan parameter `num` untuk mengubah tab yang aktif.\n  ```\n\n  ```bash\n  function TabContent({ item }) {\n    const [showDetails, setShowDetails] = useState(true);\n    const [likes, setLikes] = useState(0);\n\n  // `showDetails` digunakan untuk menentukan apakah konten tab akan ditampilkan atau disembunyikan.\n  // `likes` digunakan untuk menyimpan jumlah likes yang diberikan pada konten tab.\n\n  function handleInc() {\n    setLikes((likes) =\u003e likes + 1);\n  }\n\n  function handleLikes() {\n    handleInc();\n    handleInc();\n    handleInc();\n  }\n\n  // `handleInc` adalah fungsi untuk menambah jumlah likes dengan 1.\n  // `handleLikes` memanggil handleInc tiga kali untuk menambah jumlah likes sebesar 3.\n\n  function handleUndo() {\n    setShowDetails(true);\n    setLikes(0);\n  }\n\n  function handleUndoLater() {\n    setTimeout(handleUndo, 2000);\n  }\n\n  // `handleUndo` mengatur ulang tampilan ke kondisi awal (menampilkan detail dan mengatur jumlah likes ke 0).\n  // `handleUndoLater` menunggu selama 2 detik sebelum memanggil handleUndo.\n\n    return (\n      \u003cdiv className=\"tab-content\"\u003e\n        \u003ch4\u003e{item.title}\u003c/h4\u003e\n        {showDetails \u0026\u0026 \u003cp\u003e{item.body}\u003c/p\u003e}\n  \n        \u003cdiv className=\"tab-actions\"\u003e\n          \u003cbutton onClick={() =\u003e setShowDetails((h) =\u003e !h)}\u003e\n            {showDetails ? \"Sembunyikan\" : \"Tampilkan\"} Isi\n          \u003c/button\u003e\n  \n          \u003cdiv className=\"hearts-counter\"\u003e\n            \u003cspan\u003e{likes} 👍\u003c/span\u003e\n            \u003cbutton onClick={handleInc}\u003e+1\u003c/button\u003e\n            \u003cbutton onClick={handleLikes}\u003e+3\u003c/button\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n  \n        \u003cdiv className=\"tab-undo\"\u003e\n          \u003cbutton onClick={handleUndo}\u003eBatal\u003c/button\u003e\n          \u003cbutton onClick={handleUndoLater}\u003eBatal dalam 2d\u003c/button\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    );\n  }\n\n  // Komponen `TabContent` digunakan untuk menampilkan konten dari tab yang dipilih.\n  // Komponen ini memiliki beberapa fitur seperti menampilkan/menyembunyikan detail,\n  // meningkatkan jumlah likes, dan membatalkan aksi dengan mengatur ulang state.\n\n  ```\n\n  ```bash\n    function AnotherTabContent() {\n      return (\n      \u003cdiv className=\"tab-content\"\u003e\n        \u003ch4\u003eSaya adalah tab yg berbeda, jadi data pada State akan hilang 💣\u003c/h4\u003e\n        \u003cp\u003e\n          Pada saat kamu kembali ke tab yang memiliki data, maka akan hilang dan\n          mulai dari awal.\n        \u003c/p\u003e\n      \u003c/div\u003e\n    );\n  }\n\n  // `AnotherTabContent` adalah komponen yang dirender ketika tab lain dipilih (selain 0, 1, atau 2).\n  // Ini hanya menampilkan pesan bahwa data state akan hilang jika tab ini dipilih.\n  ```\n\n\n- ## Installation\n\n1. Clone the repository:\n\n   ```bash\n   https://github.com/Cramouchegit/cara-kerja-react.git\n   ```\n\n2. Navigate to the project directory:\n\n   ```bash\n   cd your-project\n   ```\n\n3. Install module ReactJS dependencies:\n\n   ```bash\n   bun install\n   ```\n\n4. Start the development server:\n\n   ```bash\n   bun run dev\n   ```\n\n### Usage\n\nVisit `http://localhost:5173` in your browser to access the web-based landing page generator.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcramouchegit%2Fcara-kerja-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcramouchegit%2Fcara-kerja-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcramouchegit%2Fcara-kerja-react/lists"}