React Element (Hello World!)

Postingan sebelumnya yang mencatat tentang instalasi dan konfigurasi ReactJS ada dihalaman berikut https://undebugable.blogspot.com/2019/06/persiapan-memulai-belajar-reactjs.html.

ReactJS Element

ReactJS Element adalah building block terkecil pada applikasi ReactJS 

+Contoh sederhana dari sebuah element:


<div id="root"></div> <!-- root DOM node -->

const element = <h1>Hello, world</h1>;  // ReactJS Element
ReactDOM.render(element, document.getElementById('root')); // Render


+Contoh lain dari membuat sebuah element:

var P = React.createElement("p",
                             { className: "paragraph" },
                               "Hello from React."
                             });
                           

ReactDOM.render(P,  document.getElementById("root"),
                  () => { console.log("We've just rendered this paragraph."); }); // render target

Struktur Project ReactJS

Berikut ini adalah hasil dari create project yang sebelumnya dilakukan.

Struktur Project ReactJS

Npm Start 

Root DOM Node

Buat Element Baru Greeting 

const greeting = React.createElement('h1', {}, 'Hai, Hello world!');

ReactDOM.render(greeting, document.getElementById('root'));

Buat Element Baru Greeting Dengan JSX

const greeting = <h1>Hai lagi, Hello world!</h1>;

ReactDOM.render(greeting, document.getElementById('root'));

+Memanggil Fungsi Dari Element

const getCurrentDate = () => {

const date = new Date();

return date.toDateString();

}

// const greeting = React.createElement('h1', {}, 'Hai, Hello world!');

const greeting = <h1>Hai lagi, Hello world! {getCurrentDate()}</h1>;

ReactDOM.render(greeting, document.getElementById('root'));

Hasil pemanggilan fungsi dari dalam jsx.

Sumber
https://reactjs.org/docs/rendering-elements.html
https://www.udemy.com/react-fundamentals/learn/lecture/8816014#overview