Tahap Awal React JS

Belajar React JS

Assalamualaikum Wr. Wb.

Pada kesempatan kali ini, kita akan membahas tahap awal React JS.

Untuk mendapatkan gambaran umum tentang apa itu React JS, Kamu dapat menulis kode React JS langsung dalam HTML.

Tetapi untuk menggunakan React JS dalam pembelajaran, Kamu perlu NPM dan Node.js yang sudah diinstal.

Langsung React JS dalam HTML

Cara cepat untuk mulai belajar React JS adalah dengan menulis React JS langsung di file HTML Kamu.

Diawali dengan memasukkan tiga skrip, dua yang diawal mari kita menulis kode React JS dalam JavaScripts kita, dan yang ketiga, Babel, memungkinkan kita untuk menulis sintaksis JSX dan ES6 di browser lama.

Contoh dan masukkan juga tiga CDN dalam file HTML Kamu:

<!DOCTYPE html>
<html>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-stkamulone@6.15.0/babel.min.js"></script>
  <body>
      
    <div id="mydiv"></div>
  
    <script type="text/babel">
      class Hello extends React.Component {
        render() {
          return <h1>Hello World!</h1>
        }
      }
    </script>
  
  </body>
</html>

Cara menggunakan React ini bisa untuk tujuan pengujian, tetapi untuk hasil Kamu perlu mengatur keliling React JS.

Menyiapkan Keliling React JS

Jika Kamu memiliki NPM dan Node.js yang sudah diinstal, Kamu dapat membuat aplikasi React JS dengan terlebih dahulu menginstal aplikasi create-react-app.

Jika Kamu sudah membuat aplikasi buat-reaksi, Kamu dapat melewati bagian ini.

Instal create-react-app dengan menjalankan perintah ini di bawah Kamu:

C:\Users\Your Name>npm install -g create-react-app

Kemudian Kamu dapat membuat aplikasi React JS, mari kita buat yang disebut myfirstreact.

Jalankan perintah ini untuk membuat aplikasi React JS bernama myfirstreact:

C:\Users\Your Name>npx create-react-app myfirstreact

Aplikasi create-react-app akan mengatur semua yang Kamu butuhkan untuk menjalankan aplikasi React JS.

Jalankan Aplikasi React JS

Sekarang Kamu siap untuk menjalankan aplikasi React JS asli pertama Kamu !

Jalankan perintah ini untuk pindah ke petunjuk myfirstreact :

C:\Users\Your Name>cd myfirstreact

Jalankan perintah ini untuk menjalankan aplikasi React JS myfirstreact:

C:\Users\Your Name\myfirstreact>npm start

Jendela browser baru akan muncul di Aplikasi React JS yang baru dibuat! Jika tidak, buka browser Kamu dan ketik localhost:3000 di alamat bar.

Hasil:

https://www.w3schools.com/react/screenshot_myfirstreact.png

Ubah Aplikasi React JS

Sejauh ini bagus, tapi bagaimana cara mengubah konten?

Lihat di myfirstreact direktori, dan Kamu akan menemukan src folder. Di dalam src folder ada file bernama App.js, buka dan akan terlihat seperti ini:

/myfirstreact/src/App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
  
class App extends Component {
  render() {
    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 akan terlihat apabila Kamu menyimpan file, Kamu tidak perlu memuat ulang browser!

Contoh :

Ganti semua konten di dalam <divclassName="App">dengan <h1>elemen.

Lihat perubahan di browser saat Kamu mengklik Simpan.

import React, { Component } from 'react';
  
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello World!</h1>
      </div>
    );  
  } 
}
  
export default App;

Perhatikan bahwa kami telah menghapus impor yang tidak kami butuhkan (logo.svg dan App.css).

Hasil:

Apa berikutnya?

Sekarang Kamu memiliki keliling React JS di komputer Kamu, dan Kamu siap untuk mempelajari lebih lanjut tentang React JS.

Di sisa tutorial ini kita akan menggunakan alat Tampillan React JS kami untuk menjelaskan berbagai aspek React JS, dan bagaimana mereka ditampilkan di browser.

Jika Kamu ingin mengikuti langkah-langkah yang sama di komputer Kamu, mulailah dengan membuka srcfolder hanya berisi dua file: index.jsdan index.html, Kamu juga harus menghapus baris kode yang tidak perlu di dalam dua file agar terlihat seperti file di Show React alat 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'));

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
  
    <div id="root"></div>
  
  </body>
</html>

Demikianlah share ilmu pada artikel kali ini

semoga bermanfaat, ya

Wassalamualaikum Wr. Wb

Sumber : https://www.webhozz.com/code/tahap-awal-react-js/

No related posts.