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
Into the Great Unknown - MozCon
thekraken
35
1.6k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Become a Pro
speakerdeck
PRO
26
5.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Typedesign – Prime Four
hannesfritz
40
2.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
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