01-React js Intro.pptx

May 12, 2023Download as PPTX, PDF0 likes74 views

DivyanshGupta922023

react

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.

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

JSF adalah framework untuk membangun antarmuka pengguna untuk aplikasi web dengan memisahkan presentasi dari logika bisnis dan menyediakan komponen antarmuka pengguna standar. JSF memiliki arsitektur Model-View-Controller dengan FacesServlet sebagai controller yang menangani permintaan dan mengembalikan respon. JSF menyediakan komponen antarmuka pengguna dan tag untuk menampilkan komponen tersebut sebagai HTML.

Jsfguestae4df1

J S Fguestae4df1

Chapt 03 layouting dan desain antarmuka & input kontrol dan android widgetEdi Faizal

Tugas 4 rekayasa web 0316art david

Belajar ReactJS Dasar dengan Programmer Zaman NOw.pdfdika893035

Rpl 014 - perancangan dengan pemakaian ulangFebriyani Syafri

Dokumen tersebut membahas tentang perancangan dengan pemakaian ulang dimana komponen perangkat lunak dapat dipakai ulang untuk meningkatkan efisiensi pengembangan. Ada dua pendekatan pemakaian ulang yaitu berbasis komponen dan berbasis generator, dimana generator memungkinkan pengetahuan yang dapat dipakai ulang ditangkap dalam sistem generator program. Pemakaian ulang produk komersial (COST) juga dibahas sebagai cara untuk memperoleh banyak fungsion

Android Workshop beginnerMuhammad Iskandar Dzulqornain

Android fundamental developmentBayu Firmawan Paoh

GITS Class #11: Android Architecture Component bersama Derayan Bima (Android ...GITS Indonesia

Pada Februari 2019, berlangsung GITS Class #11, seminar gratis dan terbuka untuk umum, di kantor GITS Indonesia. Derayan Bima (salah satu Android developer di GITS Indonesia) membawakan materi mengenai Android Architecture Component. Jangan sampai ketinggalan! Follow akun GITS Indonesia untuk mendapatkan info terkait event seru selanjutnya! Instagram: @gitscreative Facebook: GITS Indonesia YouTube: GITS Indonesia Linkedin: GITS Indonesia Website: https://gits.co.id/

Tugas 4 rekayasa web 1312510231 rostarina.hosta92

Tutorial ReactJs.pptxAviciena1

Java Server Pagesgalihsatria

Tugas[1] 0317-[tryanita]-[1411511676]trya nita

Perancangan dengan pemakaian ulangarfianti

Tutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSONDimas Prawira

Android Fundamentals #1.pptxAliefMuhammadAbdilla

Beginner's Guide to React & Redux DevelopmentYoza Aprilio

ReactJS Dasar untuk pembelajaran smk.pptxdmoyanura78

Tugas Rekayasa Web 1fahreza yozi

Jeni Web Programming Bab 10 Advanced JsfIndividual Consultants

Bab 10 membahas topik-topik lanjutan dalam JSF seperti FacesContext, validator, dan pembuatan komponen kustom. FacesContext menangani informasi kontekstual dalam JSF dan memberikan akses ke komponen tree dan lingkungan eksternal. JSF menyediakan beberapa validator standar dan memungkinkan pembuatan validator kustom melalui metode eksternal atau kelas validator terpisah. Komponen kustom dapat dibuat dengan mewarisi komponen dasar JSF.

Tugas[1] 0317-[dewiapriliani]-[1412510602dewiapril1996

Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...DicodingEvent

Jeni Web Programming Bab 4 Dasar JspIndividual Consultants

Jeni Web Programming Bab 2 Basic ServletsIndividual Consultants

Git mercurial - Git basics , features and commandsDivyanshGupta922023

Fundamentals and basics of Git and commandsDivyanshGupta922023

More Related Content

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

Belajar ReactJS Dasar dengan Programmer Zaman NOw.pdfdika893035

Rpl 014 - perancangan dengan pemakaian ulangFebriyani Syafri

Android Workshop beginnerMuhammad Iskandar Dzulqornain

Android fundamental developmentBayu Firmawan Paoh

GITS Class #11: Android Architecture Component bersama Derayan Bima (Android ...GITS Indonesia

Tugas 4 rekayasa web 1312510231 rostarina.hosta92

Tutorial ReactJs.pptxAviciena1

Java Server Pagesgalihsatria

Tugas[1] 0317-[tryanita]-[1411511676]trya nita

Perancangan dengan pemakaian ulangarfianti

Tutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSONDimas Prawira

Android Fundamentals #1.pptxAliefMuhammadAbdilla

Beginner's Guide to React & Redux DevelopmentYoza Aprilio

ReactJS Dasar untuk pembelajaran smk.pptxdmoyanura78

Tugas Rekayasa Web 1fahreza yozi

Jeni Web Programming Bab 10 Advanced JsfIndividual Consultants

Tugas[1] 0317-[dewiapriliani]-[1412510602dewiapril1996

Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...DicodingEvent

Jeni Web Programming Bab 4 Dasar JspIndividual Consultants

Jeni Web Programming Bab 2 Basic ServletsIndividual Consultants

Belajar ReactJS Dasar dengan Programmer Zaman NOw.pdfdika893035

Rpl 014 - perancangan dengan pemakaian ulangFebriyani Syafri

Android Workshop beginnerMuhammad Iskandar Dzulqornain

Android fundamental developmentBayu Firmawan Paoh

GITS Class #11: Android Architecture Component bersama Derayan Bima (Android ...GITS Indonesia

Tugas 4 rekayasa web 1312510231 rostarina.hosta92

Tutorial ReactJs.pptxAviciena1

Java Server Pagesgalihsatria

Tugas[1] 0317-[tryanita]-[1411511676]trya nita

Perancangan dengan pemakaian ulangarfianti

Tutorial pembuatan REST Service pada Support System menggunakan Servlet dan GSONDimas Prawira

Android Fundamentals #1.pptxAliefMuhammadAbdilla

Beginner's Guide to React & Redux DevelopmentYoza Aprilio

ReactJS Dasar untuk pembelajaran smk.pptxdmoyanura78

Tugas Rekayasa Web 1fahreza yozi

Jeni Web Programming Bab 10 Advanced JsfIndividual Consultants

Tugas[1] 0317-[dewiapriliani]-[1412510602dewiapril1996

Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...DicodingEvent

Jeni Web Programming Bab 4 Dasar JspIndividual Consultants

Jeni Web Programming Bab 2 Basic ServletsIndividual Consultants

More from DivyanshGupta922023 (19)

Git mercurial - Git basics , features and commandsDivyanshGupta922023

Fundamentals and basics of Git and commandsDivyanshGupta922023

(Public) FedCM BlinkOn 16 fedcm and privacy sandbox apisDivyanshGupta922023

DevOps The Buzzword - everything about devopsDivyanshGupta922023

Git Basics walkthough to all basic concept and commands of gitDivyanshGupta922023

jquery summit presentation for large scale javascript applicationsDivyanshGupta922023

Next.js - ReactPlayIO.pptxDivyanshGupta922023

Next.js helps address some shortcomings of React like initial load time and SEO support. It introduces features like server-side rendering, static generation, and incremental static regeneration that improve performance. The new App Router in Next.js 13.4 introduces shared layouts and nested routing to provide a more structured approach to building apps. React Server Components in Next.js also improve performance by enabling server-centric routing and caching of component trees.

Management+team.pptxDivyanshGupta922023

Nestlé has a strong and experienced global leadership team. The team includes Paul Bulcke as Chairman, who has worked at Nestlé since 1979. Mark Schneider has served as CEO since 2017, bringing experience from Fresenius Group. Other senior leaders head major regions, including Laurent Freixe for the Americas, Wan Ling Martello for Asia and Africa, and Marco Settembri for Europe. All have extensive international experience in senior management roles.

DHC Microbiome Presentation 4-23-19.pptxDivyanshGupta922023

- Recent advancements in statistical analysis of microbial metagenomic sequence data include improved OTU clustering algorithms like ASVs that provide single nucleotide resolution, and log-ratio methodology to analyze compositional microbiome data by removing the compositional constraint. - 16S amplicon sequencing provides information on relative abundance but is subject to biases from copy number variation and primer mismatches. Shallow shotgun metagenomics is a potential alternative. - Microbiome data are compositional and violate assumptions of standard statistical tests. The CoDA framework applies log-ratio transformations and appropriate statistical methods to account for this compositionality.

developer-burnout.pdfDivyanshGupta922023

Developer burnout is sneaky and can slowly grind at the developer until constant fatigue and lack of motivation become normal. Key signs include realizing you've been doing the same thing for years without enjoyment. Success in open source can lead to taking on too many projects and goals without delegation. To avoid burnout, developers should be gentle with themselves, publish less to communities while still influencing them, delegate tasks, pursue other interests and hobbies, and take breaks if needed. Selectively engaging with others on social media can also help prevent burnout.

AzureIntro.pptxDivyanshGupta922023

api-driven-development.pdfDivyanshGupta922023

This document discusses API driven development and building APIs for humans. It recommends following three steps: 1) Have a real problem to solve, like difficulty using OneNote across platforms. 2) Respond by writing documentation like a README before writing code. 3) Build the API by writing code to implement what was documented. It also recommends building APIs openly on GitHub so components separate concerns and best practices emerge through community feedback.

Internet of Things.pptxDivyanshGupta922023

The Internet of Things (IoT) allows physical objects to be connected to the internet through sensors and software. This enables the objects to exchange data between each other and other connected devices using existing network infrastructure. Each object can be uniquely identified and can interoperate within the existing internet. The IoT creates opportunities to remotely sense and control objects, improving efficiency and integrating the physical world with computer systems.

Functional JS+ ES6.pptxDivyanshGupta922023

This document discusses JavaScript functions, arrays, objects, and classes. It shows examples of functions being first-class citizens that can be passed as arguments to other functions. Examples demonstrate using array methods like map, filter, and reduce to transform and extract data from arrays. Objects are manipulated using property accessors, and classes are defined with inheritance. Various syntax features are presented like let, const, arrow functions, destructuring, and modules.

AAAI19-Open.pptxDivyanshGupta922023

This document summarizes Terrance Boult's talk on open world recognition and learning with unknown inputs. It discusses how traditional machine learning assumes all classes are known, but in reality there are many "unknown unknowns" that models are not trained on. It reviews different levels of openness in problems from closed multi-class classification to open set recognition. It also summarizes different algorithms that can help with open set recognition, like SVDD and openmax, and discusses challenges in applying these techniques to deep networks. The talk concludes that we cannot anticipate all unknown inputs and that open set recognition is an important area for further research.

10-security-concepts-lightning-talk 1of2.pptxDivyanshGupta922023

Vulnerabilities are weaknesses that can allow attackers to compromise a system through bad code, design errors, or programming mistakes, while exploits are code that takes advantage of vulnerabilities. Zero-day vulnerabilities are the most dangerous as they are new and unfixed, whereas known vulnerabilities are tracked through the CVE system. Attack surfaces are all possible entry points like vulnerabilities that attackers can use to access a system, so the principle of least privilege should be followed to minimize access and resources for users and applications.

Introduction to Directed Acyclic Graphs.pptxDivyanshGupta922023

This document provides an introduction to using directed acyclic graphs (DAGs) for confounder selection in nonexperimental studies. It discusses what DAGs are, their benefits over traditional covariate selection approaches, limitations, key terminology, and examples of how DAGs can identify when adjustment is needed or could induce bias. The document also introduces d-separation criteria for assessing open and closed paths in DAGs and overviews software tools for applying these rules to select minimum adjustment sets from complex causal diagrams.

ReactJS presentation.pptxDivyanshGupta922023

React JS is a JavaScript library for building user interfaces. It uses virtual DOM and one-way data binding to render components efficiently. Everything in React is a component - they accept custom inputs called props and control the output display through rendering. Components can manage private state and update due to props or state changes. The lifecycle of a React component involves initialization, updating due to state/prop changes, and unmounting from the DOM. React promotes unidirectional data flow and single source of truth to make views more predictable and easier to debug.

Nextjs13.pptxDivyanshGupta922023

Git mercurial - Git basics , features and commandsDivyanshGupta922023

Fundamentals and basics of Git and commandsDivyanshGupta922023

(Public) FedCM BlinkOn 16 fedcm and privacy sandbox apisDivyanshGupta922023

DevOps The Buzzword - everything about devopsDivyanshGupta922023

Git Basics walkthough to all basic concept and commands of gitDivyanshGupta922023

jquery summit presentation for large scale javascript applicationsDivyanshGupta922023

Next.js - ReactPlayIO.pptxDivyanshGupta922023

Management+team.pptxDivyanshGupta922023

DHC Microbiome Presentation 4-23-19.pptxDivyanshGupta922023

developer-burnout.pdfDivyanshGupta922023

AzureIntro.pptxDivyanshGupta922023

api-driven-development.pdfDivyanshGupta922023

Internet of Things.pptxDivyanshGupta922023

Functional JS+ ES6.pptxDivyanshGupta922023

AAAI19-Open.pptxDivyanshGupta922023

10-security-concepts-lightning-talk 1of2.pptxDivyanshGupta922023

Introduction to Directed Acyclic Graphs.pptxDivyanshGupta922023

ReactJS presentation.pptxDivyanshGupta922023

Nextjs13.pptxDivyanshGupta922023

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.

4. ReactDOM Source code: Output:

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

9. Terimakasih 

01-React js Intro.pptx

Recommended

More Related Content

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

More from DivyanshGupta922023 (19)

01-React js Intro.pptx