https://github.com/cramouchegit/belajar-state-reactjs
Belajar cara menggunakan state di react js untuk pemula
https://github.com/cramouchegit/belajar-state-reactjs
Last synced: 5 months ago
JSON representation
Belajar cara menggunakan state di react js untuk pemula
- Host: GitHub
- URL: https://github.com/cramouchegit/belajar-state-reactjs
- Owner: Cramouchegit
- Created: 2024-05-31T02:42:01.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-31T15:05:27.000Z (over 1 year ago)
- Last Synced: 2025-03-06T11:51:24.630Z (10 months ago)
- Language: CSS
- Size: 184 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Getting Started with Create React App
# Menggunakan state di React.js adalah konsep penting yang memungkinkan komponen untuk menyimpan dan mengelola data yang dapat berubah seiring waktu. Berikut adalah panduan langkah demi langkah yang jelas dan sederhana untuk pemula tentang cara menggunakan state di React.js:
1. Memahami State
State adalah objek khusus di dalam komponen React yang digunakan untuk menyimpan data atau informasi tentang komponen tersebut. Berbeda dengan props, state bersifat lokal dan hanya dapat diakses atau dimodifikasi di dalam komponen itu sendiri.
2. Persiapkan Proyek React
Jika Anda belum memiliki proyek React, buat proyek baru menggunakan Create React App:
```bash
npx create-react-app nama-folder-reactjsmu
cd my-app
npm start
```
Ini akan memulai server pengembangan dan membuka aplikasi di browser.
3. Membuat Komponen dengan State
Anda bisa menggunakan state dalam komponen fungsional dengan menggunakan hook useState atau dalam komponen kelas.
a. Komponen Induk
1. Buat file baru di dalam folder src/components bernama NavigationBar.js
2. Tambahkan kode berikut ke dalam file NavigationBar.js
```bash
import "../App.css";
const NavigationBar = ({ navValue }) => {
return (
Belajar State
-
{!navValue ? "Home" : navValue}
-
{!navValue ? "Services" : navValue}
-
{!navValue ? "Blog" : navValue}
-
{!navValue ? "Contact" : navValue}
);
};
export default NavigationBar;
```
4. Menggunakan Komponen di Aplikasi Utama
Untuk melihat hasilnya, kita perlu menggunakan ParentComponent di dalam aplikasi utama.
Buka src/App.js.
Import NavigationBar dan tambahkan ke dalam return statement:
```bash
import React, { useState } from "react";
import "./App.css";
import NavigationBar from "./components/NavigationBar";
function App() {
const [getNavbarValue, setNavbarValue] = useState("");
const changeNavbarValueMyHome = () => {
setNavbarValue("My Home");
};
const changeNavbarValueMyService = () => {
setNavbarValue("My Service");
};
const changeNavbarValueMyBlog = () => {
setNavbarValue("My Blog");
};
const changeNavbarValueMyContact = () => {
setNavbarValue("My Contact");
};
return (
INI HOMEPAGE
Belajar Menggunakan State
changeNavbarValueMyHome()}>
Ubah Navigasi
changeNavbarValueMyService()}
>
Ubah Navigasi
changeNavbarValueMyBlog()}>
Ubah Navigasi
changeNavbarValueMyContact()}
>
Ubah Navigasi
);
}
export default App;
```
5. Memahami dan Menjalankan Kode
Dengan langkah-langkah di atas, kita telah membuat dan menggunakan state di React.
a. Komponen Fungsional (NavigationBar):
Menggunakan useState untuk mendeklarasikan state getNavbarValue.
setNavbarValue adalah fungsi untuk memperbarui state getNavbarValue.
b. Komponen Kelas (NavigationBar):
State navValue dideklarasikan di dalam constructor.
{!navValue ? "Services" : navValue} digunakan untuk memperbarui state count.
6. Jalankan Aplikasi
Pastikan server pengembangan berjalan dengan:
```bash
npm start
```
Dengan mengikuti langkah-langkah ini, Anda dapat memahami cara menggunakan state di React.js untuk mengelola data yang dapat berubah dalam komponen. Selamat mencoba!