https://github.com/fatahpratam/tutorial-react-component

Created for documenting my progress for Hitesh's React YouTube tutorial. (Chapter 6)
https://github.com/fatahpratam/tutorial-react-component

eslint frontend javascript jsx react vite web-app web-development

Last synced: about 2 months ago
JSON representation

Created for documenting my progress for Hitesh's React YouTube tutorial. (Chapter 6)

• Host: GitHub
• URL: https://github.com/fatahpratam/tutorial-react-component
• Owner: fatahpratam
• Created: 2024-11-19T06:33:38.000Z (about 2 months ago)
• Default Branch: master
• Last Pushed: 2024-11-20T10:19:27.000Z (about 2 months ago)
• Last Synced: 2024-11-20T12:09:11.438Z (about 2 months ago)
• Topics: eslint, frontend, javascript, jsx, react, vite, web-app, web-development
• Language: JavaScript
• Homepage: https://fatahpratam.github.io/tutorial-react-component/
• Size: 153 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Chapter 6: Props, Tailwind, dan Component

## GitHub Pages

Link untuk deployment: [Props Component](https://fatahpratam.github.io/tutorial-react-component/)

## Youtube Tutorial

- Link: [Full Stack React Developer Course with Appwrite](https://www.youtube.com/watch?v=Bvwq_S0n2pk)

- Creator: [HiteshCodeLab](https://www.youtube.com/@HiteshCodeLab)

## Detail lebih lanjut tentang jsx

- Karena beberapa keyword digunakan oleh JavaScript, beberapa attribute html dikonversi menjadi berikut:

- `class` -> `className`

- `for` -> `htmlFor`

- Untuk menggunakan array dan object sebagai component argument, dapat menggunakan {}. Contoh:

```jsx

```

## Instalasi Tailwind

- `npm install -D tailwindcss postcss autoprefixer`

- `npx tailwindcss init -p`

- Tambahkan jalur ke semua berkas templat Anda di berkas `tailwind.config.js`.

- Tambahkan arahan @tailwind untuk setiap layer Tailwind ke berkas `./src/index.css` Anda.

## Component

- Component dapat didefinisikan sebagai sebuah fungsi yang diawali dengan huruf kapital yang mengembalikan composite component atau host component lainnya.

- Component yang tidak memiliki parameter dinamakan dumb component.

- Component membuat sebuah UI dapat digunakan berulang-ulang.

## Props

- Nilainya berasal dari parameter component

- Bentuknya key dan value

- Untuk memberikan argumen pada component, cukup dengan memberikan atribute saat memanggil component-nya

- Props dapat diberikan default value

- Dapat destructure props langsung di dalam parameter

- Contoh pendeklarasikan component dengan props:

```js

function App(props) {

  return (

    
String: {props.str}

  )

}

```

- Contoh pemanggilan component dengan props: