Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
DevCoach 176: React | Cara Jitu React Membangun UI
Search
Nad
November 17, 2024
0
120
DevCoach 176: React | Cara Jitu React Membangun UI
Nad
November 17, 2024
Tweet
Share
More Decks by Nad
See All by Nad
DevCoach 180: Back-End | Deploy Aplikasi dengan Aman dan Cepat Menggunakan CI/CD
nadiaaa22
0
55
DevCoach 179: Flutter | Ciptakan Animasi Epik dengan Animation
nadiaaa22
0
75
DevCoach 178: React | Teknik React Menghidupkan UI dengan State
nadiaaa22
0
46
Dicoding Sharing Session: Unlocking the Machine Learning Workflow
nadiaaa22
0
65
DevCoach 175: React | Kenalan dengan React: UI Web Masa Kini
nadiaaa22
0
67
DevCoach 174: Flutter | Bentangkan Sayap Kreativitasmu dengan Flutter Desktop
nadiaaa22
0
41
DevCoach 173: iOS | Mendalami SwiftUI, UI Framework Masa Depan!
nadiaaa22
0
110
DevCoach 172: Flutter | Tingkatkan Pengalaman Pengguna dengan Lokalisasi dan Aksesibilitas
nadiaaa22
0
83
DevCoach 171: Machine Learning in Google Cloud | Vertex AI di Google Cloud
nadiaaa22
0
210
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
335
57k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Music & Morning Musume
bryan
46
6.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Writing Fast Ruby
sferik
628
61k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Embracing the Ebb and Flow
colly
84
4.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Transcript
Cara Jitu React Membangun UI Nur Rizki Adi Curriculum Developer
React
Topics • Compositional Component • React Element & React Component
• JSX, Cara Baru Membangun UI • Vite, Cara React Memulai Project • createElement, The React Legacy React
Konsep yang Mendasari React Composition Declarative Code Unidirectional Data Flow
JavaScript React
Gambaran React Composition React
React
React Element vs. DOM Element
DOM Element React
Jika React Element hanya JavaScript objek biasa, bagaimana bisa ditampilkan
di DOM? { type: 'p', props: { className: 'p-blue', children: 'Content of paragraph.', }, } React Element Mengubah React Element menjadi DOM Node react-dom DOM React
React Component React
Quiz #1 DevCoach 176 React
Quiz #1 DevCoach 176 Ada teknologi component yang mirip dengan
React, tapi mendukung Browser Standar. Apa itu?
React Component • Alih-alih data, sebuah fungsi JavaScript yang mengembalikan
UI/React element. • Alasan membuat React component sama dengan kapan kita harus membuat sebuah fungsi.
Menangani UI Kompleks dan Terisolasi Bersifat Reusable Mengapa Harus React
Component? React
None
None
Web Component ……………… Ada teknologi component yang mirip dengan React,
tapi mendukung Browser Standar. Apa itu? Apa, hayo React
Quiz #2 DevCoach 176 React
Apa perbedaan besar antara React component dengan Web component? Quiz
#2 DevCoach 176 React
youtube.com/@DicodingIndonesia
JSX, Sintaks Keren Bikin UI React
None
Sintaks Baru Bikin UI • JSX Markup Syntax • JSX
Attributes • JSX Styling • JSX Event React
Quiz #3 DevCoach 176 React
Quiz #3 DevCoach 176 Apa fungsi Babel terhadap sintaks JSX?
None
createElement, The React Legacy React
import React from 'react'; const heading = React.createElement('h1', null, 'Biodata
Perusahaan'); Membuat Element dengan createElement
import React from 'react'; const element = React.createElement( 'h1', {
id: 'my-title', className: 'text-red', }, 'Biodata Perusahaan', ); Bikin UI dengan createElement React
None
createElement tidak butuh Babel, tapi kode jadi imperatif React
createElement JSX React
Terima kasih nurrizkiadip Nur Rizki Adi Prasetyo NAdiprasetyo
[email protected]
Nur
Rizki Adi Prasetyo React
Feedback! dicoding.id/devcoachfeedback
None