Dall'archivio script > HTML5

Creare un component tramite function in ReactJS

di Stefano MostardaStefano Mostarda, in HTML5, React,

Il modo più veloce per creare un'applicazione di prova con ReactJS è quello di creare una pagina HTML all'interno della quale renderizziamo un component. Per creare un component dobbiamo semplicemente creare una funzione che al suo interno restituisca un tag HTML da renderizzare. Successivamente usiamo il metodo render della classe ReactDOM. per renderizzare questo tag all'interno della pagina. 

<html>
<head></head>
<body>
  Hello world in ReactJS
  <div id="example"></div>
  </script>
</body>
</html>

function HelloWorld() {
  return (
    <div>
      Hello World from reactJS
    </div>
  );
}

ReactDOM.render(
  <HelloWorld />,
  document.getElementById('example')
);

In quesoto snippet ci sono diverse cose da notare. La prima è che il metodo HelloWorld utilizza la sintassi JSX per esprimere il codice HTML che deve renderizzare. La seconda è che nel metodo render utilizziamo la funziona come se fosse un tag HTML. Anche questa sintassi è JSX in quando una funzione che torna HTML e che ha la prima lettera maiuscola può essere come tag. Ovviamente, il browser non è in grado di interpretare la sintassi JSX, quidni il javascript va prima preprocessato con transpiler come TypeScript o Babel.

Commenti

Visualizza/aggiungi commenti

| Condividi su: LinkedIn, Facebook
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi