Component

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

This page hasn't been translated yet — shown in its original language:Català

Introduction

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

Create a project with Deno

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>

You're reading a preview.

Sign in to read the full article. Any account opens 4 free articles a month; students and teachers read their course pages without limit.

Component

#Introduction

#Component

Introduction

Component