Bereaksi Memulai
Untuk menggunakan React dalam produksi, Anda memerlukan npm yang disertakan dengan Node.js .
Untuk mendapatkan gambaran umum tentang apa itu React, Anda dapat menulis kode React langsung di HTML.
Tetapi untuk menggunakan React dalam produksi, Anda perlu menginstal npm dan Node.js.
Bereaksi Langsung dalam HTML
Cara tercepat untuk mulai belajar React adalah dengan menulis React langsung di file HTML Anda.
Ruang W3Schools
Cara termudah untuk memulai dengan membuat file HTML adalah W3Schools Spaces!
Ini adalah tempat yang sempurna untuk membuat, mengedit, dan berbagi pekerjaan Anda dengan orang lain!
Mulailah dengan memasukkan tiga skrip, dua yang pertama memungkinkan kita menulis kode React di JavaScripts kita, dan yang ketiga, Babel, memungkinkan kita untuk menulis sintaks JSX dan ES6 di browser lama.
Anda akan belajar lebih banyak tentang JSX di bab React JSX .
Contoh
Sertakan tiga CDN dalam file HTML Anda:
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="mydiv"></div> <script type="text/babel"> function Hello() { return <h1>Hello World!</h1>;
} ReactDOM.render(<Hello />, document.getElementById('mydiv')) </script> </body> </html>
Cara menggunakan React ini boleh saja untuk tujuan pengujian, tetapi untuk produksi Anda perlu menyiapkan lingkungan React .
Dapatkan Sertifikasi!
$95 DAFTAR
Menyiapkan Lingkungan Bereaksi
Jika Anda telah menginstal npx dan Node.js, Anda dapat membuat aplikasi React dengan menggunakan create-react-app
.
Jika sebelumnya Anda telah menginstal create-react-app
secara global, Anda disarankan untuk menghapus paket untuk memastikan npx selalu menggunakan versi terbaru create-react-app
.
Untuk menghapus instalan, jalankan perintah ini: npm uninstall -g create-react-app
.
Jalankan perintah ini untuk membuat aplikasi React bernama
my-react-app
:
npx create-react-app my-react-app
Ini create-react-app
akan mengatur semua yang Anda butuhkan untuk menjalankan aplikasi React.
Jalankan Aplikasi React
Sekarang Anda siap menjalankan aplikasi React nyata pertama Anda!
Jalankan perintah ini untuk pindah ke my-react-app
direktori:
cd my-react-app
Jalankan perintah ini untuk menjalankan aplikasi React
my-react-app
:
npm start
Jendela browser baru akan muncul dengan Aplikasi React yang baru Anda buat! Jika tidak, buka browser Anda dan ketik
localhost:3000
di bilah alamat.
Hasil:
Ubah Aplikasi React
Sejauh ini bagus, tapi bagaimana cara mengubah konten?
Lihat di my-react-app
direktori, dan Anda akan menemukan
src
folder. Di dalam
src
folder tersebut ada file bernama
App.js
, buka dan akan terlihat seperti ini:
/myReactApp/src/App.js:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Coba ubah konten HTML dan simpan file.
Perhatikan bahwa perubahan terlihat segera setelah Anda menyimpan file, Anda tidak perlu memuat ulang browser!
Contoh
Ganti semua konten di dalam <div className="App">
dengan
<h1>
elemen.
Lihat perubahan di browser saat Anda mengklik Simpan.
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;
Perhatikan bahwa kami telah menghapus impor yang tidak kami perlukan (logo.svg dan App.css).
Hasil:
Apa berikutnya?
Sekarang Anda memiliki React Environment di komputer Anda, dan Anda siap untuk mempelajari lebih lanjut tentang React.
Di sisa tutorial ini kita akan menggunakan alat "Show React" untuk menjelaskan berbagai aspek React, dan bagaimana mereka ditampilkan di browser.
Jika Anda ingin mengikuti langkah yang sama di komputer Anda, mulailah dengan menghapus src
folder hingga hanya berisi satu file: index.js
. Anda juga harus menghapus baris kode yang tidak perlu di dalam index.js
file agar terlihat seperti contoh di alat "Show React" di bawah ini:
Contoh
Klik tombol "Jalankan Contoh" untuk melihat hasilnya.
index.js
:
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));