[{"data":1,"prerenderedAt":1849},["ShallowReactive",2],{"navigation":3,"/templates/react-setup-guide":95,"/templates/react-setup-guide-surround":1846},[4,23,48],{"title":5,"path":6,"stem":7,"children":8,"icon":22},"Getting Started","/getting-started","1.getting-started/1.index",[9,12,17],{"title":10,"path":6,"stem":7,"icon":11},"About Me","i-lucide-user",{"title":13,"path":14,"stem":15,"icon":16},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Usage","/getting-started/usage","1.getting-started/3.usage","i-lucide-sliders",false,{"title":24,"path":25,"stem":26,"children":27,"page":22},"Essentials","/essentials","2.essentials",[28,33,38,43],{"title":29,"path":30,"stem":31,"icon":32},"Markdown Syntax","/essentials/markdown-syntax","2.essentials/1.markdown-syntax","i-lucide-heading-1",{"title":34,"path":35,"stem":36,"icon":37},"Code Blocks","/essentials/code-blocks","2.essentials/2.code-blocks","i-lucide-code-xml",{"title":39,"path":40,"stem":41,"icon":42},"Prose Components","/essentials/prose-components","2.essentials/3.prose-components","i-lucide-component",{"title":44,"path":45,"stem":46,"icon":47},"Images and Embeds","/essentials/images-embeds","2.essentials/4.images-embeds","i-lucide-image",{"title":49,"path":50,"stem":51,"children":52},"Templates","/templates","templates",[53,56,61,65,70,74,78,83,87,91],{"title":49,"path":50,"stem":54,"icon":55},"templates/index","i-lucide-archive",{"title":57,"path":58,"stem":59,"icon":60},"Panduan Setup HTML/CSS - Dari Template Statis hingga Responsive Design","/templates/html-css-setup-guide","templates/html-css-setup-guide","i-lucide-file-text",{"title":62,"path":63,"stem":64,"icon":60},"Panduan Setup Laravel - Dari Template hingga Ready Production","/templates/laravel-setup-guide","templates/laravel-setup-guide",{"title":66,"path":67,"stem":68,"icon":69},"Next.js SaaS Starter Kit - Panduan Lengkap","/templates/nextjs-saas-starter","templates/nextjs-saas-starter","i-lucide-layout-template",{"title":71,"path":72,"stem":73,"icon":60},"Panduan Setup Next.js - Dari Template hingga Production Ready","/templates/nextjs-setup-guide","templates/nextjs-setup-guide",{"title":75,"path":76,"stem":77,"icon":16},"Panduan Membeli & Download Template","/templates/panduan-beli-download","templates/panduan-beli-download",{"title":79,"path":80,"stem":81,"icon":82},"Panduan Setup Lengkap Semua Tech-Stack","/templates/panduan-setup-all-stack","templates/panduan-setup-all-stack","i-lucide-rocket",{"title":84,"path":85,"stem":86,"icon":60},"Panduan Setup PHP - Dari Template Hingga Production Deployment","/templates/php-setup-guide","templates/php-setup-guide",{"title":88,"path":89,"stem":90,"icon":60},"Product Documentation Template","/templates/product-documentation","templates/product-documentation",{"title":92,"path":93,"stem":94,"icon":60},"Panduan Setup React - Dari Download hingga Konfigurasi","/templates/react-setup-guide","templates/react-setup-guide",{"id":96,"title":92,"body":97,"description":1839,"extension":1840,"links":1841,"meta":1842,"navigation":1843,"path":93,"seo":1844,"stem":94,"__hash__":1845},"docs/templates/react-setup-guide.md",{"type":98,"value":99,"toc":1799},"minimark",[100,105,109,114,119,160,164,214,218,222,279,284,295,300,308,312,396,400,411,415,420,425,447,452,471,476,500,504,508,558,562,593,598,652,656,698,707,715,724,728,734,738,742,753,759,763,771,775,789,796,800,804,903,907,915,1151,1155,1162,1397,1401,1405,1441,1445,1502,1506,1565,1569,1573,1600,1604,1629,1633,1654,1658,1710,1714,1720,1737,1743,1760,1764,1781,1784,1795],[101,102,104],"h1",{"id":103},"panduan-setup-react-dari-download-hingga-konfigurasi","📄 Panduan Setup React - Dari Download hingga Konfigurasi",[106,107,108],"p",{},"Tutorial lengkap untuk memulai proyek React, dari download template hingga siap diproduksi.",[110,111,113],"h2",{"id":112},"_1-persiapan-awal","1. Persiapan Awal",[115,116,118],"h3",{"id":117},"prasyarat","Prasyarat",[120,121,122,138,148,154],"ul",{},[123,124,125,129,130,137],"li",{},[126,127,128],"strong",{},"Node.js"," versi 16+ (download dari ",[131,132,136],"a",{"href":133,"rel":134},"https://nodejs.org",[135],"nofollow","nodejs.org",")",[123,139,140,143,144,147],{},[126,141,142],{},"npm"," atau ",[126,145,146],{},"yarn"," (sudah included saat install Node.js)",[123,149,150,153],{},[126,151,152],{},"Text Editor"," (VS Code, WebStorm, atau sesuai preferensi)",[123,155,156,159],{},[126,157,158],{},"Git"," untuk version control (optional tapi recommended)",[115,161,163],{"id":162},"verifikasi-instalasi","Verifikasi Instalasi",[165,166,171],"pre",{"className":167,"code":168,"language":169,"meta":170,"style":170},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Cek versi Node.js\nnode --version\n\n# Cek versi npm\nnpm --version\n","bash","",[172,173,174,183,194,201,207],"code",{"__ignoreMap":170},[175,176,179],"span",{"class":177,"line":178},"line",1,[175,180,182],{"class":181},"sHwdD","# Cek versi Node.js\n",[175,184,186,190],{"class":177,"line":185},2,[175,187,189],{"class":188},"sBMFI","node",[175,191,193],{"class":192},"sfazB"," --version\n",[175,195,197],{"class":177,"line":196},3,[175,198,200],{"emptyLinePlaceholder":199},true,"\n",[175,202,204],{"class":177,"line":203},4,[175,205,206],{"class":181},"# Cek versi npm\n",[175,208,210,212],{"class":177,"line":209},5,[175,211,142],{"class":188},[175,213,193],{"class":192},[110,215,217],{"id":216},"_2-memilih-cara-membuat-project-react","2. Memilih Cara Membuat Project React",[115,219,221],{"id":220},"opsi-a-menggunakan-create-react-app-paling-mudah","Opsi A: Menggunakan Create React App (Paling Mudah)",[165,223,225],{"className":167,"code":224,"language":169,"meta":170,"style":170},"# Buat project baru\nnpx create-react-app my-react-app\n\n# Masuk ke folder project\ncd my-react-app\n\n# Jalankan development server\nnpm start\n",[172,226,227,232,243,247,252,260,265,271],{"__ignoreMap":170},[175,228,229],{"class":177,"line":178},[175,230,231],{"class":181},"# Buat project baru\n",[175,233,234,237,240],{"class":177,"line":185},[175,235,236],{"class":188},"npx",[175,238,239],{"class":192}," create-react-app",[175,241,242],{"class":192}," my-react-app\n",[175,244,245],{"class":177,"line":196},[175,246,200],{"emptyLinePlaceholder":199},[175,248,249],{"class":177,"line":203},[175,250,251],{"class":181},"# Masuk ke folder project\n",[175,253,254,258],{"class":177,"line":209},[175,255,257],{"class":256},"s2Zo4","cd",[175,259,242],{"class":192},[175,261,263],{"class":177,"line":262},6,[175,264,200],{"emptyLinePlaceholder":199},[175,266,268],{"class":177,"line":267},7,[175,269,270],{"class":181},"# Jalankan development server\n",[175,272,274,276],{"class":177,"line":273},8,[175,275,142],{"class":188},[175,277,278],{"class":192}," start\n",[106,280,281],{},[126,282,283],{},"Keuntungan:",[120,285,286,289,292],{},[123,287,288],{},"Setup otomatis dan mudah",[123,290,291],{},"Cocok untuk pemula",[123,293,294],{},"Webpack sudah dikonfigurasi",[106,296,297],{},[126,298,299],{},"Kekurangan:",[120,301,302,305],{},[123,303,304],{},"Build time lebih lambat",[123,306,307],{},"Kustomisasi terbatas",[115,309,311],{"id":310},"opsi-b-menggunakan-vite-lebih-cepat","Opsi B: Menggunakan Vite (Lebih Cepat)",[165,313,315],{"className":167,"code":314,"language":169,"meta":170,"style":170},"# Buat project dengan Vite\nnpm create vite@latest my-react-app -- --template react\n\n# Masuk ke folder\ncd my-react-app\n\n# Install dependencies\nnpm install\n\n# Jalankan development server\nnpm run dev\n",[172,316,317,322,344,348,353,359,363,368,375,380,385],{"__ignoreMap":170},[175,318,319],{"class":177,"line":178},[175,320,321],{"class":181},"# Buat project dengan Vite\n",[175,323,324,326,329,332,335,338,341],{"class":177,"line":185},[175,325,142],{"class":188},[175,327,328],{"class":192}," create",[175,330,331],{"class":192}," vite@latest",[175,333,334],{"class":192}," my-react-app",[175,336,337],{"class":192}," --",[175,339,340],{"class":192}," --template",[175,342,343],{"class":192}," react\n",[175,345,346],{"class":177,"line":196},[175,347,200],{"emptyLinePlaceholder":199},[175,349,350],{"class":177,"line":203},[175,351,352],{"class":181},"# Masuk ke folder\n",[175,354,355,357],{"class":177,"line":209},[175,356,257],{"class":256},[175,358,242],{"class":192},[175,360,361],{"class":177,"line":262},[175,362,200],{"emptyLinePlaceholder":199},[175,364,365],{"class":177,"line":267},[175,366,367],{"class":181},"# Install dependencies\n",[175,369,370,372],{"class":177,"line":273},[175,371,142],{"class":188},[175,373,374],{"class":192}," install\n",[175,376,378],{"class":177,"line":377},9,[175,379,200],{"emptyLinePlaceholder":199},[175,381,383],{"class":177,"line":382},10,[175,384,270],{"class":181},[175,386,388,390,393],{"class":177,"line":387},11,[175,389,142],{"class":188},[175,391,392],{"class":192}," run",[175,394,395],{"class":192}," dev\n",[106,397,398],{},[126,399,283],{},[120,401,402,405,408],{},[123,403,404],{},"Development server lebih cepat",[123,406,407],{},"Build time lebih singkat",[123,409,410],{},"Modern tooling",[115,412,414],{"id":413},"opsi-c-download-template-react-dari-provider","Opsi C: Download Template React (Dari Provider)",[416,417,419],"h4",{"id":418},"dari-marketplace-populer","Dari Marketplace Populer:",[106,421,422],{},[126,423,424],{},"1. Envato Elements / ThemeForest",[120,426,427,435,438,441],{},[123,428,429,430],{},"Buka ",[131,431,434],{"href":432,"rel":433},"https://themeforest.net",[135],"themeforest.net",[123,436,437],{},"Cari template React dengan keyword: \"React admin\", \"React dashboard\", dll",[123,439,440],{},"Klik template pilihan → \"Buy Now\" (atau gunakan subscription Envato)",[123,442,443,444],{},"Download file ",[172,445,446],{},".zip",[106,448,449],{},[126,450,451],{},"2. Creative Tim",[120,453,454,462,465,468],{},[123,455,456,457],{},"Kunjungi ",[131,458,461],{"href":459,"rel":460},"https://creativetim.com",[135],"creativetim.com",[123,463,464],{},"Pilih template React gratis atau premium",[123,466,467],{},"Klik \"Download\" atau \"Get Free\"",[123,469,470],{},"Extract file ke folder project",[106,472,473],{},[126,474,475],{},"3. UI Kit Libraries",[120,477,478,486,493],{},[123,479,480,485],{},[131,481,484],{"href":482,"rel":483},"https://mui.com",[135],"Material-UI"," - Gratis",[123,487,488,485],{},[131,489,492],{"href":490,"rel":491},"https://chakra-ui.com",[135],"Chakra UI",[123,494,495,485],{},[131,496,499],{"href":497,"rel":498},"https://ant.design",[135],"Ant Design",[110,501,503],{"id":502},"_3-setup-template-react-yang-didownload","3. Setup Template React yang Didownload",[115,505,507],{"id":506},"step-1-extract-dan-persiapan","Step 1: Extract dan Persiapan",[165,509,511],{"className":167,"code":510,"language":169,"meta":170,"style":170},"# Extract file template yang didownload\nunzip template-react.zip\n\n# Masuk ke folder project\ncd template-react\n\n# Lihat struktur folder\nls -la\n",[172,512,513,518,526,530,534,541,545,550],{"__ignoreMap":170},[175,514,515],{"class":177,"line":178},[175,516,517],{"class":181},"# Extract file template yang didownload\n",[175,519,520,523],{"class":177,"line":185},[175,521,522],{"class":188},"unzip",[175,524,525],{"class":192}," template-react.zip\n",[175,527,528],{"class":177,"line":196},[175,529,200],{"emptyLinePlaceholder":199},[175,531,532],{"class":177,"line":203},[175,533,251],{"class":181},[175,535,536,538],{"class":177,"line":209},[175,537,257],{"class":256},[175,539,540],{"class":192}," template-react\n",[175,542,543],{"class":177,"line":262},[175,544,200],{"emptyLinePlaceholder":199},[175,546,547],{"class":177,"line":267},[175,548,549],{"class":181},"# Lihat struktur folder\n",[175,551,552,555],{"class":177,"line":273},[175,553,554],{"class":188},"ls",[175,556,557],{"class":192}," -la\n",[115,559,561],{"id":560},"step-2-install-dependencies","Step 2: Install Dependencies",[165,563,565],{"className":167,"code":564,"language":169,"meta":170,"style":170},"# Install semua package yang dibutuhkan\nnpm install\n\n# Atau gunakan yarn\nyarn install\n",[172,566,567,572,578,582,587],{"__ignoreMap":170},[175,568,569],{"class":177,"line":178},[175,570,571],{"class":181},"# Install semua package yang dibutuhkan\n",[175,573,574,576],{"class":177,"line":185},[175,575,142],{"class":188},[175,577,374],{"class":192},[175,579,580],{"class":177,"line":196},[175,581,200],{"emptyLinePlaceholder":199},[175,583,584],{"class":177,"line":203},[175,585,586],{"class":181},"# Atau gunakan yarn\n",[175,588,589,591],{"class":177,"line":209},[175,590,146],{"class":188},[175,592,374],{"class":192},[106,594,595],{},[126,596,597],{},"Jika ada error:",[165,599,601],{"className":167,"code":600,"language":169,"meta":170,"style":170},"# Clear npm cache\nnpm cache clean --force\n\n# Install ulang\nnpm install\n\n# Atau coba dengan npm ci (recommended untuk production)\nnpm ci\n",[172,602,603,608,621,625,630,636,640,645],{"__ignoreMap":170},[175,604,605],{"class":177,"line":178},[175,606,607],{"class":181},"# Clear npm cache\n",[175,609,610,612,615,618],{"class":177,"line":185},[175,611,142],{"class":188},[175,613,614],{"class":192}," cache",[175,616,617],{"class":192}," clean",[175,619,620],{"class":192}," --force\n",[175,622,623],{"class":177,"line":196},[175,624,200],{"emptyLinePlaceholder":199},[175,626,627],{"class":177,"line":203},[175,628,629],{"class":181},"# Install ulang\n",[175,631,632,634],{"class":177,"line":209},[175,633,142],{"class":188},[175,635,374],{"class":192},[175,637,638],{"class":177,"line":262},[175,639,200],{"emptyLinePlaceholder":199},[175,641,642],{"class":177,"line":267},[175,643,644],{"class":181},"# Atau coba dengan npm ci (recommended untuk production)\n",[175,646,647,649],{"class":177,"line":273},[175,648,142],{"class":188},[175,650,651],{"class":192}," ci\n",[115,653,655],{"id":654},"step-3-konfigurasi-environment-variables","Step 3: Konfigurasi Environment Variables",[165,657,659],{"className":167,"code":658,"language":169,"meta":170,"style":170},"# Buat file .env (jika belum ada)\ncp .env.example .env\n\n# Edit file .env\nnano .env\n# atau buka dengan text editor favorit\n",[172,660,661,666,677,681,686,693],{"__ignoreMap":170},[175,662,663],{"class":177,"line":178},[175,664,665],{"class":181},"# Buat file .env (jika belum ada)\n",[175,667,668,671,674],{"class":177,"line":185},[175,669,670],{"class":188},"cp",[175,672,673],{"class":192}," .env.example",[175,675,676],{"class":192}," .env\n",[175,678,679],{"class":177,"line":196},[175,680,200],{"emptyLinePlaceholder":199},[175,682,683],{"class":177,"line":203},[175,684,685],{"class":181},"# Edit file .env\n",[175,687,688,691],{"class":177,"line":209},[175,689,690],{"class":188},"nano",[175,692,676],{"class":192},[175,694,695],{"class":177,"line":262},[175,696,697],{"class":181},"# atau buka dengan text editor favorit\n",[106,699,700],{},[126,701,702,703,706],{},"Contoh ",[172,704,705],{},".env"," file:",[165,708,713],{"className":709,"code":711,"language":712},[710],"language-text","REACT_APP_API_URL=http://localhost:3000\nREACT_APP_API_KEY=your_api_key_here\nREACT_APP_ENVIRONMENT=development\n","text",[172,714,711],{"__ignoreMap":170},[106,716,717,720,721],{},[126,718,719],{},"Catatan:"," Di React, environment variable harus dimulai dengan ",[172,722,723],{},"REACT_APP_",[110,725,727],{"id":726},"_4-struktur-folder-react-standard","4. Struktur Folder React Standard",[165,729,732],{"className":730,"code":731,"language":712},[710],"src/\n├── components/          # Reusable components\n│   ├── Header.jsx\n│   ├── Footer.jsx\n│   └── Sidebar.jsx\n├── pages/              # Page components\n│   ├── Home.jsx\n│   ├── About.jsx\n│   └── Contact.jsx\n├── styles/             # CSS/SCSS files\n│   └── main.css\n├── utils/              # Helper functions\n│   ├── api.js\n│   └── formatters.js\n├── App.jsx             # Main component\n├── index.jsx           # Entry point\n└── index.css           # Global styles\n\npublic/\n├── index.html\n├── favicon.ico\n└── assets/\n\n.env                     # Environment variables\npackage.json            # Dependencies\n",[172,733,731],{"__ignoreMap":170},[110,735,737],{"id":736},"_5-menjalankan-project","5. Menjalankan Project",[115,739,741],{"id":740},"development-mode","Development Mode",[165,743,745],{"className":167,"code":744,"language":169,"meta":170,"style":170},"npm start\n",[172,746,747],{"__ignoreMap":170},[175,748,749,751],{"class":177,"line":178},[175,750,142],{"class":188},[175,752,278],{"class":192},[106,754,755,756],{},"Aplikasi akan terbuka di ",[172,757,758],{},"http://localhost:3000",[115,760,762],{"id":761},"dengan-hot-reload","Dengan Hot Reload",[120,764,765,768],{},[123,766,767],{},"Perubahan file otomatis mereload browser",[123,769,770],{},"Sangat berguna saat development",[115,772,774],{"id":773},"production-build","Production Build",[165,776,778],{"className":167,"code":777,"language":169,"meta":170,"style":170},"npm run build\n",[172,779,780],{"__ignoreMap":170},[175,781,782,784,786],{"class":177,"line":178},[175,783,142],{"class":188},[175,785,392],{"class":192},[175,787,788],{"class":192}," build\n",[106,790,791,792,795],{},"Ini akan membuat folder ",[172,793,794],{},"build/"," dengan file-file ter-optimize untuk production.",[110,797,799],{"id":798},"_6-konfigurasi-dasar","6. Konfigurasi Dasar",[115,801,803],{"id":802},"install-package-tambahan-yang-umum","Install Package Tambahan yang Umum",[165,805,807],{"className":167,"code":806,"language":169,"meta":170,"style":170},"# React Router (untuk navigation)\nnpm install react-router-dom\n\n# Axios (untuk API calls)\nnpm install axios\n\n# Tailwind CSS (untuk styling)\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n\n# State Management (Redux)\nnpm install @reduxjs/toolkit react-redux\n",[172,808,809,814,824,828,833,842,846,851,869,881,885,890],{"__ignoreMap":170},[175,810,811],{"class":177,"line":178},[175,812,813],{"class":181},"# React Router (untuk navigation)\n",[175,815,816,818,821],{"class":177,"line":185},[175,817,142],{"class":188},[175,819,820],{"class":192}," install",[175,822,823],{"class":192}," react-router-dom\n",[175,825,826],{"class":177,"line":196},[175,827,200],{"emptyLinePlaceholder":199},[175,829,830],{"class":177,"line":203},[175,831,832],{"class":181},"# Axios (untuk API calls)\n",[175,834,835,837,839],{"class":177,"line":209},[175,836,142],{"class":188},[175,838,820],{"class":192},[175,840,841],{"class":192}," axios\n",[175,843,844],{"class":177,"line":262},[175,845,200],{"emptyLinePlaceholder":199},[175,847,848],{"class":177,"line":267},[175,849,850],{"class":181},"# Tailwind CSS (untuk styling)\n",[175,852,853,855,857,860,863,866],{"class":177,"line":273},[175,854,142],{"class":188},[175,856,820],{"class":192},[175,858,859],{"class":192}," -D",[175,861,862],{"class":192}," tailwindcss",[175,864,865],{"class":192}," postcss",[175,867,868],{"class":192}," autoprefixer\n",[175,870,871,873,875,878],{"class":177,"line":377},[175,872,236],{"class":188},[175,874,862],{"class":192},[175,876,877],{"class":192}," init",[175,879,880],{"class":192}," -p\n",[175,882,883],{"class":177,"line":382},[175,884,200],{"emptyLinePlaceholder":199},[175,886,887],{"class":177,"line":387},[175,888,889],{"class":181},"# State Management (Redux)\n",[175,891,893,895,897,900],{"class":177,"line":892},12,[175,894,142],{"class":188},[175,896,820],{"class":192},[175,898,899],{"class":192}," @reduxjs/toolkit",[175,901,902],{"class":192}," react-redux\n",[115,904,906],{"id":905},"setup-react-router","Setup React Router",[106,908,909],{},[126,910,911,914],{},[172,912,913],{},"src/App.jsx",":",[165,916,920],{"className":917,"code":918,"language":919,"meta":170,"style":170},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { BrowserRouter, Routes, Route } from 'react-router-dom'\nimport Home from './pages/Home'\nimport About from './pages/About'\n\nfunction App() {\n  return (\n    \u003CBrowserRouter>\n      \u003CRoutes>\n        \u003CRoute path=\"/\" element={\u003CHome />} />\n        \u003CRoute path=\"/about\" element={\u003CAbout />} />\n      \u003C/Routes>\n    \u003C/BrowserRouter>\n  )\n}\n\nexport default App\n","jsx",[172,921,922,962,979,995,999,1014,1023,1034,1044,1078,1104,1113,1122,1128,1134,1139],{"__ignoreMap":170},[175,923,924,928,932,936,939,942,944,947,950,953,956,959],{"class":177,"line":178},[175,925,927],{"class":926},"s7zQu","import",[175,929,931],{"class":930},"sMK4o"," {",[175,933,935],{"class":934},"sTEyZ"," BrowserRouter",[175,937,938],{"class":930},",",[175,940,941],{"class":934}," Routes",[175,943,938],{"class":930},[175,945,946],{"class":934}," Route",[175,948,949],{"class":930}," }",[175,951,952],{"class":926}," from",[175,954,955],{"class":930}," '",[175,957,958],{"class":192},"react-router-dom",[175,960,961],{"class":930},"'\n",[175,963,964,966,969,972,974,977],{"class":177,"line":185},[175,965,927],{"class":926},[175,967,968],{"class":934}," Home ",[175,970,971],{"class":926},"from",[175,973,955],{"class":930},[175,975,976],{"class":192},"./pages/Home",[175,978,961],{"class":930},[175,980,981,983,986,988,990,993],{"class":177,"line":196},[175,982,927],{"class":926},[175,984,985],{"class":934}," About ",[175,987,971],{"class":926},[175,989,955],{"class":930},[175,991,992],{"class":192},"./pages/About",[175,994,961],{"class":930},[175,996,997],{"class":177,"line":203},[175,998,200],{"emptyLinePlaceholder":199},[175,1000,1001,1005,1008,1011],{"class":177,"line":209},[175,1002,1004],{"class":1003},"spNyl","function",[175,1006,1007],{"class":256}," App",[175,1009,1010],{"class":930},"()",[175,1012,1013],{"class":930}," {\n",[175,1015,1016,1019],{"class":177,"line":262},[175,1017,1018],{"class":926},"  return",[175,1020,1022],{"class":1021},"swJcz"," (\n",[175,1024,1025,1028,1031],{"class":177,"line":267},[175,1026,1027],{"class":930},"    \u003C",[175,1029,1030],{"class":188},"BrowserRouter",[175,1032,1033],{"class":930},">\n",[175,1035,1036,1039,1042],{"class":177,"line":273},[175,1037,1038],{"class":930},"      \u003C",[175,1040,1041],{"class":188},"Routes",[175,1043,1033],{"class":930},[175,1045,1046,1049,1052,1055,1058,1061,1064,1066,1069,1072,1075],{"class":177,"line":377},[175,1047,1048],{"class":930},"        \u003C",[175,1050,1051],{"class":188},"Route",[175,1053,1054],{"class":1003}," path",[175,1056,1057],{"class":930},"=",[175,1059,1060],{"class":930},"\"",[175,1062,1063],{"class":192},"/",[175,1065,1060],{"class":930},[175,1067,1068],{"class":1003}," element",[175,1070,1071],{"class":930},"={\u003C",[175,1073,1074],{"class":188},"Home",[175,1076,1077],{"class":930}," />} />\n",[175,1079,1080,1082,1084,1086,1088,1090,1093,1095,1097,1099,1102],{"class":177,"line":382},[175,1081,1048],{"class":930},[175,1083,1051],{"class":188},[175,1085,1054],{"class":1003},[175,1087,1057],{"class":930},[175,1089,1060],{"class":930},[175,1091,1092],{"class":192},"/about",[175,1094,1060],{"class":930},[175,1096,1068],{"class":1003},[175,1098,1071],{"class":930},[175,1100,1101],{"class":188},"About",[175,1103,1077],{"class":930},[175,1105,1106,1109,1111],{"class":177,"line":387},[175,1107,1108],{"class":930},"      \u003C/",[175,1110,1041],{"class":188},[175,1112,1033],{"class":930},[175,1114,1115,1118,1120],{"class":177,"line":892},[175,1116,1117],{"class":930},"    \u003C/",[175,1119,1030],{"class":188},[175,1121,1033],{"class":930},[175,1123,1125],{"class":177,"line":1124},13,[175,1126,1127],{"class":1021},"  )\n",[175,1129,1131],{"class":177,"line":1130},14,[175,1132,1133],{"class":930},"}\n",[175,1135,1137],{"class":177,"line":1136},15,[175,1138,200],{"emptyLinePlaceholder":199},[175,1140,1142,1145,1148],{"class":177,"line":1141},16,[175,1143,1144],{"class":926},"export",[175,1146,1147],{"class":926}," default",[175,1149,1150],{"class":934}," App\n",[115,1152,1154],{"id":1153},"setup-axios-untuk-api","Setup Axios untuk API",[106,1156,1157],{},[126,1158,1159,914],{},[172,1160,1161],{},"src/utils/api.js",[165,1163,1167],{"className":1164,"code":1165,"language":1166,"meta":170,"style":170},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import axios from 'axios'\n\nconst API = axios.create({\n  baseURL: process.env.REACT_APP_API_URL,\n})\n\n// Add token to headers jika ada\nAPI.interceptors.request.use((config) => {\n  const token = localStorage.getItem('token')\n  if (token) {\n    config.headers.Authorization = `Bearer ${token}`\n  }\n  return config\n})\n\nexport default API\n","javascript",[172,1168,1169,1185,1189,1214,1237,1245,1249,1254,1289,1320,1335,1366,1371,1378,1384,1388],{"__ignoreMap":170},[175,1170,1171,1173,1176,1178,1180,1183],{"class":177,"line":178},[175,1172,927],{"class":926},[175,1174,1175],{"class":934}," axios ",[175,1177,971],{"class":926},[175,1179,955],{"class":930},[175,1181,1182],{"class":192},"axios",[175,1184,961],{"class":930},[175,1186,1187],{"class":177,"line":185},[175,1188,200],{"emptyLinePlaceholder":199},[175,1190,1191,1194,1197,1199,1202,1205,1208,1211],{"class":177,"line":196},[175,1192,1193],{"class":1003},"const",[175,1195,1196],{"class":934}," API ",[175,1198,1057],{"class":930},[175,1200,1201],{"class":934}," axios",[175,1203,1204],{"class":930},".",[175,1206,1207],{"class":256},"create",[175,1209,1210],{"class":934},"(",[175,1212,1213],{"class":930},"{\n",[175,1215,1216,1219,1221,1224,1226,1229,1231,1234],{"class":177,"line":203},[175,1217,1218],{"class":1021},"  baseURL",[175,1220,914],{"class":930},[175,1222,1223],{"class":934}," process",[175,1225,1204],{"class":930},[175,1227,1228],{"class":934},"env",[175,1230,1204],{"class":930},[175,1232,1233],{"class":934},"REACT_APP_API_URL",[175,1235,1236],{"class":930},",\n",[175,1238,1239,1242],{"class":177,"line":209},[175,1240,1241],{"class":930},"}",[175,1243,1244],{"class":934},")\n",[175,1246,1247],{"class":177,"line":262},[175,1248,200],{"emptyLinePlaceholder":199},[175,1250,1251],{"class":177,"line":267},[175,1252,1253],{"class":181},"// Add token to headers jika ada\n",[175,1255,1256,1259,1261,1264,1266,1269,1271,1274,1276,1278,1282,1284,1287],{"class":177,"line":273},[175,1257,1258],{"class":934},"API",[175,1260,1204],{"class":930},[175,1262,1263],{"class":934},"interceptors",[175,1265,1204],{"class":930},[175,1267,1268],{"class":934},"request",[175,1270,1204],{"class":930},[175,1272,1273],{"class":256},"use",[175,1275,1210],{"class":934},[175,1277,1210],{"class":930},[175,1279,1281],{"class":1280},"sHdIc","config",[175,1283,137],{"class":930},[175,1285,1286],{"class":1003}," =>",[175,1288,1013],{"class":930},[175,1290,1291,1294,1297,1300,1303,1305,1308,1310,1313,1316,1318],{"class":177,"line":377},[175,1292,1293],{"class":1003},"  const",[175,1295,1296],{"class":934}," token",[175,1298,1299],{"class":930}," =",[175,1301,1302],{"class":934}," localStorage",[175,1304,1204],{"class":930},[175,1306,1307],{"class":256},"getItem",[175,1309,1210],{"class":1021},[175,1311,1312],{"class":930},"'",[175,1314,1315],{"class":192},"token",[175,1317,1312],{"class":930},[175,1319,1244],{"class":1021},[175,1321,1322,1325,1328,1330,1333],{"class":177,"line":382},[175,1323,1324],{"class":926},"  if",[175,1326,1327],{"class":1021}," (",[175,1329,1315],{"class":934},[175,1331,1332],{"class":1021},") ",[175,1334,1213],{"class":930},[175,1336,1337,1340,1342,1345,1347,1350,1352,1355,1358,1361,1363],{"class":177,"line":387},[175,1338,1339],{"class":934},"    config",[175,1341,1204],{"class":930},[175,1343,1344],{"class":934},"headers",[175,1346,1204],{"class":930},[175,1348,1349],{"class":934},"Authorization",[175,1351,1299],{"class":930},[175,1353,1354],{"class":930}," `",[175,1356,1357],{"class":192},"Bearer ",[175,1359,1360],{"class":930},"${",[175,1362,1315],{"class":934},[175,1364,1365],{"class":930},"}`\n",[175,1367,1368],{"class":177,"line":892},[175,1369,1370],{"class":930},"  }\n",[175,1372,1373,1375],{"class":177,"line":1124},[175,1374,1018],{"class":926},[175,1376,1377],{"class":934}," config\n",[175,1379,1380,1382],{"class":177,"line":1130},[175,1381,1241],{"class":930},[175,1383,1244],{"class":934},[175,1385,1386],{"class":177,"line":1136},[175,1387,200],{"emptyLinePlaceholder":199},[175,1389,1390,1392,1394],{"class":177,"line":1141},[175,1391,1144],{"class":926},[175,1393,1147],{"class":926},[175,1395,1396],{"class":934}," API\n",[110,1398,1400],{"id":1399},"_7-deployment","7. Deployment",[115,1402,1404],{"id":1403},"deploy-ke-vercel-recommended","Deploy ke Vercel (Recommended)",[165,1406,1408],{"className":167,"code":1407,"language":169,"meta":170,"style":170},"# Install Vercel CLI\nnpm install -g vercel\n\n# Deploy\nvercel\n",[172,1409,1410,1415,1427,1431,1436],{"__ignoreMap":170},[175,1411,1412],{"class":177,"line":178},[175,1413,1414],{"class":181},"# Install Vercel CLI\n",[175,1416,1417,1419,1421,1424],{"class":177,"line":185},[175,1418,142],{"class":188},[175,1420,820],{"class":192},[175,1422,1423],{"class":192}," -g",[175,1425,1426],{"class":192}," vercel\n",[175,1428,1429],{"class":177,"line":196},[175,1430,200],{"emptyLinePlaceholder":199},[175,1432,1433],{"class":177,"line":203},[175,1434,1435],{"class":181},"# Deploy\n",[175,1437,1438],{"class":177,"line":209},[175,1439,1440],{"class":188},"vercel\n",[115,1442,1444],{"id":1443},"deploy-ke-netlify","Deploy ke Netlify",[165,1446,1448],{"className":167,"code":1447,"language":169,"meta":170,"style":170},"# Build production\nnpm run build\n\n# Drag & drop folder 'build' ke Netlify\n# Atau gunakan Netlify CLI\nnpm install -g netlify-cli\nnetlify deploy --prod --dir=build\n",[172,1449,1450,1455,1463,1467,1472,1477,1488],{"__ignoreMap":170},[175,1451,1452],{"class":177,"line":178},[175,1453,1454],{"class":181},"# Build production\n",[175,1456,1457,1459,1461],{"class":177,"line":185},[175,1458,142],{"class":188},[175,1460,392],{"class":192},[175,1462,788],{"class":192},[175,1464,1465],{"class":177,"line":196},[175,1466,200],{"emptyLinePlaceholder":199},[175,1468,1469],{"class":177,"line":203},[175,1470,1471],{"class":181},"# Drag & drop folder 'build' ke Netlify\n",[175,1473,1474],{"class":177,"line":209},[175,1475,1476],{"class":181},"# Atau gunakan Netlify CLI\n",[175,1478,1479,1481,1483,1485],{"class":177,"line":262},[175,1480,142],{"class":188},[175,1482,820],{"class":192},[175,1484,1423],{"class":192},[175,1486,1487],{"class":192}," netlify-cli\n",[175,1489,1490,1493,1496,1499],{"class":177,"line":267},[175,1491,1492],{"class":188},"netlify",[175,1494,1495],{"class":192}," deploy",[175,1497,1498],{"class":192}," --prod",[175,1500,1501],{"class":192}," --dir=build\n",[115,1503,1505],{"id":1504},"deploy-ke-github-pages","Deploy ke GitHub Pages",[165,1507,1509],{"className":167,"code":1508,"language":169,"meta":170,"style":170},"# Install gh-pages\nnpm install --save-dev gh-pages\n\n# Add ke package.json:\n# \"homepage\": \"https://username.github.io/repo-name\"\n# \"predeploy\": \"npm run build\"\n# \"deploy\": \"gh-pages -d build\"\n\nnpm run deploy\n",[172,1510,1511,1516,1528,1532,1537,1542,1547,1552,1556],{"__ignoreMap":170},[175,1512,1513],{"class":177,"line":178},[175,1514,1515],{"class":181},"# Install gh-pages\n",[175,1517,1518,1520,1522,1525],{"class":177,"line":185},[175,1519,142],{"class":188},[175,1521,820],{"class":192},[175,1523,1524],{"class":192}," --save-dev",[175,1526,1527],{"class":192}," gh-pages\n",[175,1529,1530],{"class":177,"line":196},[175,1531,200],{"emptyLinePlaceholder":199},[175,1533,1534],{"class":177,"line":203},[175,1535,1536],{"class":181},"# Add ke package.json:\n",[175,1538,1539],{"class":177,"line":209},[175,1540,1541],{"class":181},"# \"homepage\": \"https://username.github.io/repo-name\"\n",[175,1543,1544],{"class":177,"line":262},[175,1545,1546],{"class":181},"# \"predeploy\": \"npm run build\"\n",[175,1548,1549],{"class":177,"line":267},[175,1550,1551],{"class":181},"# \"deploy\": \"gh-pages -d build\"\n",[175,1553,1554],{"class":177,"line":273},[175,1555,200],{"emptyLinePlaceholder":199},[175,1557,1558,1560,1562],{"class":177,"line":377},[175,1559,142],{"class":188},[175,1561,392],{"class":192},[175,1563,1564],{"class":192}," deploy\n",[110,1566,1568],{"id":1567},"_8-troubleshooting-common-issues","8. Troubleshooting Common Issues",[115,1570,1572],{"id":1571},"error-module-not-found","Error: \"Module not found\"",[165,1574,1576],{"className":167,"code":1575,"language":169,"meta":170,"style":170},"# Clear node_modules dan install ulang\nrm -rf node_modules\nnpm install\n",[172,1577,1578,1583,1594],{"__ignoreMap":170},[175,1579,1580],{"class":177,"line":178},[175,1581,1582],{"class":181},"# Clear node_modules dan install ulang\n",[175,1584,1585,1588,1591],{"class":177,"line":185},[175,1586,1587],{"class":188},"rm",[175,1589,1590],{"class":192}," -rf",[175,1592,1593],{"class":192}," node_modules\n",[175,1595,1596,1598],{"class":177,"line":196},[175,1597,142],{"class":188},[175,1599,374],{"class":192},[115,1601,1603],{"id":1602},"port-3000-sudah-digunakan","Port 3000 sudah digunakan",[165,1605,1607],{"className":167,"code":1606,"language":169,"meta":170,"style":170},"# Ganti port\nPORT=3001 npm start\n",[172,1608,1609,1614],{"__ignoreMap":170},[175,1610,1611],{"class":177,"line":178},[175,1612,1613],{"class":181},"# Ganti port\n",[175,1615,1616,1619,1621,1624,1627],{"class":177,"line":185},[175,1617,1618],{"class":934},"PORT",[175,1620,1057],{"class":930},[175,1622,1623],{"class":192},"3001",[175,1625,1626],{"class":188}," npm",[175,1628,278],{"class":192},[115,1630,1632],{"id":1631},"environment-variable-tidak-terbaca","Environment variable tidak terbaca",[165,1634,1636],{"className":167,"code":1635,"language":169,"meta":170,"style":170},"# React hanya membaca REACT_APP_ prefix\n# Restart dev server setelah update .env\nnpm start\n",[172,1637,1638,1643,1648],{"__ignoreMap":170},[175,1639,1640],{"class":177,"line":178},[175,1641,1642],{"class":181},"# React hanya membaca REACT_APP_ prefix\n",[175,1644,1645],{"class":177,"line":185},[175,1646,1647],{"class":181},"# Restart dev server setelah update .env\n",[175,1649,1650,1652],{"class":177,"line":196},[175,1651,142],{"class":188},[175,1653,278],{"class":192},[115,1655,1657],{"id":1656},"build-size-terlalu-besar","Build size terlalu besar",[165,1659,1661],{"className":167,"code":1660,"language":169,"meta":170,"style":170},"# Analisis bundle\nnpm install --save-dev source-map-explorer\n\n# Analyze\nnpm run build\nnpx source-map-explorer 'build/static/js/*.js'\n",[172,1662,1663,1668,1679,1683,1688,1696],{"__ignoreMap":170},[175,1664,1665],{"class":177,"line":178},[175,1666,1667],{"class":181},"# Analisis bundle\n",[175,1669,1670,1672,1674,1676],{"class":177,"line":185},[175,1671,142],{"class":188},[175,1673,820],{"class":192},[175,1675,1524],{"class":192},[175,1677,1678],{"class":192}," source-map-explorer\n",[175,1680,1681],{"class":177,"line":196},[175,1682,200],{"emptyLinePlaceholder":199},[175,1684,1685],{"class":177,"line":203},[175,1686,1687],{"class":181},"# Analyze\n",[175,1689,1690,1692,1694],{"class":177,"line":209},[175,1691,142],{"class":188},[175,1693,392],{"class":192},[175,1695,788],{"class":192},[175,1697,1698,1700,1703,1705,1708],{"class":177,"line":262},[175,1699,236],{"class":188},[175,1701,1702],{"class":192}," source-map-explorer",[175,1704,955],{"class":930},[175,1706,1707],{"class":192},"build/static/js/*.js",[175,1709,961],{"class":930},[110,1711,1713],{"id":1712},"_9-best-practices","9. Best Practices",[106,1715,1716,1717],{},"✅ ",[126,1718,1719],{},"DO:",[120,1721,1722,1725,1728,1731,1734],{},[123,1723,1724],{},"Gunakan functional components & hooks",[123,1726,1727],{},"Pisahkan components menjadi file terpisah",[123,1729,1730],{},"Gunakan prop drilling minimally",[123,1732,1733],{},"Implement error boundaries",[123,1735,1736],{},"Optimize images",[106,1738,1739,1740],{},"❌ ",[126,1741,1742],{},"DON'T:",[120,1744,1745,1748,1751,1757],{},[123,1746,1747],{},"Hindari inline styles untuk production",[123,1749,1750],{},"Jangan store sensitive data di localStorage",[123,1752,1753,1754,1756],{},"Jangan commit ",[172,1755,705],{}," file ke git",[123,1758,1759],{},"Hindari large bundle sizes",[110,1761,1763],{"id":1762},"_10-next-steps","10. Next Steps",[120,1765,1766,1769,1772,1775,1778],{},[123,1767,1768],{},"Pelajari React Hooks (useState, useEffect, useContext)",[123,1770,1771],{},"Setup testing dengan Jest & React Testing Library",[123,1773,1774],{},"Implement state management dengan Redux atau Zustand",[123,1776,1777],{},"Setup CI/CD pipeline",[123,1779,1780],{},"Deploy ke production",[1782,1783],"hr",{},[106,1785,1786,1789,1790],{},[126,1787,1788],{},"Butuh bantuan?"," Lihat dokumentasi resmi di ",[131,1791,1794],{"href":1792,"rel":1793},"https://react.dev",[135],"react.dev",[1796,1797,1798],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":170,"searchDepth":178,"depth":185,"links":1800},[1801,1805,1810,1815,1816,1821,1826,1831,1837,1838],{"id":112,"depth":185,"text":113,"children":1802},[1803,1804],{"id":117,"depth":196,"text":118},{"id":162,"depth":196,"text":163},{"id":216,"depth":185,"text":217,"children":1806},[1807,1808,1809],{"id":220,"depth":196,"text":221},{"id":310,"depth":196,"text":311},{"id":413,"depth":196,"text":414},{"id":502,"depth":185,"text":503,"children":1811},[1812,1813,1814],{"id":506,"depth":196,"text":507},{"id":560,"depth":196,"text":561},{"id":654,"depth":196,"text":655},{"id":726,"depth":185,"text":727},{"id":736,"depth":185,"text":737,"children":1817},[1818,1819,1820],{"id":740,"depth":196,"text":741},{"id":761,"depth":196,"text":762},{"id":773,"depth":196,"text":774},{"id":798,"depth":185,"text":799,"children":1822},[1823,1824,1825],{"id":802,"depth":196,"text":803},{"id":905,"depth":196,"text":906},{"id":1153,"depth":196,"text":1154},{"id":1399,"depth":185,"text":1400,"children":1827},[1828,1829,1830],{"id":1403,"depth":196,"text":1404},{"id":1443,"depth":196,"text":1444},{"id":1504,"depth":196,"text":1505},{"id":1567,"depth":185,"text":1568,"children":1832},[1833,1834,1835,1836],{"id":1571,"depth":196,"text":1572},{"id":1602,"depth":196,"text":1603},{"id":1631,"depth":196,"text":1632},{"id":1656,"depth":196,"text":1657},{"id":1712,"depth":185,"text":1713},{"id":1762,"depth":185,"text":1763},"Tutorial lengkap setup React dari awal, download template, instalasi dependencies, hingga konfigurasi produksi","md",null,{},{"icon":60},{"title":92,"description":1839},"lfZvZhC-r3y70AkFg81qrW2bviJ6I20q4cbut4iNtq8",[1847,1841],{"title":88,"path":89,"stem":90,"description":1848,"icon":60,"children":-1},"Template master untuk membuat dokumentasi produk lengkap dengan panduan step-by-step",1763121030927]