Création d'une application de blogging à l'aide de React, partie 2: Inscription de l'utilisateur

Ce didacticiel montre la création de fonctionnalités d'inscription d'un blog à l'aide de composants REACT fonctionnels. S'appuyant sur le tutoriel de connexion précédent, cette section se concentre sur la création du formulaire d'inscription et la gestion de l'enregistrement des utilisateurs.

Débutage

Commencez par cloner le référentiel GitHub de la première partie du tutoriel:

git clone https://github.com/tutsplus/create-a-blogging-app-using-react

Accédez au répertoire du projet et installez les dépendances:

cd my-blog
npm install

L'application doit être accessible à http://localhost:5000.

Le serveur (Node.js / Exemple express)

Le code côté serveur gère l'insertion des données utilisateur dans une base de données. La gestion des erreurs est cruciale. Cet exemple utilise une base de données PostgreSQL (ADAPT au besoin pour votre base de données choisie):

app.post('/api/posts/userprofiletodb', (req, res, next) => {
    const values = [req.body.email, req.body.pwd]; // Corrected to use req.body
    pool.query(`INSERT INTO users(username, email, pwd, date_created)
                VALUES(, , , NOW())
                ON CONFLICT DO NOTHING`, values,
            (q_err, q_res) => {
              if(q_err) return next(q_err);
              res.json(q_res.rows);
    });
});

le côté client (react)

En utilisant des composants de réaction fonctionnels et useState, nous gérons l'état du composant.

Capturer les valeurs de forme

Les variables d'état suivent les changements dans les champs de formulaire d'inscription:

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

Ces variables d'état sont liées aux entrées de formulaire:

<input type="email" value="{email}" onchange="{(e)"> setEmail(e.target.value)} />
<input type="password" value="{password}" onchange="{(e)"> setPassword(e.target.value)} />

Les gestionnaires onChange mettent à jour les variables d'état chaque fois que les valeurs d'entrée changent. La validation d'entrée du navigateur natif (comme la vérification du format de messagerie) est utilisée.

Soumission d'inscription de gestion

La fonction handleSubmit envoie les données d'inscription au serveur à l'aide de fetch ou d'une bibliothèque comme Axios (recommandée pour la sécurité et les fonctionnalités):

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const response = await axios.post('/api/posts/userprofiletodb', { email, password });
    // Handle successful signup
  } catch (error) {
    // Handle errors
  }
};

Axios est préféré à l'API Fetch en raison de ses fonctionnalités de sécurité améliorées (par exemple, protection contre le contrefaçon croisée) et de meilleures capacités de gestion des erreurs.

Une démo de travail

Une démo de travail est disponible sur stackblitz (lien fourni dans le texte d'origine).

Conclusion

Ce didacticiel a couvert la mise en œuvre de l'inscription des utilisateurs, y compris la gestion des formulaires, la gestion de l'état côté client, la persistance des données côté serveur et la gestion des erreurs. La partie suivante se concentrera sur l'ajout et l'affichage des articles de blog.

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!