Apa itu Bereaksi?
React adalah library JavaScript yang dibuat oleh Facebook
Bereaksi adalah perpustakaan Antarmuka Pengguna (UI)
React adalah alat untuk membangun komponen UI
Tutorial React Quickstart
Ini adalah tutorial memulai cepat.
Sebelum Anda mulai, Anda harus memiliki pemahaman dasar tentang:
Untuk tutorial lengkapnya:
Mulai Tutorial BereaksiMenambahkan Bereaksi ke Halaman HTML
Tutorial memulai cepat ini akan menambahkan Bereaksi ke halaman seperti ini:
Contoh
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load
Babel Compiler -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel code goes here
</script>
</body>
</html>
Apa itu Babel?
Babel adalah compiler JavaScript yang dapat menerjemahkan markup atau bahasa pemrograman ke dalam JavaScript.
Dengan Babel, Anda dapat menggunakan fitur JavaScript terbaru (ES6 - ECMAScript 2015).
Babel tersedia untuk berbagai konversi. React menggunakan Babel untuk mengonversi JSX menjadi JavaScript.
Harap dicatat bahwa <script type="text/babel"> diperlukan untuk menggunakan Babel.
Apa itu BEJ?
JSX adalah singkatan dari Java S cript X ML .
JSX adalah ekstensi seperti XML/HTML untuk JavaScript.
Contoh
const element = <h1>Hello World!</h1>
Seperti yang Anda lihat di atas, JSX bukan JavaScript atau HTML.
JSX adalah ekstensi sintaks XML untuk JavaScript yang juga hadir dengan kekuatan penuh ES6 (ECMAScript 2015).
Sama seperti HTML, tag JSX dapat memiliki nama tag, atribut, dan anak-anak. Jika atribut dibungkus dalam kurung kurawal, nilainya adalah ekspresi JavaScript.
Perhatikan bahwa JSX tidak menggunakan tanda kutip di sekitar string teks HTML.
Bereaksi Render DOM
Metode ReactDom.render() digunakan untuk merender (menampilkan) elemen HTML:
Contoh
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
Ekspresi BEJ
Ekspresi bisa digunakan di BEJ dengan membungkusnya dalam kurung kurawal {} .
Contoh
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
Elemen Reaksi
Aplikasi React biasanya dibangun di sekitar satu elemen HTML .
Pengembang React sering menyebutnya sebagai node root (elemen root):
<div id="root"></div>
Elemen reaksi terlihat seperti ini:
const element = <h1>Hello React!</h1>
Elemen dirender (ditampilkan) dengan metode ReactDOM.render():
ReactDOM.render(element, document.getElementById('root'));
Elemen reaksi tidak dapat diubah . Mereka tidak dapat diubah.
Satu-satunya cara untuk mengubah elemen React adalah dengan merender elemen baru setiap saat:
Contoh
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
Komponen Bereaksi
Komponen React adalah fungsi JavaScript.
Contoh ini membuat komponen React bernama "Welcome":
Contoh
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React juga dapat menggunakan kelas ES6 untuk membuat komponen.
Contoh ini membuat komponen React bernama Welcome dengan metode render :
Contoh
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
Properti Komponen Bereaksi
Contoh ini membuat komponen React bernama "Selamat datang" dengan argumen properti:
Contoh
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
React juga dapat menggunakan kelas ES6 untuk membuat komponen.
Contoh ini juga membuat komponen React bernama "Selamat datang" dengan argumen properti:
Contoh
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
Kompilator BEJ
Contoh pada halaman ini mengkompilasi BEJ di browser.
Untuk kode produksi, kompilasi harus dilakukan secara terpisah.
Buat Aplikasi Bereaksi
Facebook telah membuat Create React Application dengan semua yang Anda butuhkan untuk membangun aplikasi React.
Ini adalah server pengembangan yang menggunakan Webpack untuk mengkompilasi React, JSX, dan ES6, file CSS awalan otomatis.
Aplikasi Create React menggunakan ESLint untuk menguji dan memperingatkan tentang kesalahan dalam kode.
Untuk membuat Create React App, jalankan kode berikut di terminal Anda:
Contoh
npx create-react-app react-tutorial
Pastikan Anda memiliki Node.js 5.2 atau lebih tinggi. Jika tidak, Anda harus menginstal npx:
Contoh
npm i npx
Mulai satu folder dari tempat Anda ingin aplikasi Anda tetap:
Contoh
C:\Users\myUser>npx create-react-app react-tutorial
Hasil Sukses:
npx: installed 63
in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react,
react-dom, and react-scripts...
+ [email protected]
+ [email protected]
+
[email protected]
added 1732 packages from 664 contributors and audited
31900 packages in 355.501s
found 0 vulnerabilities+ [email protected]
Success! Created react-tutorial at C:\Users\myUser\react-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!
We suggest that you begin by typing:
cd react-tutorial
npm start