Οδηγός Έναρξης React: Δημιουργήστε το Πρώτο σας Περιβάλλον Χρήστη από το Μηδέν

Το React είναι μια βιβλιοθήκη JavaScript για τη δημιουργία περιβαλλόντων χρήστη. Αναπτύχθηκε και συντηρείται από το Facebook και έχει γίνει ένα από τα πιο δημοφιλή εργαλεία στην ανάπτυξη frontend. Αυτός ο οδηγός θα σας καθοδηγήσει από το μηδέν, βήμα προς βήμα, για να κατανοήσετε τις βασικές έννοιες του React και να δημιουργήσετε ένα απλό περιβάλλον χρήστη.

Γιατί να επιλέξετε το React;

Το React έχει τα ακόλουθα πλεονεκτήματα:

Component-based (Βασισμένο σε στοιχεία): Το React διασπά το περιβάλλον χρήστη σε ανεξάρτητα, επαναχρησιμοποιήσιμα στοιχεία. Αυτό καθιστά τον κώδικα ευκολότερο στη συντήρηση και την κατανόηση.
Declarative (Δηλωτικό): Το React χρησιμοποιεί ένα δηλωτικό στυλ προγραμματισμού, που σημαίνει ότι χρειάζεται μόνο να περιγράψετε τι θέλετε να εμφανίσετε και το React θα χειριστεί αυτόματα τις ενημερώσεις και την απόδοση.
Efficient (Αποδοτικό): Το React χρησιμοποιεί ένα εικονικό DOM και έναν έξυπνο αλγόριθμο diff, ο οποίος μπορεί να ενημερώσει αποτελεσματικά το περιβάλλον χρήστη, μειώνοντας την περιττή απόδοση.
Large community support (Μεγάλη υποστήριξη κοινότητας): Το React έχει μια μεγάλη κοινότητα και ένα πλούσιο οικοσύστημα, όπου μπορείτε να βρείτε πολλά tutorials, βιβλιοθήκες και εργαλεία για να σας βοηθήσουν στην ανάπτυξη.
Cross-platform capability (Δυνατότητα cross-platform): Το React Native σας επιτρέπει να χρησιμοποιήσετε το React για να αναπτύξετε εγγενείς εφαρμογές για κινητά (iOS και Android).

Προετοιμασία

Πριν ξεκινήσετε, πρέπει να βεβαιωθείτε ότι έχετε εγκαταστήσει τα ακόλουθα εργαλεία στον υπολογιστή σας:

Node.js: Το Node.js είναι ένα περιβάλλον χρόνου εκτέλεσης JavaScript για την εκτέλεση εργαλείων ανάπτυξης React. Μπορείτε να το κατεβάσετε και να το εγκαταστήσετε από το https://nodejs.org/.
npm ή yarn: Το npm (Node Package Manager) και το yarn είναι διαχειριστές πακέτων JavaScript για την εγκατάσταση και τη διαχείριση των εξαρτήσεων του React. Συνήθως το npm εγκαθίσταται μαζί με το Node.js. Το yarn μπορεί να εγκατασταθεί από το https://yarnpkg.com/.

Δημιουργήστε την πρώτη σας εφαρμογή React

Θα χρησιμοποιήσουμε το create-react-app για να δημιουργήσουμε γρήγορα ένα έργο React.

Δημιουργήστε χρησιμοποιώντας npm:

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

Δημιουργήστε χρησιμοποιώντας yarn:

yarn create react-app my-first-react-app
cd my-first-react-app
yarn start

Μετά την εκτέλεση των παραπάνω εντολών, το create-react-app θα δημιουργήσει αυτόματα έναν κατάλογο με το όνομα my-first-react-app και θα αρχικοποιήσει ένα έργο React σε αυτόν τον κατάλογο. Η εντολή npm start ή yarn start θα ξεκινήσει τον διακομιστή ανάπτυξης και μπορείτε να επισκεφθείτε το http://localhost:3000 στο πρόγραμμα περιήγησής σας για να δείτε την εφαρμογή React.

Δομή καταλόγου

Η δομή καταλόγου του έργου που δημιουργήθηκε από το create-react-app είναι η εξής:

my-first-react-app/
├── node_modules/         # Οι βιβλιοθήκες από τις οποίες εξαρτάται το έργο
├── public/               # Στατικοί πόροι (π.χ. αρχεία HTML)
│   ├── index.html        # Το αρχείο HTML εισόδου της εφαρμογής
│   └── ...
├── src/                  # Κώδικας πηγής React
│   ├── App.css           # CSS στυλ του App component
│   ├── App.js            # App component
│   ├── App.test.js       # Αρχείο δοκιμών του App component
│   ├── index.css         # Καθολικά CSS στυλ
│   ├── index.js          # Αρχείο JavaScript εισόδου της εφαρμογής
│   ├── logo.svg          # React logo
│   └── ...
├── .gitignore            # Αρχείο Git ignore
├── package.json          # Μεταδεδομένα και εξαρτήσεις του έργου
├── README.md             # Έγγραφο τεκμηρίωσης του έργου
└── yarn.lock             # Αρχείο κλειδώματος έκδοσης εξαρτήσεων (αν χρησιμοποιείται yarn)

Κατανόηση των React Components

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

Στο αρχείο src/App.js, μπορείτε να δείτε ένα προεπιλεγμένο App component:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Επεξήγηση κώδικα:

import React from 'react'; Εισάγει τη βιβλιοθήκη React.
function App() { ... } Ορίζει ένα function component με όνομα App.
return ( ... ) Επιστρέφει μια JSX έκφραση που περιγράφει το περιεχόμενο που θα πρέπει να αποδώσει το component.
export default App; Εξάγει το App component, ώστε να μπορεί να χρησιμοποιηθεί σε άλλα αρχεία.

JSX (JavaScript XML)

Η JSX είναι μια επέκταση σύνταξης JavaScript που σας επιτρέπει να γράφετε κώδικα που μοιάζει με HTML στον κώδικα JavaScript. Στο παραπάνω παράδειγμα, το ... είναι μια JSX έκφραση. Ο κώδικας JSX μετατρέπεται σε τυπικό κώδικα JavaScript από το Babel, ώστε να μπορεί να γίνει κατανοητός από το πρόγραμμα περιήγησης.

Τροποποίηση του App Component

Ας τροποποιήσουμε το App component για να δημιουργήσουμε έναν απλό μετρητή.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Μετρητής

      Τρέχουσα μέτρηση: {count}

      +
      -
    
  );
}

export default App;

Επεξηγήσεις τροποποιήσεων:

import React, { useState } from 'react'; Εισάγετε το Hook useState. Το useState είναι ένα React Hook που χρησιμοποιείται για την προσθήκη κατάστασης σε λειτουργικά components.
const [count, setCount] = useState(0); Χρησιμοποιήστε το Hook useState για να δημιουργήσετε μια μεταβλητή κατάστασης με το όνομα count και να την αρχικοποιήσετε σε 0. Το setCount είναι μια συνάρτηση για την ενημέρωση της κατάστασης count.
const increment = () => { setCount(count + 1); }; Ορίστε μια συνάρτηση με το όνομα increment για να αυξήσετε την κατάσταση count κατά 1.
const decrement = () => { setCount(count - 1); }; Ορίστε μια συνάρτηση με το όνομα decrement για να μειώσετε την κατάσταση count κατά 1.
`Τρέχουσα μέτρηση: {count}

Εμφανίστε την τιμή της κατάστασηςcountστη σελίδα. Το{count}` είναι μια έκφραση JSX που χρησιμοποιείται για την εισαγωγή μεταβλητών JavaScript στον κώδικα JSX.

+ και - Δημιουργήστε δύο κουμπιά και συνδέστε τις συναρτήσεις increment και decrement αντίστοιχα. Το onClick είναι ένας χειριστής συμβάντων που χρησιμοποιείται για την εκτέλεση της καθορισμένης συνάρτησης όταν γίνεται κλικ στο κουμπί.

Αφού αποθηκεύσετε το αρχείο src/App.js, το πρόγραμμα περιήγησης θα ανανεωθεί αυτόματα και θα δείτε έναν απλό μετρητή. Κάνοντας κλικ στο κουμπί "+" θα αυξήσετε την μέτρηση και κάνοντας κλικ στο κουμπί "-" θα μειώσετε την μέτρηση.

Χρήση στυλ CSS

Μπορείτε να χρησιμοποιήσετε CSS για να βελτιώσετε την εμφάνιση της εφαρμογής σας React. Το create-react-app υποστηρίζει CSS Modules και κανονικά αρχεία CSS.

Χρήση CSS Modules:

Τα CSS Modules σας επιτρέπουν να δημιουργήσετε ανεξάρτητα στυλ CSS για κάθε component, αποφεύγοντας τις συγκρούσεις στυλ. Για να χρησιμοποιήσετε CSS Modules σε ένα component, πρέπει να δημιουργήσετε ένα αρχείο που να τελειώνει σε .module.css.

Για παράδειγμα, δημιουργήστε ένα αρχείο με το όνομα App.module.css και προσθέστε τα ακόλουθα στυλ CSS σε αυτό:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Στη συνέχεια, εισαγάγετε τα CSS Modules στο αρχείο src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Εισαγωγή CSS Modules

function App() {
  const [count, setCount] = useState(0); const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Χρήση του αντικειμένου styles για αναφορά σε κλάσεις CSS */}
      

# Μετρητής

      Τρέχουσα μέτρηση: {count}

      +
      -
    
  );
}

export default App;

Χρήση απλού αρχείου CSS:

Μπορείτε επίσης να χρησιμοποιήσετε ένα απλό αρχείο CSS για να ορίσετε καθολικά στυλ. Στο αρχείο src/index.css, μπορείτε να ορίσετε καθολικά στυλ.

Για παράδειγμα, προσθέστε τα ακόλουθα στυλ CSS:

body {
  font-family: sans-serif;
}

Αυτό το στυλ θα εφαρμοστεί σε ολόκληρο το στοιχείο body της εφαρμογής.

Επόμενο βήμα

Συγχαρητήρια, ολοκληρώσατε την πρώτη σας εφαρμογή React! Στη συνέχεια, μπορείτε να μάθετε περισσότερα για το React, όπως:

Επικοινωνία μεταξύ components: Μάθετε πώς να επικοινωνούν διαφορετικά components μεταξύ τους.
Διαχείριση φορμών: Μάθετε πώς να δημιουργείτε και να διαχειρίζεστε φόρμες.
Δρομολόγηση: Μάθετε πώς να χρησιμοποιείτε το React Router για να δημιουργήσετε εφαρμογές πολλών σελίδων.
Redux ή Context API: Μάθετε πώς να διαχειρίζεστε την κατάσταση της εφαρμογής.
Hooks: Μάθετε περισσότερα για τα React Hooks, όπως useEffect, useContext κ.λπ.

Να θυμάστε ότι το React είναι μια τεχνολογία που απαιτεί συνεχή εξάσκηση και μάθηση. Σας εύχομαι καλή μάθηση!