recherche
Maisoninterface Webtutoriel CSSAller Jamstack avec React, sans serveur et Airtable

Aller Jamstack avec React, sans serveur et Airtable

Apprenez en construisant! Ce tutoriel démontre l'architecture JAMSTACK en créant une application React avec des fonctions sans serveur NetLify et AirTable. Alors que Jamstack met l'accent sur l'hébergement statique, ce projet présente des capacités dynamiques, y compris la fonctionnalité complète de CRUD.

Choix technologiques

Jamstack, représentant JavaScript, API et Markup, exploite les technologies existantes d'une manière nouvelle. La pile technologique de ce tutoriel hiérarchise la facilité de déploiement et d'hébergement. Les fonctions Netlify gèrent les opérations de crud backend avec Airtable, permettant un déploiement transparent sur Netlify. Airtable simplifie la gestion de la base de données, offrant une interface conviviale et un SDK JavaScript, éliminant le besoin d'hébergement et de gestion de la base de données séparés.

Aperçu de l'application

Cette application suit les cours en ligne, agissant comme une file d'attente d'apprentissage personnelle. Il permet aux utilisateurs d'ajouter, de mettre à jour, de marquer comme acheté et de supprimer les cours.

Code source: Je crée des cours en ligne, y compris une nouvelle sur les applications Jamstack sécurisées et prêtes à la production en utilisant les fonctions React et Netlify. Ce cours couvre l'authentification, le stockage de données Airtable, les composants stylisés, le Netlify CI, etc. En savoir plus →

Configuration aérienne

Airtable utilise des "bases" pour les bases de données. Suivez ces étapes:

  1. Créez un compte Airtable gratuit.
  2. Créez une nouvelle base (j'ai nommé les miens "Jamstack Demos").
  3. Créez une table nommée "cours" avec ces colonnes:
    • name (texte unique)
    • link (texte à ligne unique)
    • tags (plusieurs sélections - Ajouter des balises comme "nœud"
    • purchased (case à cocher)
  4. Ajoutez quelques exemples de données de cours.

Obtenir des références Airtable

Avant de coder, rassemblez ces informations d'identification Airtable:

  1. Clé API: trouvé sur votre page de vue d'ensemble de compte AirTable.
  2. ID de base: Situé sur la page de l'API Airtable, dans vos détails de base.
  3. Nom de la table: (par exemple, "cours")

Configuration du projet

Un projet de démarrage est disponible sur GitHub. Suivez ces étapes:

  1. Fourk le référentiel.
  2. Clone le référentiel fourchu localement.
  3. Découvrez la branche starter ( git checkout starter ).

Le projet comprend une structure create-react-app , un répertoire functions pour les fonctions sans serveur et un fichier de configuration netlify.toml . Installez le package dotenv :

 NPM Installer Dotenv

Créez un fichier .env dans la racine du projet avec vos informations d'identification AirTable:

 <code>AIRTABLE_API_KEY=<your_api_key> AIRTABLE_BASE_ID=<your_base_id> AIRTABLE_TABLE_NAME=<your_table_name></your_table_name></your_base_id></your_api_key></code>

Fonctions sans serveur

Les fonctions Netlify sont des fichiers JavaScript dans le répertoire /functions . Le fichier courses.js agit comme point de terminaison de l'API principal. Il utilise des fonctions d'assistance ( getCourses , createCourse , updateCourse , deleteCourse ) basée sur les méthodes HTTP:

 exports.handler = async (événement) => {
  if (event.httpMethod === 'Get') {
    RETOUR AWAIT GetCourses (événement);
  } // ... Autres méthodes HTTP
};

Le fichier airtable.js configure la connexion AirTable:

 require ('dotenv'). config ();
var AirTable = require ('AirTable');
// ... Configuration de la base et de la table Airtable ...

Opérations CRUD

Les fonctions d'assistance interagissent avec Airtable:

  • getCourses.js : récupère les cours à l'aide de table.select().firstPage() , gère les erreurs et formats la réponse.
  • createCourse.js : crée un nouveau cours en utilisant table.create() .
  • updateCourse.js : met à jour un cours à l'aide de table.update() .
  • deleteCourse.js : supprime un cours en utilisant table.destroy() .

Test: Utilisez netlify dev pour exécuter les fonctions localement. Testez des points de terminaison à l'aide d'outils comme Postman ou Insomnia.

React frontend

L'application React interagit avec les fonctions sans serveur:

  • App.js : loadCourses récupèrent des cours en utilisant fetch('/api/courses') .
  • CourseForm.js : submitCourse envoie des demandes de poste pour créer de nouveaux cours.
  • Course.js : markCoursePurchased envoie des demandes de put et deleteCourse envoie des demandes de suppression.

Déploiement à Netlify

Déploiement sur Netlify en connectant votre référentiel GitHub. Spécifier:

  • Commande de construction: npm run build
  • Publier le répertoire: build
  • Ajoutez des variables d'environnement de votre fichier .env .

Conclusion

Ce tutoriel montre la simplicité et la puissance de l'architecture Jamstack. La combinaison de React, Netlify Functions et AirTable fournit une application complète robuste et facilement déployable. Explorez d'autres services et technologies Jamstack pour améliorer encore votre flux de travail de développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Que signifie marge: 40px 100px 120px 80px?Que signifie marge: 40px 100px 120px 80px?Apr 28, 2025 pm 05:31 PM

L'article traite de la propriété CSS Margin, en particulier "Marge: 40px 100px 120px 80px", son application et les effets sur la mise en page de la page Web.

Quelles sont les différentes propriétés de la frontière CSS?Quelles sont les différentes propriétés de la frontière CSS?Apr 28, 2025 pm 05:30 PM

L'article traite des propriétés des frontières CSS, en se concentrant sur la personnalisation, les meilleures pratiques et la réactivité. Argument principal: Border-Radius est le plus efficace pour les conceptions réactives.

Quels sont les arrière-plans CSS, énumérez les propriétés?Quels sont les arrière-plans CSS, énumérez les propriétés?Apr 28, 2025 pm 05:29 PM

L'article traite des propriétés de fond CSS, de leurs utilisations dans l'amélioration de la conception du site Web et des erreurs courantes à éviter. L'accent est mis sur la conception réactive en utilisant la taille de l'arrière-plan.

Quelles sont les couleurs CSS HSL?Quelles sont les couleurs CSS HSL?Apr 28, 2025 pm 05:28 PM

L'article traite des couleurs CSS HSL, de leur utilisation dans la conception Web et des avantages par rapport à RVB. L'objectif principal est d'améliorer la conception et l'accessibilité grâce à une manipulation intuitive des couleurs.

Comment pouvons-nous ajouter des commentaires dans CSS?Comment pouvons-nous ajouter des commentaires dans CSS?Apr 28, 2025 pm 05:27 PM

L'article traite de l'utilisation des commentaires dans CSS, détaillant les syntaxes de commentaires à ligne unique et multi-lignes. Il soutient que les commentaires améliorent la lisibilité, la maintenabilité et la collaboration du code, mais peuvent avoir un impact sur les performances du site Web si elles ne sont pas gérées correctement.

Que sont les sélecteurs CSS?Que sont les sélecteurs CSS?Apr 28, 2025 pm 05:26 PM

L'article traite des sélecteurs CSS, de leurs types et de l'utilisation pour le style des éléments HTML. Il compare les sélecteurs ID et classe et aborde les problèmes de performances avec des sélecteurs complexes.

Quel type de CSS détient la priorité la plus élevée?Quel type de CSS détient la priorité la plus élevée?Apr 28, 2025 pm 05:25 PM

L'article traite de la priorité CSS, en se concentrant sur les styles en ligne ayant la plus grande spécificité. Il explique les niveaux de spécificité, les méthodes de remplacement et les outils de débogage pour gérer les conflits CSS.

Quelle est la syntaxe de CSS?Quelle est la syntaxe de CSS?Apr 28, 2025 pm 05:23 PM

L'article traite de la syntaxe CSS, des stratégies d'apprentissage, des erreurs courantes et des outils de validation. L'accent principal est de maîtriser le CSS par la pratique et la compréhension.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Version crackée d'EditPlus en chinois

Version crackée d'EditPlus en chinois

Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Télécharger la version Mac de l'éditeur Atom

Télécharger la version Mac de l'éditeur Atom

L'éditeur open source le plus populaire