Εισαγωγή στα Components React

Ρίξτε μια ματιά σε οποιοδήποτε site. Αποτελείται από ένα σύνολο ανεξάρτητων μπλοκ: κεφαλίδα, πλαϊνές μπάρες, υποσέλιδο, περιεχόμενο. Μπορούμε να πούμε ότι αυτά τα μπλοκ είναι components με την έννοια που εννοείται στο React.

Αν κοιτάξουμε την ίδια κεφαλίδα, τι μπορούμε να διακρίνουμε μέσα σε αυτή: ένα μπλοκ με το λογότυπο, ένα μπλοκ επαφών, ένα μπλοκ με το μενού και ούτω καθεξής. Δηλαδή, τα components μπορούν να αποτελούνται από άλλα υπο-components.

Με ανάλογο τρόπο τα πράγματα είναι και στο React - το site χτίζεται από ένα σύνολο components, τα οποία με τη σειρά τους μπορούν να περιέχουν άλλα components.

Στο React κάθε component αντιπροσωπεύει ένα ξεχωριστό module. Συνήθως η ανάπτυξη ξεκινά από το κύριο component App, το οποίο περιέχει μέσα του τα υπόλοιπα.

Ας εξασκηθούμε στη δημιουργία νέων components.

Ας υποθέσουμε για παράδειγμα ότι χρειαζόμαστε ένα component που εμφανίζει τα δεδομένα ενός προϊόντος. Για αυτό, πρέπει στον φάκελο εργασίας να δημιουργήσουμε το αρχείο Product.js και να προσθέσουμε σε αυτό τον ακόλουθο κώδικα:

import React from 'react';

function Product() {
	return <p>
		προϊόν
	</p>;
}

export default Product;

Όπως βλέπετε, αυτή τη στιγμή το component μας επιστρέφει μια παράγραφο με κείμενο. Σε επόμενα μαθήματα θα βελτιώσουμε αυτόν τον κώδικα έτσι ώστε να επιστρέφονται τα δεδομένα του προϊόντος. Αλλά προς το παρόν απλά αφήνουμε μια παράγραφο με κάποιο αρχικό κείμενο.

Ας εμφανίσουμε τώρα το δημιουργημένο μας component μέσα στο component App. Ας υποθέσουμε ότι τώρα το App μας έχει τον ακόλουθο κώδικα:

import React from 'react';

function App() {
	return <div>
		κείμενο
	</div>;
}

export default App;

Πρώτα πρέπει να εισάγουμε (import) το component του προϊόντος που δημιουργήσαμε:

import React from 'react';
import Product from './Product'; // εισάγουμε το προϊόν

function App() {
	return <div>
		κείμενο
	</div>;
}

export default App;

Μετά από αυτό το import, μέσα στο component App μπορούμε να χρησιμοποιήσουμε το component Product.