SlideShare a Scribd company logo
REACT JS INTRODUCTIONS
PT. Prosigmaka Mandiri
React Js
• React Js adalah sebuah library JavaScript untuk membangun User Interface berkonsep
Single Page Application yang memungkinkan untuk membuat komponen UI yang dapat
digunakan kembali.
• Instalasi React JS :
1. Install Node.js
2. Check Node.js dan NPM
Check Node.js node -v
Check Node.js npm -v
3. Install Create React App
npm i -g create-react-app
4. Check Create React App
create-react-app -v
5. Membuat project React Js
create-react-app hello-react
6. Menjalankan project
npm start
ReactDOM
• ReactDOM adalah react method yang dikhususkan untuk
berinteraksi dengan DOM yang digunakan untuk me-render
komponen react. ReactDOM.render()akan menampilkan sebuah
objek JavaScript yang di-return pada component class ke sebuah
virtual DOM.
ReactDOM
Source code: Output:
React Element
• React Element mendeskripsikan bagaimana tampilan UI seharusnya terlihat.
Dalam membuat react element dapat menggunakan
React.createElement()atau JSX.
React.createElement()
JSX
JSX
• JSX atau extended JavaScript adalah suatu pengembangan JavaScript dimana kode HTML bisa
diikutsertakan dalam JavaScript.
Contoh:
Terlihat bahwa script diatas menggabungkan String (JavaScript) dengan html.
Penggunaan JSX lainnya :
React Component
• Sebuah component merepresentasikan bagian dari UI yang dapat digunakan kembali dan
dapat digunakan dimana saja. Terdapat dua komponen utama React yaitu:
1. Functional Component (stateless component)
2. Class Component (stateful component)
Perbedaan Functional dan Class Component:
Functional Component Class Component
It is simple JavaScript functions that simply
returns html UI
It is regular ES6 classes that extends component
class form react library
It is also called “stateless” components because
they simply accept data and display them in some
form that is they are mainly responsible for
rendering UI.
Also known as “stateful” components because
they implement logic and state.
There is no render method used in functional
components.
It must have render() method returning html
It gives solution without using state It has complex UI Logic
It accept properties(props) in function and return
html(JSX)
You pass props to class components and access
them with this.props
React Component (Contoh)
Class Component
Functional Component
Terimakasih 

More Related Content

Similar to 01-React js Intro.pptx

Android Workshop beginner
Android Workshop beginnerAndroid Workshop beginner
Android Workshop beginner
Muhammad Iskandar Dzulqornain
 
Android fundamental development
Android fundamental developmentAndroid fundamental development
Android fundamental development
Bayu Firmawan Paoh
 
GITS Class #11: Android Architecture Component bersama Derayan Bima (Android ...
GITS Class #11: Android Architecture Component bersama Derayan Bima (Android ...GITS Class #11: Android Architecture Component bersama Derayan Bima (Android ...
GITS Class #11: Android Architecture Component bersama Derayan Bima (Android ...
GITS Indonesia
 
Tugas 4 rekayasa web 1312510231 rostarina.h
Tugas 4 rekayasa web 1312510231 rostarina.hTugas 4 rekayasa web 1312510231 rostarina.h
Tugas 4 rekayasa web 1312510231 rostarina.h
osta92
 
Tutorial ReactJs.pptx
Tutorial ReactJs.pptxTutorial ReactJs.pptx
Tutorial ReactJs.pptx
Aviciena1
 
Java Server Pages
Java Server PagesJava Server Pages
Java Server Pages
galihsatria
 
Tugas[1] 0317-[tryanita]-[1411511676]
Tugas[1] 0317-[tryanita]-[1411511676]Tugas[1] 0317-[tryanita]-[1411511676]
Tugas[1] 0317-[tryanita]-[1411511676]
trya nita
 
Perancangan dengan pemakaian ulang
Perancangan dengan pemakaian ulangPerancangan dengan pemakaian ulang
Perancangan dengan pemakaian ulangarfianti
 
Tutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSON
Tutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSONTutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSON
Tutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSON
Dimas Prawira
 
Android Fundamentals #1.pptx
Android Fundamentals #1.pptxAndroid Fundamentals #1.pptx
Android Fundamentals #1.pptx
AliefMuhammadAbdilla
 
Beginner's Guide to React & Redux Development
Beginner's Guide to React & Redux DevelopmentBeginner's Guide to React & Redux Development
Beginner's Guide to React & Redux Development
Yoza Aprilio
 
Tugas Rekayasa Web 1
Tugas Rekayasa Web 1Tugas Rekayasa Web 1
Tugas Rekayasa Web 1
fahreza yozi
 
Jeni Web Programming Bab 10 Advanced Jsf
Jeni Web Programming Bab 10 Advanced JsfJeni Web Programming Bab 10 Advanced Jsf
Jeni Web Programming Bab 10 Advanced Jsf
Individual Consultants
 
Tugas[1] 0317-[dewiapriliani]-[1412510602
Tugas[1] 0317-[dewiapriliani]-[1412510602Tugas[1] 0317-[dewiapriliani]-[1412510602
Tugas[1] 0317-[dewiapriliani]-[1412510602
dewiapril1996
 
Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...
Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...
Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...
DicodingEvent
 
Jeni Web Programming Bab 4 Dasar Jsp
Jeni Web Programming Bab 4 Dasar JspJeni Web Programming Bab 4 Dasar Jsp
Jeni Web Programming Bab 4 Dasar Jsp
Individual Consultants
 
Jeni Web Programming Bab 2 Basic Servlets
Jeni Web Programming Bab 2 Basic ServletsJeni Web Programming Bab 2 Basic Servlets
Jeni Web Programming Bab 2 Basic ServletsIndividual Consultants
 
Jquery
JqueryJquery
Jquery
utia yahya
 
Jquery
JqueryJquery
Jquery
utia yahya
 
Ppt pengenalan jquery
Ppt pengenalan jqueryPpt pengenalan jquery
Ppt pengenalan jquerymutia902
 

Similar to 01-React js Intro.pptx (20)

Android Workshop beginner
Android Workshop beginnerAndroid Workshop beginner
Android Workshop beginner
 
Android fundamental development
Android fundamental developmentAndroid fundamental development
Android fundamental development
 
GITS Class #11: Android Architecture Component bersama Derayan Bima (Android ...
GITS Class #11: Android Architecture Component bersama Derayan Bima (Android ...GITS Class #11: Android Architecture Component bersama Derayan Bima (Android ...
GITS Class #11: Android Architecture Component bersama Derayan Bima (Android ...
 
Tugas 4 rekayasa web 1312510231 rostarina.h
Tugas 4 rekayasa web 1312510231 rostarina.hTugas 4 rekayasa web 1312510231 rostarina.h
Tugas 4 rekayasa web 1312510231 rostarina.h
 
Tutorial ReactJs.pptx
Tutorial ReactJs.pptxTutorial ReactJs.pptx
Tutorial ReactJs.pptx
 
Java Server Pages
Java Server PagesJava Server Pages
Java Server Pages
 
Tugas[1] 0317-[tryanita]-[1411511676]
Tugas[1] 0317-[tryanita]-[1411511676]Tugas[1] 0317-[tryanita]-[1411511676]
Tugas[1] 0317-[tryanita]-[1411511676]
 
Perancangan dengan pemakaian ulang
Perancangan dengan pemakaian ulangPerancangan dengan pemakaian ulang
Perancangan dengan pemakaian ulang
 
Tutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSON
Tutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSONTutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSON
Tutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSON
 
Android Fundamentals #1.pptx
Android Fundamentals #1.pptxAndroid Fundamentals #1.pptx
Android Fundamentals #1.pptx
 
Beginner's Guide to React & Redux Development
Beginner's Guide to React & Redux DevelopmentBeginner's Guide to React & Redux Development
Beginner's Guide to React & Redux Development
 
Tugas Rekayasa Web 1
Tugas Rekayasa Web 1Tugas Rekayasa Web 1
Tugas Rekayasa Web 1
 
Jeni Web Programming Bab 10 Advanced Jsf
Jeni Web Programming Bab 10 Advanced JsfJeni Web Programming Bab 10 Advanced Jsf
Jeni Web Programming Bab 10 Advanced Jsf
 
Tugas[1] 0317-[dewiapriliani]-[1412510602
Tugas[1] 0317-[dewiapriliani]-[1412510602Tugas[1] 0317-[dewiapriliani]-[1412510602
Tugas[1] 0317-[dewiapriliani]-[1412510602
 
Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...
Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...
Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...
 
Jeni Web Programming Bab 4 Dasar Jsp
Jeni Web Programming Bab 4 Dasar JspJeni Web Programming Bab 4 Dasar Jsp
Jeni Web Programming Bab 4 Dasar Jsp
 
Jeni Web Programming Bab 2 Basic Servlets
Jeni Web Programming Bab 2 Basic ServletsJeni Web Programming Bab 2 Basic Servlets
Jeni Web Programming Bab 2 Basic Servlets
 
Jquery
JqueryJquery
Jquery
 
Jquery
JqueryJquery
Jquery
 
Ppt pengenalan jquery
Ppt pengenalan jqueryPpt pengenalan jquery
Ppt pengenalan jquery
 

More from DivyanshGupta922023

(Public) FedCM BlinkOn 16 fedcm and privacy sandbox apis
(Public) FedCM BlinkOn 16 fedcm and privacy sandbox apis(Public) FedCM BlinkOn 16 fedcm and privacy sandbox apis
(Public) FedCM BlinkOn 16 fedcm and privacy sandbox apis
DivyanshGupta922023
 
DevOps The Buzzword - everything about devops
DevOps The Buzzword - everything about devopsDevOps The Buzzword - everything about devops
DevOps The Buzzword - everything about devops
DivyanshGupta922023
 
Git Basics walkthough to all basic concept and commands of git
Git Basics walkthough to all basic concept and commands of gitGit Basics walkthough to all basic concept and commands of git
Git Basics walkthough to all basic concept and commands of git
DivyanshGupta922023
 
jquery summit presentation for large scale javascript applications
jquery summit  presentation for large scale javascript applicationsjquery summit  presentation for large scale javascript applications
jquery summit presentation for large scale javascript applications
DivyanshGupta922023
 
Next.js - ReactPlayIO.pptx
Next.js - ReactPlayIO.pptxNext.js - ReactPlayIO.pptx
Next.js - ReactPlayIO.pptx
DivyanshGupta922023
 
Management+team.pptx
Management+team.pptxManagement+team.pptx
Management+team.pptx
DivyanshGupta922023
 
DHC Microbiome Presentation 4-23-19.pptx
DHC Microbiome Presentation 4-23-19.pptxDHC Microbiome Presentation 4-23-19.pptx
DHC Microbiome Presentation 4-23-19.pptx
DivyanshGupta922023
 
developer-burnout.pdf
developer-burnout.pdfdeveloper-burnout.pdf
developer-burnout.pdf
DivyanshGupta922023
 
AzureIntro.pptx
AzureIntro.pptxAzureIntro.pptx
AzureIntro.pptx
DivyanshGupta922023
 
api-driven-development.pdf
api-driven-development.pdfapi-driven-development.pdf
api-driven-development.pdf
DivyanshGupta922023
 
Internet of Things.pptx
Internet of Things.pptxInternet of Things.pptx
Internet of Things.pptx
DivyanshGupta922023
 
Functional JS+ ES6.pptx
Functional JS+ ES6.pptxFunctional JS+ ES6.pptx
Functional JS+ ES6.pptx
DivyanshGupta922023
 
AAAI19-Open.pptx
AAAI19-Open.pptxAAAI19-Open.pptx
AAAI19-Open.pptx
DivyanshGupta922023
 
10-security-concepts-lightning-talk 1of2.pptx
10-security-concepts-lightning-talk 1of2.pptx10-security-concepts-lightning-talk 1of2.pptx
10-security-concepts-lightning-talk 1of2.pptx
DivyanshGupta922023
 
Introduction to Directed Acyclic Graphs.pptx
Introduction to Directed Acyclic Graphs.pptxIntroduction to Directed Acyclic Graphs.pptx
Introduction to Directed Acyclic Graphs.pptx
DivyanshGupta922023
 
ReactJS presentation.pptx
ReactJS presentation.pptxReactJS presentation.pptx
ReactJS presentation.pptx
DivyanshGupta922023
 
Nextjs13.pptx
Nextjs13.pptxNextjs13.pptx
Nextjs13.pptx
DivyanshGupta922023
 

More from DivyanshGupta922023 (17)

(Public) FedCM BlinkOn 16 fedcm and privacy sandbox apis
(Public) FedCM BlinkOn 16 fedcm and privacy sandbox apis(Public) FedCM BlinkOn 16 fedcm and privacy sandbox apis
(Public) FedCM BlinkOn 16 fedcm and privacy sandbox apis
 
DevOps The Buzzword - everything about devops
DevOps The Buzzword - everything about devopsDevOps The Buzzword - everything about devops
DevOps The Buzzword - everything about devops
 
Git Basics walkthough to all basic concept and commands of git
Git Basics walkthough to all basic concept and commands of gitGit Basics walkthough to all basic concept and commands of git
Git Basics walkthough to all basic concept and commands of git
 
jquery summit presentation for large scale javascript applications
jquery summit  presentation for large scale javascript applicationsjquery summit  presentation for large scale javascript applications
jquery summit presentation for large scale javascript applications
 
Next.js - ReactPlayIO.pptx
Next.js - ReactPlayIO.pptxNext.js - ReactPlayIO.pptx
Next.js - ReactPlayIO.pptx
 
Management+team.pptx
Management+team.pptxManagement+team.pptx
Management+team.pptx
 
DHC Microbiome Presentation 4-23-19.pptx
DHC Microbiome Presentation 4-23-19.pptxDHC Microbiome Presentation 4-23-19.pptx
DHC Microbiome Presentation 4-23-19.pptx
 
developer-burnout.pdf
developer-burnout.pdfdeveloper-burnout.pdf
developer-burnout.pdf
 
AzureIntro.pptx
AzureIntro.pptxAzureIntro.pptx
AzureIntro.pptx
 
api-driven-development.pdf
api-driven-development.pdfapi-driven-development.pdf
api-driven-development.pdf
 
Internet of Things.pptx
Internet of Things.pptxInternet of Things.pptx
Internet of Things.pptx
 
Functional JS+ ES6.pptx
Functional JS+ ES6.pptxFunctional JS+ ES6.pptx
Functional JS+ ES6.pptx
 
AAAI19-Open.pptx
AAAI19-Open.pptxAAAI19-Open.pptx
AAAI19-Open.pptx
 
10-security-concepts-lightning-talk 1of2.pptx
10-security-concepts-lightning-talk 1of2.pptx10-security-concepts-lightning-talk 1of2.pptx
10-security-concepts-lightning-talk 1of2.pptx
 
Introduction to Directed Acyclic Graphs.pptx
Introduction to Directed Acyclic Graphs.pptxIntroduction to Directed Acyclic Graphs.pptx
Introduction to Directed Acyclic Graphs.pptx
 
ReactJS presentation.pptx
ReactJS presentation.pptxReactJS presentation.pptx
ReactJS presentation.pptx
 
Nextjs13.pptx
Nextjs13.pptxNextjs13.pptx
Nextjs13.pptx
 

01-React js Intro.pptx

  • 1. REACT JS INTRODUCTIONS PT. Prosigmaka Mandiri
  • 2. React Js • React Js adalah sebuah library JavaScript untuk membangun User Interface berkonsep Single Page Application yang memungkinkan untuk membuat komponen UI yang dapat digunakan kembali. • Instalasi React JS : 1. Install Node.js 2. Check Node.js dan NPM Check Node.js node -v Check Node.js npm -v 3. Install Create React App npm i -g create-react-app 4. Check Create React App create-react-app -v 5. Membuat project React Js create-react-app hello-react 6. Menjalankan project npm start
  • 3. ReactDOM • ReactDOM adalah react method yang dikhususkan untuk berinteraksi dengan DOM yang digunakan untuk me-render komponen react. ReactDOM.render()akan menampilkan sebuah objek JavaScript yang di-return pada component class ke sebuah virtual DOM.
  • 5. React Element • React Element mendeskripsikan bagaimana tampilan UI seharusnya terlihat. Dalam membuat react element dapat menggunakan React.createElement()atau JSX. React.createElement() JSX
  • 6. JSX • JSX atau extended JavaScript adalah suatu pengembangan JavaScript dimana kode HTML bisa diikutsertakan dalam JavaScript. Contoh: Terlihat bahwa script diatas menggabungkan String (JavaScript) dengan html. Penggunaan JSX lainnya :
  • 7. React Component • Sebuah component merepresentasikan bagian dari UI yang dapat digunakan kembali dan dapat digunakan dimana saja. Terdapat dua komponen utama React yaitu: 1. Functional Component (stateless component) 2. Class Component (stateful component) Perbedaan Functional dan Class Component: Functional Component Class Component It is simple JavaScript functions that simply returns html UI It is regular ES6 classes that extends component class form react library It is also called “stateless” components because they simply accept data and display them in some form that is they are mainly responsible for rendering UI. Also known as “stateful” components because they implement logic and state. There is no render method used in functional components. It must have render() method returning html It gives solution without using state It has complex UI Logic It accept properties(props) in function and return html(JSX) You pass props to class components and access them with this.props
  • 8. React Component (Contoh) Class Component Functional Component