REACTJS #1 MEMBUAT TAMPILAN HELLO WORLD!

 

Menampilkan tulisan ataupun tag HTML merupakan hal utama yang perlu diketahui dalam ReactJS. Seperti halnya ketika pertama kali mempelajari pemrograman bahasa lain akan diajarkan cara menampilkan tulisan. Pada pembelajaran pertama REactJS ini juga akan di ajarkan cara menampilkan tulisan berupa kata "Hello World!".

Sebelumnya pastikan untuk membuat project baru terlebih dahulu. Untuk cara pembuatan project baru ReactJS silahkan baca Membuat dan Menjalankan Project Baru ReactJS.

Selanjutnya ikuti langkah-langkah dibawah ini untuk memulai menampilkan tulisan.

1. Edit file App.js

File JS utama yang pertama kali akan di eksekusi ketika program dijalankan adalah App.js yang berada di directory src -> App.js. Secara default untuk versi terbaru kodenya akan tampak seperti berikt :

import React from 'react';
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;

Pada kode di atas terdapat tag html yang berada di dalam function App. Secara default fungsi App ini akan dijalakan ketika file App.js di eksekusi. Untuk membuat tampilan "Hello World!" silahkan rubah code yang ada dalam tag return(); dengan kode html yang di inginkan. Contohnya seperti berikut.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <h1>Hello World!</h1>
  );
}

export default App;

2. Jalankan aplikasi

Tampilan dari kode di atas ketika di jalankan maka tampak seperti pada gambar.

Perhatian :

Satu fungsi pada reactjs hanya bisa menjalankan satu paket tag html. Jadi misalnya kode html yang ingin dijalankan seperti ini.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <h1>Hello World!</h1>
    <h2>Selamat datang di Coding Rakitan</h2>
  );
}

export default App;

Program akan menampilkan error seperti berikut :

Jadi pastikan kode html tidak terbagi menjadi dua tag. Caranya dengan memasukkan 2 tag tersebut kedalam 1 tag html, seperti berikut.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
	  <div>
	    <h1>Hello World!</h1>
	    <h2>Selamat datang di Coding Rakitan</h2>
	  </div>
  );
}

export default App;

Maka hasilnya akan seperti berikut :