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!

Mulai gratis

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 .


w3schools CERTIFIED . 2022

Dapatkan Sertifikasi!

Selesaikan modul React, kerjakan latihannya, ikuti ujiannya, dan dapatkan sertifikasi w3schools!!

$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-appsecara 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-appakan 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-appdirektori:

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:3000di bilah alamat.

Hasil:



Ubah Aplikasi React

Sejauh ini bagus, tapi bagaimana cara mengubah konten?

Lihat di my-react-appdirektori, dan Anda akan menemukan srcfolder. Di dalam srcfolder 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 srcfolder 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'));


Uji Diri Anda Dengan Latihan

Olahraga:

Masukkan metode ReactDOM yang benar untuk merender elemen React ke DOM.

ReactDOM.(myElement, document.getElementById('root'));