Εισαγωγή στην Προσέγγιση των Components στο React

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

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

Σε κάθε component στο React αντιστοιχεί ένα ES6 module, που βρίσκεται στον φάκελο src. Το όνομα του αρχείου του module γράφεται με κεφαλαίο γράμμα και πρέπει να αντιστοιχεί στη συνάρτηση που βρίσκεται στον κώδικα αυτού του module.

Για παράδειγμα, το αρχείο με το όνομα App.js πρέπει να περιέχει μέσα του τη συνάρτηση App:

import React from 'react';

function App() {
	// κώδικας του component
}

export default App;

Ένα από τα components πρέπει να είναι το κύριο - αυτό στο οποίο προστίθενται τα υπόλοιπα components. Στο React, από προεπιλογή, αυτό το component θα είναι το component App. Σε αυτό το component θα συνδέονται άλλα components. Πώς γίνεται αυτό - θα το εξετάσουμε παρακάτω στο σεμινάριο.