Escriu per cercar…

Component

React applications are built from independent pieces of UI called components.

Introduction

A React component is a TypeScript function to which you can add TSX.

Create a project with Deno

ps
deno init --npm vite --template react-swc-ts react-component

Component

Define the Greeting component which is used by the App component:

tsx
export default function App() {
  return <Greeting/>
}

function Greeting() {
  return <p className="fs-3 p-4 border">Hello X</p>
}

Els components de React són funcions regulars de TypeScript, però els seus noms han de començar amb lletra majúscula o no funcionaran!

El component Greeting està nidat dins del component App.

Pots afegir tants components Greeting com vulguis dins del component App:

tsx
export default function App() {
  return (
    <>
      <Greeting />
      <Greeting />
      <Greeting />
    </>
  )
}

function Greeting() {
  return <p className="fs-3 m-2 p-2 border text-center">Hello X</p>
}

Al final el que el navegador veu és això:

html
<p class="fs-3 m-2 p-2 border text-center">Hello X</p>
<p class="fs-3 m-2 p-2 border text-center">Hello X</p>
<p class="fs-3 m-2 p-2 border text-center">Hello X</p>

Estàs llegint una vista prèvia.

Inicia sessió per llegir l'article complet. Qualsevol compte obre 4 articles gratuïts al mes; l'alumnat i el professorat llegeixen les pàgines del seu curs sense límit.

Inicia sessió