Χρήση Components στο React

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

<Product />

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

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

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

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

export default App;

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

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

Δημιουργήστε το component User, που θα εμφανίζει τα δεδομένα των χρηστών. Ας κάνει αυτό το component για τώρα απλά την εμφάνιση κάποιου κειμένου. Χρησιμοποιήστε αυτό το component μέσα στο component App.