Χρήση Components στο React

Κάθε συνδεδεμένο component αντιστοιχεί στο δικό του JSX tag. Για παράδειγμα, αν έχουμε το component Product, τότε αυτό αντιστοιχεί στο ακόλουθο tag:

jsx<Product />

Το όνομα του tag του component πρέπει υποχρεωτικά να γράφεται με κεφαλαίο γράμμα, ώστε το React να μπορεί να διακρίνει την κλήση ενός component από τη χρήση ενός HTML tag.

Λοιπόν, ας χρησιμοποιήσουμε το component Product μέσα στο component App, γράφοντας το αντίστοιχο tag:

jsximport React from 'react';
import Product from './Product';

function App() {
  return <div>
    <Product />
  </div>;
}

export default App;

Ως αποτέλεσμα, μετά το render θα προκύψει το ακόλουθο:

html<div>
  <p>
    product
  </p>
</div>