Reageer Gee HTML


React se doel is op baie maniere om HTML in 'n webblad weer te gee.

React lewer HTML na die webblad deur 'n funksie genaamd ReactDOM.render().


Die weergawe-funksie

Die ReactDOM.render()funksie neem twee argumente, HTML-kode en 'n HTML-element.

Die doel van die funksie is om die gespesifiseerde HTML-kode binne die gespesifiseerde HTML-element te vertoon.

Maar gee waar?

Daar is 'n ander gids in die wortelgids van jou React-projek, genaamd "publiek". In hierdie gids is daar 'n index.htmllêer.

Jy sal 'n enkele <div> in die liggaam van hierdie lêer sien. Dit is waar ons React-toepassing gelewer sal word.

Voorbeeld

Vertoon 'n paragraaf binne 'n element met die id van "root":

ReactDOM.render(<p>Hello</p>, document.getElementById('root'));

Die resultaat word in die <div id="root">element vertoon:

<body>
  <div id="root"></div>
</body>

Let daarop dat die element id nie "root" genoem hoef te word nie, maar dit is die standaard konvensie.


w3schools CERTIFIED . 2022

Word gesertifiseer!

Voltooi die React-modules, doen die oefeninge, neem die eksamen en word w3schools-gesertifiseer!!

$ 95 INSKRYF

Die HTML-kode

Die HTML-kode in hierdie tutoriaal gebruik JSX wat jou toelaat om HTML-etikette binne die JavaScript-kode te skryf:

Moenie bekommerd wees as die sintaksis onbekend is nie, jy sal meer oor JSX in die volgende hoofstuk leer.

Voorbeeld

Skep 'n veranderlike wat HTML-kode bevat en vertoon dit in die "root" node:

const myelement = (
  <table>
    <tr>
      <th>Name</th>
    </tr>
    <tr>
      <td>John</td>
    </tr>
    <tr>
      <td>Elsa</td>
    </tr>
  </table>
);

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


Die Wortelknoop

Die wortelnodus is die HTML-element waar jy die resultaat wil vertoon.

Dit is soos 'n houer vir inhoud wat deur React bestuur word.

Dit hoef NIE 'n <div>element te wees nie en dit hoef NIE die id='root':

Voorbeeld

Die wortelknoop kan genoem word wat jy ook al wil:

<body>

  <header id="sandy"></header>

</body>

Vertoon die resultaat in die <header id="sandy">element:

ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));