Construire une application calculatrice avec React Native and Tailwind CSS

Récemment, j'ai terminé un cours de Réact Native, et ici j'écris sur mon premier projet - une application calculatrice. 😎

J'ai décidé de commencer par de petits projets avant d'entrer dans des applications mobiles complexes. Donc, attendez plus de tutoriels sur la construction d'applications mobiles complexes ou avancées de moi.

Par conséquent, dans ce tutoriel, je vous passerai par la façon de construire une application mobile calculatrice avec React Native and Tailwind CSS.

personnalisation PS: Ce tutoriel suppose que vous avez React Native et un émulateur (ou appareil) installé sur votre ordinateur.

Qu'est-ce que React Native?

React Native est un cadre de React open-source qui vous permet de créer des applications natives pour IOS et Android avec code JavaScript. Bien que dans ce tutoriel, nous allons construire l'application avec Expo.

Expo nous sauve des configurations complexes nécessaires pour créer une application native avec le React Native CLI, ce qui en fait le moyen le plus facile et le plus rapide pour construire et publier des applications React Native.

personnalisation Chers employeurs potentiels! Je cherche activement des opportunités à distance en tant qu'ingénieur de front junior (interne) ou rédacteur technique où je peux prospérer, apprendre et grandir. Voici mon portefeuille et mon CV.

Création de projet

Créer une nouvelle application Expo en exécutant le code snippet ci-dessous.

Ajoutez Nativewind et Tailwind CSS comme dépendances du projet.

personnalisation NativeWind utilise Tailwind CSS comme langue de script, ce qui nous permet d'écrire les mêmes styles avec Tailwind CSS pour les applications natives Android et iOS React.

Run npx tailwindcss init pour créer un tailwind.config.js fichier et mise à jour du tailwind.config.js fichier comme fait ci-dessous.