Scribd
Unggah
41 tayangan

01-React Js Intro

React JS adalah library JavaScript untuk membangun antarmuka pengguna tunggal halaman yang memungkinkan pembuatan komponen UI yang dapat digunakan kembali. ReactDOM digunakan untuk berinteraksi dengan DOM dan menampilkan komponen React ke DOM virtual, sedangkan elemen React mendeskripsikan tampilan antarmuka pengguna. Komponen dapat berupa fungsional atau berbasis kelas, di mana fungsional hanya menerima dan menampilkan data sedangkan berbasis kelas dapat melak

Diunggah oleh

Akbar Firmansyah
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
41 tayangan

01-React Js Intro

React JS adalah library JavaScript untuk membangun antarmuka pengguna tunggal halaman yang memungkinkan pembuatan komponen UI yang dapat digunakan kembali. ReactDOM digunakan untuk berinteraksi dengan DOM dan menampilkan komponen React ke DOM virtual, sedangkan elemen React mendeskripsikan tampilan antarmuka pengguna. Komponen dapat berupa fungsional atau berbasis kelas, di mana fungsional hanya menerima dan menampilkan data sedangkan berbasis kelas dapat melak

Diunggah oleh

Akbar Firmansyah
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 9

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 4. Check Create React App


2. Check Node.js dan NPM create-react-app -v
Check Node.js node -v 5. Membuat project React Js
Check Node.js npm -v
create-react-app hello-react
3. Install Create React App
6. Menjalankan project
npm i -g create-react-app
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 It is regular ES6 classes that extends component
returns html UI class form react library
It is also called “stateless” components because Also known as “stateful” components because
they simply accept data and display them in some they implement logic and state.
form that is they are mainly responsible for
rendering UI.

There is no render method used in functional It must have render() method returning html
components.
It gives solution without using state It has complex UI Logic
It accept properties(props) in function and return You pass props to class components and access
html(JSX) them with this.props
React Component (Contoh)
Functional Component Class Component
Terimakasih 

Anda mungkin juga menyukai