Ola loron di'ak belun sira, iha tutorial ida-ne’e ita sei aprende oinsá atu kria website simples ida uza ReactJS. Tutorial ne’e hanesan kontinuasaun hosi tutorial primeiru ne’ebé ita halo ona konaba instalasaun ReactJS iha ita-nia laptop ka komputadór. Konteudu hosi tutorial ida-ne’e mak hanesan tuirmai ne’e:

• Strutura folder ka pasta sira-ne’ebé kria hosi aplikasaun ho naran “tutorial-reactjs-ida” ne’ebé ita kria ona iha tutorial primeiru

• Ita mos sei hare no kria komponente sira hosi ReactJS hodi bele kria website ida ne’e

• Ita mos sei hare oinsá kria komponente pájina sira hodi bele komunika ho pájina sira seluk

• Ikus liu ita sei hatudu website simples ida-ne’e iha web browser

1. Strutura folder ka Pasta hosi aplikasaun naran “tutorial-reactjs-ida”

Atu bele implementa ReactJS no kria website ho di'ak, ita presija intende didi'ak strutura hosi folder ka pasta hosi aplikasaun ne’ebé ita kria ona. Tuirmai hanesan esplikasaun pasta ka folder sira-ne'e iha Visual Studio Code

• Pasta ka folder "Node Modules" refere ba pasta módulu dependensia ba ReactJS. Tanba ReactJS nia karakterístika mak foka liu ba jestaun interasaun pájina sira nian(state management and rendering that state to the DOM). Tanba ne'e ReactJS depende ba pasta "Node Modules" hodi bele ezekuta ninia funsaun ho susesu. Node Modules ne'e hola parte hosi NPM (Node Package Manager), ida ne'e hanesan plugins sira-ne’ebé kria ona hosi developers sira ba ReactJS nian no fornese hanesan Open Source atu bele kompleta funsionamentu ReactJS nian. Atu esplika mos DOM ka Document Object Model mak hanesan estrutura ida hosi plataforma HTML ou XML (Cross Platform) ne’ebé reprezenta hosi bloku ida-idak (Nodes). DOM ida ne'e ajuda ita hodi kompriende prosesu rezultadu website iha web browser hanesan Google Chrome, Internet Explorer no seluk-seluk tan. Iha tutorial tuirmai, hau sei esplika klaru konaba DOM no oinsá ninia prosesu iha web browser

• Pasta ka folder "Public" mak hanesan pasta ida-ne’ebé ninia konteudu kompostu hosi HTML (Hypertext Markup Language) no file sira seluk. Pájina importante iha pasta ida-ne'e mak index.html. Pajina index hanesan entrada ba ita-nia website, no meta tags sira-ne’ebé importante wainhira ita deploy ita-nia aplikasaun no Google Crawler (metodu ida-ne’ebé utiliza hodi identifika lalais ita-nia website).

• Pasta ka folder "Src" mak hanesan pasta ida-ne’ebé ita sei utiliza hodi kria ita-nia komponente sira ba website nian. Ida-ne'e sei inklui pájina sira konaba website nian. Ita sei utiliza pasta ida-ne'e dala barakliu duké pasta sira seluk

2. Komponente sira hosi ReactJS

• Saida mak komponente hosi ReactJS?

Komponente hosi ReactJS mak kódigu ida-ne’ebé independente no bele utiliza fila-fali iha pájina hotu-hotu (reusable code). Funsaun hosi komponente sira-ne'e hanesan mos Funsaun hosi JavaScript baibain (Normal JavaScript Function) maibé sira-ne'e independente no fo sai resultadu HTML liuhosi funsaun ida bolu naran "Render". Mai ita haree hamutuk ezemplu hodi kompriende kle'an liutan.

Komponente hosi ReactJS iha tipu rua mak hanesan tuirmai ne'e:

• Komponente Klase nian (Class Components)

Ezemplu hosi Komponente Klase nian mak hanesan tuirmai ne'e:

class Kontaktu extends React.Component {
  render() {
    return <h2>Hello, hau mai hosi Komponente Kontaktu!</h2>;
  }
}

• Komponente Funsaun nian (Function Components)

Ezemplo hosi Komponente Funsaun nian mak hanesan tuir mai:

  function Kontaktu() {
      return <h2>Hello, hau mai hosi Komponente Kontaktu!</h2>;
  }

Hanesan hatudu iha ezemplu rua-ne'e, ita bele bolu komponente rua-ne'e iha pájina sira seluk hodi metodu export. Iha ita-nia ezersísiu ida-ne'e, ita sei utiliza komponente rua-ne'e hodi dezeña ita-nia website simples.

Ita sei kria komponente haat ba ezersísiu ida-ne'e mak hanesan tuirmai ne'e:

• Komponente "Pages" ka pájina sira ba portál nian

• Komponente "Layout" ka estrutura ba Portál nian

• Komponente "Navbar" ka menu ba pájina nian

• Komponente "Footer" ka Konteudu ne’ebé ita hetan iha pájina okos liu

Steps sira tuirmai ne'e hatudu oinsá atu kria Komponente sira-ne'e:

Loke pasta ka folder ba Aplikasaun ne’ebé ita kria ona iha Ezersísiu primeiru, naran ba folder mak "tutorial-reactjs-ida".

A. Ita-boot sira bele loke folder ida-ne'e hodi uza text editor Visual Code ou Text editor sira seluk hanesan Sublime Text, Atom, Nodepad ++ no seluk-seluk tan. Tenke loke uluk lai Visual code, hafoin loke folder ne’ebé mak iha. Hare ezemplu iha kraik ne'e:

Hanesan hatudu iha ezemplu leten, hili file "tutorial-reactjs-ida" nebe natón kria ona iha ezersísiu ida.

B. Wainhira loke ona Visual Code no Pasta "tutorial-reactjs-ida", ita persiza klik iha pasta "Src" hodi kria ita-nia komponente sira. Primeiru ita tenke kria pasta "components" hafoin ita kria folder sira-ne’ebé refere ba komponente sira temi iha leten (Pages, Navbar, Layout, Footer) iha pasta "components" nia laran. Hare iha ezemplu iha okos ne'e

Esplikasun konaba komponente sira iha leten

• Komponente "Footer", file ne’ebé mak sei enkaixa iha pasta Footer nia laran mak Footer.js. Konteudu hosi file ne'e mak menu ba footer nian no copyrights ba website nian.

• Komponente "Layout", file ne’ebé mak sei enkaisa iha pasta Layout mak CSS nia file sira, ida-ne'e sei depende karik ita hakarak utiliza CSS ou JSX file hodi utiliza komponente hosi terseira Parte hanesan Material UI no seluk-seluk tan. Iha ezersisiu ida-ne'e ita sei kria file naran layout.css

• Komponente "Navbar", file ne’ebé mak sei enkaixa iha pasta Navbar mak Navbar.js. Konteudu hosi file ne'e mak Menu ba website sira-nian, Logo no fatin atu buka pájina ruma (Search bar).

• Komponente "Pages", file nebe mak sei enkaisa iha pasta Pages mak pájina sira hotu ne’ebé mak sei asesu wainhira ita loke website ida-ne'e. Ezemplu About.js, Contact.js, Home.js. Idealmente Pages ne'e ema barak la uza hanesan Komponente ida maibé iha ezersísiu ida-ne'e ha'u hakarak utiliza tamba dala ruma mos ita bele bolu fali pájina ida ba fali pájina sira seluk (re-usable code)

Kodiku hosi Komponente sira ne'e mak hanesan tuirmai ne'e:

Kodiku ba Komponente Navbar.js

  import React, {Component} from 'react';

  class Navbar extends Component {
      render() {
          return(
             <div>
                <ul>
                  <li><a href="/">Home</a></li>
                  <li><a href="/about">About</a></li>
                  <li><a href="/contact">Contact</a></li>
                </ul>
            </div>
          );
      }
    }
  export default Navbar;

Kódigu ba Komponente Footer.js

  import React, {Component} from 'react';

  class Footer extends Component {
      render() {
          return <p>Hello, hau mai hosi Komponente Footer!</p>;
      }
    }
  export default Footer;

Kódigu ba Komponente Pages ka Pájina sira (About.js, Home.js, Contact.js)

   import React, {Component} from 'react';

    class Home extends Component {
      render() {
          return <p>Hello, hau mai hosi Komponente pajina Home!</p>;
      }
    }
  export default Home;

  import React, {Component} from 'react';

    class About extends Component {
      render() {
          return <p>Hello, hau mai hosi Komponente Pajina About!</p>;
      }
    }
  export default About;

  import React, {Component} from 'react';

    class Contact extends Component {
      render() {
          return <p>Hello, hau mai hosi Komponente Pajina Contact!</p>;
      }
    }
  export default Contact;

Tuir mai copy no paste kódigu sira-ne'e iha sira-nia file hanesan iha ezemplu iha okos ne'e:

Esplikasaun simples hosi kódigu sira iha leten.

Hanesan ita nota katak ba komponente tolu no pájina sira-ne'e, ita utiliza Komponente Klase ka Class Component. hanesan hatudu iha komponente sira, ita hahú hodi importa funsaun react import (import React, {Component} from 'react'). Hafoin ita kria klase ida ho naran hanesan iha ezemplu leten. Klase sira extende komponente (class extends Component) ne’ebé ho objetivu bele asesivel iha pájina sira seluk (ida-ne'e akontese wainhira ita importa klase ka funsaun ne'e iha pájina seluk). Hafoin ita prodús nia resultadu uza "return" ho métodu "render" . Ikusliu ita exporta komponente ne'e ho maneira export default .

Ita sei enkaixa komponente sira-ne'e ba iha pájina entrada iha App.js no utiliza "React Router Dom" hodi hatudu pájina sira-ne'e iha browser wainhira user klik iha link ne’ebé refere. React Router Dom ida ne'e hanesan modulu hosi ReactJS ne’ebé ita sei uza hodi halo mudansa dinámiku ba pájina sira-ne'e. E.g wainhira vizita pájina "About", react router sei fo diresaun nune'e link ne’ebé ita vizita bele hatudu pájina própriu hosi About website nian.

Steps sira tuirmai ne'e nesesariu atu bele utiliza react router iha App.js

Installa react router ho command tuir mai ne'e:

   yarn add react-router-dom

Wainhira ita instala ho susesu, ita presiza modifika pájina App.js hodi bele enkaixa komponente sira seluk iha Router nia laran. Haree kódigu tuirmai ne'e no paste iha ita-boot sira-nia file. Ita mos sei hasai CSS hosi App.js tanba ita sei utiliza ita-nia CSS rasik. Haree iha ezemplu iha kraik ne'e:

Esplikasaun simples hosi kódigu sira iha leten.

• Ita importa komponente sira-ne'ebé ita kria ona
• ita Kria Funsaun ida (React Function) ho naran App
• Ita uza métodu Return hodi bele enkaixa komponente sira-ne'ebé ita importa ona iha "React Router" hanesan hatudu iha ezemplu (Wrapp all the Components inside Router).
• Ita exporta Funsaun App ho maneira export default

Wainhira ita deklara hotu ona iha App.js, Funsaun ida-ne'e automátikamente sei enkaixa iha Index.js ne'ebé mai hamutuk ho ReactJS wainhira ita installa. Document Object Model ba ReactJS sei prodús iha file ida-ne'e nia laran no ida-ne'e faze ikus wainhira ita hatudu website iha Browser. hare ezemplu iha kraik ne'e:

Wainhira los hotu ona, ita-bot sira ezekuta code tuir mai ne'e iha terminal. Tama iha diretoria "tutorial-reactjs-ida"

cd tutorial-reactjs-ida
yarn start

No visita localhost:3000. Se buat hotu los, ita-boot sira sei haree pájina website simples ne'e hanesan hatudu iha kraik ne'e. Ita-boot sira koko hodi klik iha link header nian no haree mudansa pájina dinámiku

Mak ne'e deit no keta haluha comment no like, iha tutorial tuirmai, ita sei enkaixa CSS (Cascading Stylesheet) hodi bele haree website ne'ebé kompletu