Dans cet article, je te présente rapidement, 10 services qui offrent un hébergement gratuit pour ton application web.

Par exemple. Il peut t'arriver de créer une application avec React qui est la bibliothèque la plus populaire en JavaScript. 

La plupart des développeurs s'empressent pour l'utiliser. 

La communauté React grandit rapidement.

En ce moment, beaucoup d'application sont développée avec Reactjs

Mais le problème ici est le coût d'hébergement de l'application. 

Au fur et à mesure que le nombre d'utilisateurs de l'application augmente, nous devons évoluer en fonction de cela et du coût d'augmentation ! 

Nous allons découvrir 10 hébergeurs web React gratuit qui vont te faciliter la vie.

## 1. Netlify

[Netlify](https://www.netlify.com/) est une plate-forme tout-en-un pour l'automatisation de projets Web modernes. 

Il fournit un déploiement continu à l'aide de GitHub, Bitbucket et Gitlab. J'ai l'utile en ce moment pour cette plateforme.

Reactjs App peut être déployée en 3 étapes. 

Il fournit également un HTTPS automatique gratuit. 

Vous pouvez également ajouter un domaine personnalisé. 

Avec Netlify Edge, vos applications React sont accessibles au client très rapidement.

Outre le déploiement, Netlify fournit également :

- des fonctions sans serveur. 
- des formulaires, des analyses, 
- une CLI, 
- une API, etc. 

La plupart de ces fonctionnalités sont fournies gratuitement avec certaines limitations acceptables.

## 2. Vercel

[Vercel](https://vercel.com/) créateur de Next.js, un framework de réaction moderne. 

Tu peux déployer l'application Reactjs avec une configuration zéro dans Vercel. 

Il augmentera les performances de l'application grâce à son réseau de périphérie mondial.

Vercel fournit un lien d'aperçu pour Pull Request dans Bitbucket, Github et GitLab pour tester la fonctionnalité avant le déploiement.

Vercel fournit également des modèles de démarrage pour créer une nouvelle application et la déployer. 

Il fournit un déploiement continu, des fonctions sans serveur, HTTPS et plus encore.

Si tu dépasses leurs limite, ils vont bloquer ton application !

## 3. AWS S3

Amazon Web Services est le premier fournisseur mondial de services cloud. 

Il fournit presque tous les services cloud et certains services ne sont fournis que par AWS.

[S3](https://aws.amazon.com/s3) est également l'un des services AWS. 

S3 Bucket est connu pour stocker des actifs statiques. L'utilisation la plus courante de S3 est d'enregistrer des images. 

Il fournit également un hébergement de site statique.

Il vous suffit de télécharger les fichiers React Build dans le bucket.

Une fois le téléchargement terminé, tu peux accéder à l'application à l'aide de l'URL du bucket. Vous pouvez également configurer CloudFront pour ajouter un domaine personnalisé et HTTPS.

AWS fournit 12 mois de crédits gratuits sur le nouveau compte. 

Tu peux utiliser ces crédits gratuits pour utiliser S3 ainsi que d'autres services AWS.

## 4. AWS Amplifier

Amazon Web Services fournit également un autre service appelé [Amplify](https://aws.amazon.com/amplify) pour héberger ton application React.

Amplify construira et hébergera ton application React avec un CDN mondial.

Amplify peut être intégré aux services Git pour effectuer le déploiement continu. 

Il fournit également HTTPS, domaine personnalisé, surveillance, protection par mot de passe, aperçus de demande de tirage et plus encore.

Amplify est livré avec 12 mois gratuits. Comme il utilisait Amazon CloudFront CDN, les applications déployées sont plus rapides et mises en cache dans des emplacements périphériques à proximité pour servir très rapidement.

## 5. Microsoft Azure

Microsoft fournit des applications Web statiques [Azure](https://azure.microsoft.com/en-us/) pour héberger ton application React. 

L'application hébergée est servie à partir de points distribués dans le monde pour offrir de meilleures performances.

Azure fournit HTTPS gratuit, des domaines personnalisés, la gestion des versions, l'intégration Git et plus encore.

Azure a un plan gratuit avec ces services. Il fournit un déploiement continu à l'aide de l'intégration Git.

## 6. Pages GitHub

[GitHub Pages](https://pages.github.com/) est un service de GitHub, la plate-forme de développement la plus grande et la plus avancée au monde.

Tu peux directement héberger ton application Reactjs à partir du référentiel GitHub. 

Il te suffit d'apporter tes modifications et de pousser pour dynamiser ton application React.

Les pages GitHub fournissent un HTTPS gratuit et un domaine personnalisé. 

Tu peux configurer les pages GitHub en quelques étapes simples.

## 7. Stockage Google Cloud

Google Cloud fournit un [bucket Cloud Storage](https://cloud.google.com/storage/docs/hosting-static-website?skip_cache=true) pour héberger des sites statiques. 

Tout ce dont tu as besoin pour créer un bucket, télécharger le code et le rendre public.

 Ton application ReactJS est maintenant déployée.

Cloud Storage Bucket ne fournit ni HTTPS ni domaine personnalisé. 

Tu peux le configurer avec le service d'équilibrage de charge HTTPS.

Cloud Storage Bucket propose un forfait gratuit avec des limites mensuelles. Google fournit également 300 $ de crédits gratuits pour le nouveau compte.

## 8. Render

[Render](https://render.com/) est un fournisseur de services cloud, fournit des services pour les sites statiques et dynamiques. 

Tu peux héberger ton application React en trois étapes simples.

Render fournit SSL gratuit, CDN global, domaine personnalisé, déploiement automatique avec intégration Git.

Render fournit un plan gratuit pour héberger un site statique et des prix compétitifs pour d'autres services également.

## 9. Surge

[Surge](https://surge.sh/) est une plate-forme d'hébergement de sites Web statiques. 

Tu peux déployer à l'aide de l'interface de ligne de commande de surtension.

Surge ne fournit aucune console Web pour héberger les pages Web. Tu peux héberger ton application Javascript Exemple React à partir de ton CLI.

Vous pouvez l'héberger en quelques étapes à l'aide de l'interface de ligne de commande de surtension. Il fournit SSL gratuit, configuration de domaine personnalisée.

L'hébergement en surtension peut nécessiter certaines compétences en CLI.

## 10. Héroku

[Heroku](https://www.heroku.com/home) est une plate-forme cloud en tant que service basé sur des conteneurs. Heroku fournit principalement tous les services cloud comme AWS. Il a un plan gratuit pour la plupart des services.

Vous pouvez déployer ton application React à l'aide de Heroku Buildpack pour create-react-app. En utilisant Heroku CLI, vous pouvez déployer l'application React avec quelques commandes. Le Buildpack est utilisé pour le déploiement automatique et un Bundler intégré pour rendre le déploiement moins compliqué.

Heroku fournit SSL gratuit, domaine personnalisé et intégration Git.

## Conclusion

Je n'ai pas tout dit, j'ai donné juste 10 qui peuvent te permettre de très bien héberger ton application web reactjs.

Ils existent plusieurs autres dont je n'ai pas encore testé.

J'espère que tu as trouvé au moins un ou deux hébergeurs qui vont te permettre d'héberger ton application Reactjs gratuitement.

Si tu souhaites héberger ton site web gratuitement, tu vas découvrir 10 hébergeurs web gratuit pour tes applications et site web.

10 Hébergeurs Web Gratuits Pour Les Applications Et Site Web JavaScript

Tu peux déjà noter qu'il existe deux grands types de langages orientés objet : 

- ceux basés sur les classes,
- et ceux basés sur les prototypes.

Le JavaScript est un langage orienté objet basé sur la notion de prototypes, mais la plupart des langages supportant l’orienté objet sont basés sur les classes.

Les classes ont été introduites dans JavaScript ECMA2015. 

Contrairement aux classes en mode orienté objet, les classes JavaScript ne sont que des types spéciaux de fonctions. 

Mais au lieu d'utiliser le mot-clé "function", nous utilisons la "class". 

Il a été introduit dans JavaScript pour que la syntaxe ressemble à d'autres langages orientés objet (java, python, c++).


### Comment créer ou définir une classe ?

Voici le code :

```javascript
class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}
```

Pour déclarer une classe, tu vas utiliser le mot-clé class avec le nom de la classe ( **`Rectangle`**ici).

**`Constructor`**: Il s'agit d'une méthode spéciale pour initialiser une instance de cette classe. 

Cela signifie donc que chaque fois que nous créons une nouvelle instance de la classe, elle invoquera le constructeur.

## Comment ajouter des méthodes dans une classe ?

```javascript
class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    // Méthode prototype
    area() {
      return console.log(`Resultat : ${this.height*this.width}`);
    }
    // Méthod statique
    static display(rect){
        return console.log(`Height: ${rect.height} Width: ${rect.width}`);
    }
}
rectangle = new Rectangle(7, 4);  // instantiation de la classe 
rectangle.area(); // Resulta : 28
Rectangle.display(rectangle1);// Height: 7 Width: 4
```

- Méthode prototype : **`area()`** est une méthode prototype.
    
- Méthode statique : **`display()`** est une méthode statique.
    

### Méthode de prototype

Une méthode prototype est une méthode accessible uniquement lorsque tu le crées avec une instance de la classe. 

Comme peux le voir dans l'exemple ci-dessus, tu peux voir la méthode prototype  en te référant au nom de la méthode de l'objet suivi de parenthèses (tous les paramètres iraient à l'intérieur des parenthèses).

### Méthode statique

Une méthode statique est quelque chose que vous pouvez appeler sans instancier la classe. 

Les méthodes statiques sont définies sur la classe elle-même et non sur l'objet. 

Cela signifie que tu ne peux pas appeler la méthode statique sur l'objet ( **rectangle1** ), mais sur la classe (Rectangle) comme indiqué dans le code.

## Comment faire **Héritage** en Javascript ?

Comme son nom l'indique, il s'agit de s'approprier les fonctionnalités d'une classe mère.

```javascript 
class Car {
    constructor(brand) {
        this.carname = brand;
    }
    present() {
      return 'Je possede  ' + this.carname;
   }
}

class Model extends Car {
    constructor(brand, mod) {
        super(brand);
        this.model = mod;
    }
    show() {
        return console.log(`${this.present()} , Est un  ${this.model}`);
    }
}
mycar = new Model("Ford", "Mustang");
mycar.show();// J'ai un Ford, Est un Mustang

```

Pour créer un héritage de classe, tu peux utiliser le **`extends`** mot-clé.

Une classe créée avec un héritage de classe, hérite de toutes les méthodes d'une autre classe. 

Dans l'exemple ci-dessus, la classe Model hérite de toute la méthode de la classe Car.

La **`super()`**méthode fait référence à la classe parente. 

En appelant la **`super()`**méthode dans la méthode "constructeur", nous appelons la méthode "constructeur" du parent et obtenons l'accès aux propriétés et à la méthode du parent. L'héritage est utile pour la réutilisation du code, nous pouvons réutiliser les propriétés et la méthode d'une classe existante lorsque vous créez une nouvelle classe.

## Code d'exemple d'utilisation des classes en javascript 

Exemple 1 :

```javascript
class Animal {
  constructor(nom) {
    this.nom = nom;
  }

  parle() {
    console.log(`${this.nom} fait du bruit.`);
  }
}

class Chien extends Animal {
  constructor(nom) {
    super(nom); // appelle le constructeur parent avec le paramètre
  }
  parle() {
    console.log(`${this.nom} aboie.`);
  }
}
```
Exemple 2 :

```javascript
class Chat {
  constructor(nom) {
    this.nom = nom;
  }

  parler() {
    console.log(`${this.nom} fait du bruit.`);
  }
}

class Lion extends Chat {
  parler() {
    super.parler();
    console.log(`${this.nom} rugit.`);
  }
}
```
## Conclusion

Nous avons utilisé le mot clé :

- class : pour déclarer une classe avec un 'constructor' pour définir les propriétés par defaut de la classe
-  extends : pour hériter d'une autre classe et y accéder dans notre classe avec la méthode super
- nous avons aussi vu qu'il y a des méthodes dans une classe, ces méthodes peuvent être static ou prototype.

Grace au code d'exemple, tu peux continuer à t'entrainer.

Classes en JavaScript | Guide court, mais intelligent sur les classes en JavaScript. Comprendre le fonctionnement des classes en JavaScript

Comprendre le JavaScript: comment fonctionnent les Classes ?

Une belle liste de minitutoriels HTML, CSS et JavaScript avec des concepts de base pour une utilisation quotidienne.

Tutoriel HTML, CSS et JavaScript : Apprendre avec des astuces rapides

> Flash info: la nouvelle version de ce site web utilise nextjs, une preuve que **nextjs** peut être déployé en production facilement. 

Revenons sur comment créer facilement et rapidement une application web avec nextjs ?

Nextjs est parmi les technologies qui t'offrent la possibilité de créer un site web hyper rapide en termes de performance.

Dans cet article, je te présente rapidement et je te montre comment créer ta première application web avec nextjs. 

Avec next js, c'est possible :

- de créer un blog.
- de créer un site web vitrine.
- de créer une plateforme d'e-commerce.
- ou d'autre application innovante.

Go go go !!

## Qu'est-ce que next js ?

C'est tout simplement un framework Reactjs qui t'offre la meilleure expérience de développeur avec toutes les fonctionnalités dont tu as besoin pour la production : 

- rendu hybride statique et serveur.
- prise en charge de TypeScript.
- regroupement intelligent.
- pré-lecture de route.
- etc. 

Aucune configuration nécessaire.

## Pourquoi créer des applications web avec nextjs

Pour créer une application Web complète avec React à partir de zéro, tu dois prendre en compte de nombreux détails importants :

Le code doit être regroupé à l'aide d'un bundler comme webpack et transformé à l'aide d'un compilateur comme Babel.

Tu auras besoin d'effectuer des optimisations de production telles que le fractionnement de code.

Tu veux peut-être pré-rendu statiquement certaines pages pour les performances et le référencement. 

Tu peux également utiliser le rendu côté serveur ou le rendu côté client.

Tu veux peut-être écrire du code côté serveur pour connecter ton application React à une base de données.

Un framework(cadre ou ensemble d'outils) peut résoudre ces problèmes. 

Mais un tel framework doit avoir le bon niveau d'abstraction, sinon il ne sera pas très utile. 

Il doit également te garantir une excellente « expérience de développeur », t'assurant, à toi et à ton équipe, une expérience incroyable lors de l'écriture de code.

- Une architecture du code simple
- Un code lisible et simple à écrire
- Une documentation pratique

## Next.js : le framework React

Next.js fournit une solution à tous les problèmes ci-dessus. 

Mais plus important encore, cela te place, toi et ton équipe, sur la route du succès lors de la création d'applications web React.

Next.js vise à offrir une expérience de développeur de premier ordre et de nombreuses fonctionnalités intégrées, telles que :

- Un système de routage intuitif basé sur des pages (avec prise en charge des routes dynamiques)
- Pré-rendu, la génération statique (SSG) et le rendu côté serveur (SSR) sont pris en charge par page
- Fractionnement automatique du code pour des chargements de page plus rapides
- Routage côté client avec pré-lecture optimisée
- Prise en charge CSS et Sass intégrée et prise en charge de toute bibliothèque CSS-in-JS
- Environnement de développement avec Refresh rapide support
- Routes d'API pour créer des points de terminaison d'API avec des fonctions sans serveur (serverless).
- Entièrement extensible

Next.js est utilisé dans des dizaines de milliers de sites Web et d'applications Web destinés à la production, y compris bon nombre des plus grandes marques au monde.


## C'est qu'il faut installer pour débuter avec nextjs

Tout d'abord, assurons-nous que ton environnement de développement est prêt.

> Si Node.js n'est pas installé, tu peux lire cet article sur [comment installer nodejs rapidement ?](https://www.trakode.com/blog/installer-gerer-nodejs).

Tu auras besoin de Node.js version 10.13 ou ultérieure.

> Encore une fois, si tu n'as pas les bons outils pour écrire du code je t'invite à lire rapidement cet article qui contient [quelques outils du développeur web](https://www.trakode.com/blog/les-7-outils-les-plus-rapides-et-efficaces-dans-la-programmation).

Je préfère que tu utilises ton propre éditeur de code et ta propre application de terminal. 

Si tu utilises Windows, je te recommande d'avoir [un terminal pour Windows](https://www.trakode.com/blog/quel-terminal-installer-sur-windows) et d'utiliser Git Bash qui vient avec Git, qui prend en charge les commandes spécifiques à UNIX de ce didacticiel. 

Le sous-système Windows pour Linux (WSL) est une autre option.

## Comment créer une application web Next.js

Pour créer une application Next.js : 

- ouvrir son terminal 
- cd <nom_du_repetoire> dans lequel tu veux créer ton application
- exécute cette commande pour récupérer un projet de démarrage.

```bash
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
```

Sous le capot, cela utilise l'outil appelé create-next-app, qui fournit une application Next.js pour toi. Il utilise ce modèle via le drapeau --example.

## Comment Exécuter une application Nextjs

Tu as maintenant un nouveau répertoire appelé nextjs-blog, allons voir l'intérieur :

```bash
  cd nextjs-blog
```

Ensuite, exécute la commande suivante :

```bash
  npm run dev
```

Cela démarre le "serveur de développement" de ton application Next.js sur le port 3000.

Pour vérifier si cela fonctionne :

- Ouvre ton navigateur 
- Écris cette adresse `http://localhost:3000` depuis ton navigateur
- Go !

>C'est super ! Tu viens de créer ta première application nextjs

## Qu'est-ce qu'un projet Nextjs

Dans ton répertoire, tu vas retrouver des dossiers et fichier qui constituent la structure de base de ton projet web nextjs.

Dans le fichier `package.json` tu trouveras :

```json
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}
```
Ces scripts font référence aux différentes étapes de développement d'une application :

- dev: Exécute next devqui démarre Next.js en mode développement
- build: Exécute next build qui construit l'application pour une utilisation en production
- start: Exécute next start qui démarre un serveur de production Next.js
- lint: Exécute next lint qui configure la configuration ESLint intégrée de Next.js

Next.js est construit autour du concept de pages, c'est pourquoi il y a un dossier page qui contiendras toutes les pages de ton application web.

Une page est un React composant exporté d'un `.js, .jsx, .ts ou .tsx` fichier dans les pages répertoire.

Les pages sont associées à un itinéraire en fonction de leur nom de fichier. 

Par exemple, tu peux créer : 

-  `pages/about.js` est mappé sur /about. 
- `pages/cgu.js` est mappé sur /cgu. 
- `pages/contact.js` est mappé sur /contact. 

Tu peux même ajouter des paramètres de routes dynamiques avec le nom de fichier.

-  `pages/article/[slug]` est mappé sur /article/<mon-article-slug>. 
-  `pages/athor/[username]` est mappé sur /author/<mon-username>. 

## Conclusion

Nous avons vu rapidement comment créer une application web reactjs basée sur nextjs.

Nous avons vu à quel point, c'est simple, il suffit d'avoir :

- un bon éditeur de code
- un terminal Linux, c'est possible d'en avoir même sur Windows
- et d'installer Node.js.

La construction d'une application nextjs prend moins de temps.

En une seule commande, tu as une application web fonctionnelle.

Tu peux modifier ton application web en respectant la philosophie derrière le framework qui centré sur les pages.


Découvrir rapidement comment créer facilement une application web avec NextJs. Nextjs utilise la puissance de React JS pour créer les applications web.

Comment Créer Rapidement Une application Web Avec NextJs

Dans cet article, je vais répondre rapidement à 18 questions les plus fréquemment posées lorsqu'il s'agit d'utiliser Git en équipe.

C'est aussi applicable pour un cas d'utilisation personnel.

Répondre à certaines questions peut parfois être difficile même pour un développeur expérimenté. 

Par exemple, comment faire pour modifier le message d'un commit ?

Très souvent, il est courant de vouloir revenir en arrière ou annuler une modification.

Tu peux le faire avec presque toutes les activités dans Git, telles que : 

- Les validations,
- Les fusions,
- Les modifications locales ou distantes
- Et même les modifications non validées.

Tu es libre de tout modifier et supprimer.

> Si tu n'a pas encore lu les bases, je t'invite à lire cet article rapidement avant de cotinuer :[ apprendre à gérer le code source avec git et github](https://www.trakode.com/blog/tutoriel-git-github-comment-gerer-le-code-source)

## 1. Comment créer une branche Git ?

Avant de commencer à créer une nouvelle branche, assure-toi que ta branche master/main est mis à jour avec les dernières modifications :

```bash
 $ git pull
```

Après l'étape ci-dessus, tu peux créer ta nouvelle branche et y basculer directement :

```bash
 $ git checkout -b mabranche
```

Ou, tu peux simplement créer la nouvelle branche sans y basculer :

```bash
 $ git branch mabranche
```

Si tu souhaites basculer  vers ta nouvelle branche après l'avoir créée, utilise simplement :

```bash
 $ git checkout mabranche
```

Maintenant que la branche est créée, tu peux  la pousser(l'envoyer) sur GitHub :

```bash
 $ git push origin mabranche
```

## 2. Comment renommer une branche Git ?

Afin de renommer une branche Git, une option serait d'abord d'y basculer et de suivre l'étape ci-dessous :

```bash
 $ git checkout mabranche
```

Ensuite, tu vas voir un message qui confirme que le commutateur(changement de branche) a réussi :

Tu peux maintenant renommer la branche avec cette commande :

```bash
 $ git branch -m mabranchedev
```

Une autre façon de renommer une branche Git consiste à n'utiliser qu'une seule ligne, en spécifiant à la fois l'ancien et le nouveau nom :

```bash
 $ git branch -m mabranche mabranchedev
```

Une fois que tu as fini de renommer une branche Git, il est recommandé de vérifier son statut :

```bash
 $ git branch -a
```

## 3. Comment supprimer une branche Git locale ?

Lorsque les développeurs travaillent sur différentes fonctionnalités, ils créent souvent d'autres branches, séparées de la principale avec le code principal.

Une fois le travail sur une fonctionnalité terminé, il est souvent recommandé de supprimer la branche.

Comme Git ne te permet pas de supprimer la branche en cours d'utilisation, tu peux d'abord basculer vers une autre branche, et après cela, tu peux supprimer la branche que tu souhaites :

```bash
 $ git checkout main 
 $ git branch -d mabranchedev
```

Si la branche n'a pas été poussée ou fusionnée, tu peux forcer la suppression de la branche en utilisant `-D` au lieu de `-d.`

## 4. Comment supprimer une branche Git distante ?

Pour supprimer une branche à distance, tu dois utiliser la commande suivante :

```bash
 $ git push <remote-name> --delete <branch-name>
```

## 5. Comment Git checkout la branche distante ?

Lorsque tu travailles en équipe, tu peux utiliser des référentiels distants pouvant être hébergés ou sur la copie locale d'un collègue. 

Chacun des référentiels distants contient ses propres branches. 

Pour basculer vers une branche distante, il est nécessaire de récupérer le contenu de la branche et y basculer ensuite :

```bash
 $ git fetch --all
 $ git checkout <remote-branch-name>
```

## 6. Comment éditer (modifier) un message de commit Git ?

Pour une raison quelconque, dans certains cas, tu souhaites modifier ton message de validation. 

Tout d'abord, tu dois savoir que la modification de ton message de commit se traduit par la création d'un nouveau commit et le remplacement de l'ancien.

*Si tu n'as pas encore poussé ton commit sur GitHub, et que cela n'existe que dans ton référentiel local, voici un moyen simple de changer le message de ton dernier commit. *

Accéde au référentiel qui contient ton dernier commit dans la ligne de commande et tu écris :

```bash
 $ git commit --amend
```

Ensuite, tu dois éditer le message de commit et enregistrer ton nouveau commit. 

La prochaine fois que tu pousses, tu dois pouvoir voir ton nouveau commit et message sur GitHub.

Comme tu êtes peut-être déjà trouvé dans la situation où tu as déjà poussé le commit vers GitHub, ne t'inquiétes pas, il existe toujours un moyen de modifier ton message de commit le plus récent. 

Pour ce faire, tu dois forcer un commit avec un message modifié. 

***Attention ; ceci n'est pas recommandé car cela modifie l'historique de ton référentiel, utilise donc cette option uniquement lorsque cela est absolument nécessaire.***

Tout d'abord, suis les étapes cité, puis tu écris :

```bash
 $ git push --force-with-lease <branch-name>
```

## 7. Comment annuler le dernier commit ?

Tu as accidentellement validé les mauvais fichiers dans Git, mais tu n'as pas encore poussé la validation dans ton référentiel Git. 

Comme tu n'as pas encore poussé vers un référentiel distant, tes modifications ne sont pas publiques. 

À ce stade, tu peux annuler tes modifications. 

Le moyen le plus simple d'annuler le dernier commit Git est d'exécuter la commande `$ git reset` avec l'option « –soft » qui conservera les modifications apportées à tes fichiers. 

tu dois juste spécifier le commit à annuler qui est "HEAD~1" dans ce cas.

```bash
 $ git reset --soft HEAD-1
```

Si tu souhaites supprimer le dernier commit, tu peux exécuter la `$ git reset` commande avec l'option "-hard".

 Les modifications seront supprimées du répertoire de travail et de l'index, *tu vas perdre toutes les modifications* .

```bash
 $ git reset --hard HEAD-1
```

***Remarque : Si tu n'êtes pas familier avec cette notation, « HEAD~1 » signifie que tu souhaites réinitialiser le HEAD (le dernier commit) à un commit avant dans l'historique du journal.***

```bash
 $ git log --oneline
```

## 8. Comment git revert ou revenir au commit précédent ?

Il est nécessaire de voir la liste des commits afin d'avoir l'identifiant du commit, à l'aide de la commande git log :

```bash
 $ git log --online
```

Si tu souhaites revenir temporairement au commit précédent puis revenir là où tu étais, il te suffit de vérifier le commit souhaité :

```bash
 $ git checkout <0c2a9da42>
```

Ou, si tu veux faire des commits pendant que tu y es, vas-y et crée une nouvelle branche pendant que tu y es :

```bash
 $ git checkout -b old-state <0c2a9da42>
```

D'un autre côté, si tu veux vraiment te débarrasser de tout ce que tu avais dejà fait depuis, mais que tu n'avais poussé aucun de ces commits, il y a une possibilité. 

Tout ce que tu as à faire est simplement de réinitialiser :

```bash
 $ git reset --hard <0c2a9da42>
```

Si tu as poussé les commits, il existe toujours un moyen de t'en débarrasser. 

Je t'en parle dans la prochaine question.

## 9. Comment annuler un commit qui a été poussé vers la télécommande ?

Si tu as déjà poussé ta chaîne de commits vers le référentiel distant, un *revert ou retour* est un moyen plus agréable d'annuler les modifications. 

La commande revert ajoute un nouveau commit à la fin de la chaîne.

```bash
 $ git revert <0a2b9da42...>
```

## 10. Comment Git restaurer un seul fichier ?

tu as effectué plusieurs modifications sur un fichier et les as validées. 

tu veux maintenant revenir à une version de fichier précédente. 

tu peux effectuer les opérations suivantes pour rétablir un seul fichier à son état précédent.

Si le fichier n'est pas validé, tu peux utiliser :

```bash
 $ git checkout <filename>
```

Si le fichier est déjà validé, tu dois trouver le hachage du commit et le chemin d'accès à ton fichier et exécuter cette commande dans le terminal :

```bash
 $ git checkout <commit-hash> -- <path/to/file>
 // e.g.
 $ git checkout <0b2a9dc42...> -- assets/main.css
```
Tu peux voir très facilement les commits qui ont apporté des modifications au(x) fichier(s) donné(s), et tu peux obtenir le hachage de commit correct en exécutant la commande suivante :

```bash
 $ git log path/to/file
```

## 11. Comment annuler l'ajout de Git ?

tu as déplacé plusieurs fichiers dans la zone de transit avec la commande `$ git add`, mais tu ne veux plus faire partie d'un commit, alors une simple réinitialisation fera l'affaire :

```bash
 // for all files
 $ git reset  // OR
 $ git reset HEAD // OR
 $ git reset
```

Si tu souhaites désinstaller un seul fichier, tu peux utiliser :

```base
 // for single file
 $ git reset <filename> // OR
 $ git reset HEAD <filename> // OR
 $ git reset @ <filename>
```

Les modifications que tu as apportées seront toujours dans le(s) fichier(s). 

L'ensemble de commandes ci-dessus supprime simplement ce ou ces fichiers de ta zone de transit. 

La `$ git reset`commande te permet de *réinitialiser* la Head actuelle à un état spécifique. 

Tu peux réinitialiser l'état de fichiers spécifiques ainsi que d'une branche entière.

***Remarque : *HEAD* est une référence au commit actuel. *@* seul est un raccourci pour la tête depuis Git v1.8.5***

## 12. Comment supprimer un fichier de Git sans le supprimer de ton système de fichiers ?

tu as validé le mauvais fichier sur Git, ou tu as oublié d'ajouter un fichier à .gitignore et tu l'as validé. 

Maintenant, tu veux supprimer le fichier de git mais tu ne veux pas le supprimer de ton environnement de développement local.

Supprimer un seul fichier avec Git sans le supprimer :

```bash
 $ git rm --cached <filename>
```

Supprimer plusieurs fichiers avec Git sans les supprimer

```bash
 $ git rm --cached <filename1 filename2 filename3>

```

Supprimer un seul répertoire avec Git sans le supprimer :

```bash
 $ git rm --cached <directory-name>
```

- `-cached$ git push`
    
supprimera uniquement l'index mais ne tu permettra pas de supprimer le fichier sur le système local. 

Les fichiers seront supprimés du référentiel distant lors de l'exécution.
    

## 13. Git Pull contre Git Fetch

Git pull et fetch sont deux commandes couramment utilisées, il sera donc utile de connaître la différence entre elles.

Supposons que tu travailles sur un référentiel clone, qui est essentiellement un doublon d'un autre référentiel. 

Dans ce cas, il est important de le tenir à jour avec les dernières modifications qui auraient pu être appliquées à l'original. 

Pour ce faire et apporter ces modifications localement, tu as utiliser les commandes ci-dessus.

```bash
 $ git fetch
```

C'est la commande qui te permet de télécharger un objet à partir d'un autre référentiel mais elle n'effectuera aucun transfert de fichier, ce qui signifie qu'elle n'apportera aucune modification localement. 

Fondamentalement, il s'agit simplement de vérifier si des modifications sont disponibles.

```bash
 $ git pull

```

C'est la commande qui apportera ces modifications depuis le référentiel distant et qui les intégrera à ta branche locale. 

En d'autres termes, git pull fait la même chose que git fetch, sauf qu'il est suivi d'une ou plusieurs actions supplémentaires :

```bash
 $ git merge
```

## 14. Comment forcer « git pull » à écraser les fichiers locaux ?

Si tu souhaites tout écraser avec une copie de la branche distante, tu dois savoir que tu supprimes toutes vos modifications locales.

Si tu as des commits locaux que tu n'as pas encore poussés, ceux-ci seront également perdus.

Pour écraser/réinitialiser vos fichiers locaux, Voici les étapes à suivre :

```bash
 $ git fetch --all
 $ git reset --hard origin/<branch-name>
```

## 15. Comment pousser vers GitHub lors de la réception de l'erreur « besoin de fusion » ?

Si tu n'as pas exécuté $ git pull avant d'essayer de transmettre vos modifications à la branche, tu obtiens une erreur de fusion. 

Lorsque tu as cette erreur, cela signifie généralement que quelqu'un d'autre a poussé un commit vers la même branche que tu as essayé de pousser, mais tu ne l'avais pas encore localement.

Pour résoudre le problème, tu peux exécuter le code ci-dessous :

```bash
 $ git pull origin <branch-name>
 $ git push origin <branch-name>
```

Si tu veux faire une poussée forcée, c'est-à-dire que tu ne veux pas fusionner ta branche locale avec la branche distante, tu peux utiliser la syntaxe ci-dessous :

```bash
 $ git push -f origin <branch-name>
```

## 16. Comment créer une balise dans le référentiel GitHub ?

Git prend en charge deux types de balises : 

*légères* et *annotées* .

Une balise *légère* ressemble beaucoup à une branche qui ne change pas, c'est juste un pointeur vers un commit spécifique.

*Les* balises *annotées* , cependant, sont stockées en tant qu'objets complets dans la base de données Git. 

Ils font l'objet d'une somme de contrôle ; contenir le nom, l'e-mail et la date du tagueur ; avoir un message de marquage. 

Il est généralement recommandé de créer des balises annotées.

Crée une balise légère :

```bash
 $ git tag <tagname> // e.g $ git tag v1.0.0
```

Balise annotée créée ( *recommandé* ) :

```bash
 $ git tag -a <tagname> // e.g $ git tag -a v1.0.0
 // or create tag with message
 $ git tag -a <tagname> -m "tag description" // e.g $ git tag -a v1.0.0 -m "First release"
```

Lorsque tu transféres vers ton référentiel distant, les balises ne sont PAS incluses par défaut. 

Tu dois dire explicitement que tu souhaites transmettre tes balises à ton référentiel distant.

Pousser toutes les balises créee localement :

```bash
 $ git push origin --tags
```

Pousser une seule balise :

```bash
 $ git push origin <tagname>
```

Pour répertorier toutes les balises, Tu vas utiliser la commande suivante :

```bash
 $ git tag
```

## 17. Comment cloner toutes les branches distantes dans Git ?

Tu peux utiliser la **commande git clone** sur ton Git local. 

Il clonera l'ensemble du référentiel sur ton système, puis changera ton répertoire de travail actuel dans le dossier du référentiel cloné.

```bash
 $ git clone https://github.com/cristhos/mwanzo.git
 $ cd mwanzo
```

Si tu as plusieurs branches distantes que tu souhaites récupérer en même temps, Fais ceci :

```bash
 $ git pull --all
```

Ensuite, regarde les branches locales dans ton référentiel :

```bash
 $ git branch
 * main
```

Mais il y a d'autres branches qui se cachent dans ton référentiel ! tu peux les voir en utilisant l'indicateur -a :

```bash
 $ git branch -a
 * main
   remotes/origin/HEAD
   remotes/origin/main
   remotes/origin/another-branch
```

Si tu souhaites simplement jeter un coup d'œil rapide à une branche en amont, tu peux la consulter directement :

```bash
 $ git checkout origin/another-branch
```

Mais si tu veux travailler sur cette branche, tu dois créer une branche de suivi locale qui se fait automatiquement par :

```bash
 $ git checkout another-branch
```

## 18. Comment mettre à jour ou synchroniser un référentiel forké ?

Tu as réussi à bifurquer ton référentiel intéressé. 

Tu dois le maintenir à jour avec le référentiel d'origine. 

Le référentiel d'origine est communément appelé en amont.

Ouvre ton terminal et accéde à ton référentiel cloné sur l'ordinateur local. 

Ton référentiel local n'est pas directement lié au référentiel d'origine. 

Tu dois configurer une télécommande qui pointe vers le référentiel en amont dans Git.

```bash
 $ git remote -v // list all remote
 $ git remote add upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git
 $ git remote -v // verify the new upstream repository
```

Il y a deux étapes nécessaires pour synchroniser ton référentiel avec l'amont : 

- d'abord, tu dois récupérer à partir de la télécommande, 
- puis tu dois fusionner la branche souhaitée dans ta branche locale.

```bash
 $ git fetch upstream
 $ git checkout main
 $ git merge upstream/main
```

Après la configuration initiale en amont et la vérification principale, il te suffit d'exécuter la commande suivante pour synchroniser ton main avec l'amont :

```bash
 $ git pull upstream main
```

## Conclusion

C'était les questions le plus fréquent des développeurs qui utilisent git. 

Peut-être que tu te retrouves dans un cadre qui oblige à avoir des réponses précises à tes questions. 
Si tu veux  faire des manipulations un peu plus poussées. 

Moi aussi, j'ai parfois besoin de réponse rapides

J'espère que tu vas trouver la réponse de ton cas d'utilisation de Git. 

Si tu rencontres un problème dans Git qui ne figure pas sur notre liste, partage-le avec nous dans la section commentaires ci-dessous.

Découvrir comment résoudre rapidement les problèmes le plus fréquemment rencontrés avec Git. Avoir des réponses à certaines questions peut parfois vous aider à développer plus rapidement.

Tutoriel des commandes Git : Comment corriger 18 erreurs courantes ?

Le langage JavaScript propose de nombreuses bibliothèques JS qui ont créé un écosystème dans lequel les codeurs ne sont pas censés écrire du code à partir de zéro.

30 bibliothèques JavaScript à utiliser dans vos projets

Dans cet article, je vais te présenter rapidement quelques applications qui vont te permettre d'utiliser un terminal sur Windows.

Parmi les outils recommandé pour bien développer une application web, il y a un outil qui revient souvent. C'est le terminal !

Tu en auras besoin pour installer :

* des outils ;
* des plateformes ;
* des frameworks ;
* des librairies.

Sur Linux, il y a déjà un terminal, quels sont les logiciels du type terminal pouvons-nous avoir sur Windows ?

## Qu'est-ce qu'un terminal ?

Selon [le journal du net](https://www.journaldunet.fr/web-tech/dictionnaire-du-webmastering/1445272-shell-en-informatique-definition-simple-role-et-exemples/#:~:text=Un%20terminal%20est%20un%20programme,commandes%20situ%C3%A9es%20dans%20un%20fichier.), Un **terminal est** un **programme qui** permet à l'utilisateur d'interagir avec le shell. 

Tu peux aussi retenir qu'un terminal est une **application** permettant de **dialoguer** avec son ordinateur via l’écriture de **lignes de commande**.

## Qu'est-ce qu'une ligne de commande ?

Considère une ligne de commande comme une instruction écrite préconfiguré, qui une fois envoyée à l’ordinateur via le terminal, va effectuer une action pour toi. 

Exemple :

* Créer un répertoire.
* Télécharger un programme.

intaller

* Installer un programme.
* Et autres.

## Quel terminal installer sur Windows ?

Travailler avec un terminal, c'est la meilleure façon de développer une application web.

Il y en a beaucoup, mais je vais te présenter une petite liste.

Dans cette petite liste, tu vas sûrement trouver les meilleurs logiciels.

Ces logiciels vont te permettre d'installer un terminal sur Windows.

### 1. Cmder

[Cmder](https://cmder.net/) est un émulateur de console portable qui s'appuie sur le déjà populaire Conemu ; 

[Conemu](https://conemu.github.io/) vaut également le détour car il sert d'alternative à Cmder. 

Le site Web de Cmder l'explique parfaitement :

Pense à cmder plus comme un progiciel que comme une application distincte. 

Toute la magie passe par ConEmu. 

Avec les améliorations de Clink.

Bien que Cmder ait parfois des problèmes de vitesse (même s'il est conseillé comme portable).

Il reste un excellent émulateur de console de base à utiliser pour atteindre tes objectifs.

### 2. Hyper.is

Hyper est un terminal élégant qui peut être utilisé à la fois sur PC et MAC.

Il est entièrement personnalisable en termes de thèmes, de plugins et de shell. 

Quoi qu'il en soit, c'est un excellent terminal extensible à examiner. 

### 3. Terminus

«Un terminal pour l'ère moderne» est le slogan du terminal terminus. 

Ce terminal semble similaire à un environnement de développement, il est livré avec des volets séparés, des raccourcis entièrement configurables, des onglets et la prise en charge de tous les principaux shells. 

Ce terminal est encore nouveau et il sera passionnant de voir la suite.

### 4. Terminal Fluent

Un terminal pour PowerShell, CMD, WSL ou des shells personnalisés, des fonctionnalités prenant même des thèmes d'iTerm avec des raccourcis clavier modifiables et des paramètres rapidement ajustables, Fluent vaut vraiment le détour.

### 5. Alacritty

Celui-ci est un peu controversé. 

Alacritty a prétendu être «l'émulateur de terminal le plus rapide qui existe». 

Bien que cela puisse ne pas être tout à fait vrai, de nombreux utilisateurs ont signalé des vitesses rapides et des vitesses d'utilisation faibles en utilisant Alacritty. 

Donc, même si cela ne convient pas à tout le monde, il peut peut-être résoudre certains problèmes de retard / déchirement que vous avez rencontrés avec vos terminaux.

## Conclusion

Pour mieux développer une application web, tu auras besoin d'installer  ou d'utiliser des outils de base.

Sur Windows, tu auras aussi besoin d'un terminal.

Le terminal va sûrement te :

* faciliter l'installation d'un nouveau projet web
* faciliter l'ajout de dépendances à ton projet web
* faciliter la gestion de ton code en utilisant un outils de versionnage
* le déploiement de ton projet sur web en utilisant des outils de déploiement en ligne de commande.
* et plein d'autres

Sur Windows, pour évoluer vite dans la création de ton application web, je te recommande d'utiliser un terminal.

Décourvir quel terminal installer sur windows pour faciliter le déveveloppement d'une application web

Quel terminal installer rapidement sur Windows ?

Dans cet article, Je vais te partager rapidement, 10 plateformes facilitatrices dans la construction des applications web NodeJs.

Peut-être que tu as envie de créer une application web Node.js rapidement.

* Une application Web Nodejs pour ton client.
* Une application Web Nodejs pour concrétiser ton projet personnel
* Une application Web Nodejs pour ton travail de fin de cycle ou  ton mémoire
* Enfin bref, Une application web pour résoudre un problème qui te tient à cœur.

Ces 10 plateformes vont faciliter la construction de ton application web NodeJs.

Pour bien utiliser ces 10 plateformes, il est recommandé d'avoir une connaissance minimum en JavaScript.

Si c'est pas encore le cas, tu peux lire cet article ou je te donne des ressources pour [apprendre le JavaScript.](https://www.trakode.com/blog/bases-incontournables-javascript/)

## Qu'est- ce que Node.js ? Rapidement !

Considère Node.js comme un environnement de serveur open source.

Comprends que Node.js fonctionne sur diverses plates-formes (Windows, Linux, Unix, Mac OS X, etc.).

Sache tout simplement que Node.js utilise JavaScript sur le serveur

En plus, Node.js est gratuit

## 1. Strapi CMS

[Strapi ](https://strapi.io/)est un CMS Nodejs open source headless. 

Il propose aux développeurs de créer une API de contenu puissante, autohébergée et hautement personnalisable. 

Strapi convient également au développement d'applications Web et mobiles systématiques et bien configurées. 

Il est très sécurisé et riche en fonctionnalités.

## 2. KeystoneJs

[KeystoneJs ](https://www.keystonejs.com/)est un puissant framework CMS NodeJs. 

Il fournit un support CMS robuste depuis des années maintenant. 

En plus de fournir des structures CMS puissantes, KeystoneJs est également utilisé pour :

* développer des API RESTful ;
* développer des applications de commerce électronique ;
* développer des plates-formes et différents forums en ligne.

KeystoneJs propose une interface utilisateur d'administration simplifiée qui aide les développeurs à créer un CMS élégant et sophistiqué.

## 3. CMS Ghost

[Ghost CMS](https://ghost.org/) est un CMS NodeJs sans tête open source.

Il s'agit d'une puissante plateforme de blogs écrite en JavaScript. 

Son design sophistiqué offre un chemin simple pour les blogueurs en ligne ou les publications en ligne. 

Des marques populaires telles qu’Apple, Tinder, SkyNews, Zappos et bien d'autres utilisent Ghost CMS pour sa simplicité et ses fonctions faciles à gérer.

## 4. CMS Apostrophe

[Aposthrophe](https://apostrophecms.com/) est un CMS gratuit et open source pour NodeJs. 

Les développeurs se sont concentrés sur l'augmentation de la productivité du développement Web et de la gestion de contenu tout en créant ce CMS NodeJs. 

Aujourd'hui, il est utilisé dans le monde entier pour créer et maintenir des sites Web / applications Web de toutes catégories. 

Aposthrophe CMS a la solution à tous vos problèmes.

## 5. EnduroJs

EnduroJs est actuellement considéré comme l'un des CMS NodeJs les plus productifs. 

C'est minimaliste, rapide et assez propre et soigné. Les professionnels sont vraiment impressionnés par son architecture moderne. 

Il ne nécessite pratiquement aucune configuration et son panneau d'administration est si sophistiqué. 

Bien qu'il soit livré avec une petite communauté, ceux qui l'ont utilisé sont vraiment satisfaits de son interface.

## 6. We.Js

[We.Js ](https://wejs.org/)offre une poignée de fonctionnalités pour développer des sites Web actifs modernes. 

Les fonctionnalités instantanées telles que les thèmes, les vues, les articles sont toutes disponibles dans We.Js. 

Il fournit également une gestion des utilisateurs étonnante et prend en charge différents formats de médias.

## 7. Prismic.io

[Prismic ](https://prismic.io/)est considéré comme une alternative à WordPress. 

C'est à la fois productif et agréable pour les développeurs. 

C'est aussi un CMS sans tête. Tu peux facilement développer des projets Prismic à l'aide de NodeJs. 

Ce beau CMS propose un kit de projet de démarrage spécial pour NodeJs.

## 8. CMS TotalJs

[TotalJs ](https://www.totaljs.com/cms/)est un framework NodeJs qui te propose de créer des applications Web étonnantes. 

Cependant, en ce qui concerne le CMS TotalJs, il t'aide à développer des sites Web professionnels et personnels extraordinaires. 

Le système de gestion de contenu TotalJs est un CMS NodeJs qui est construit sur NoSQL sans suivre aucune dépendance.

## 9. Buckets.io

Buckets.io est un CMS NodeJs open source moderne. 

Il est développé sur NodeJs et [MongoDB](https://www.trakode.com/blog/base-de-donnees-mongodb-essentiel/). 

Il offre une technologie de segmentation innovante qui peut transformer le mode de communication entre la haute main et les clients en ligne. 

Il est livré avec un excellent support d'intégration couvrant plus de 1500 applications.

## 10. NodeBeats

[NodeBeats ](https://www.nodebeats.com/)est un framework Node.js open-source qui a été construit à l'aide du framework MEAN. 

Il s'agit d'un système de gestion de contenu mature qui aide à créer des applications Web transparentes orientées contenu. 

Avec ce CMS NodeJs, tu peux facilement créer des sites Web de contenu riche en fonctionnalités et les transformer à votre guise.

## Conclusion

Tu vas sûrement rencontrer de gens  qui confondent encore [CMS avec WordPress ou Joomla](https://www.trakode.com/blog/comment-creer-gratuitement-un-site-internet-professionnel-sans-coder/) ou d'autres plates-formes open-source. C'est pas grave !

Cependant, en raison du fait qu'il s'agit d'un langage backend solide, NodeJs construit maintenant des plates-formes CMS intéressantes et utiles.

Découvrir la liste des 10 meilleurs plates-formes de gestion de contenu NodeJS à utiliser tranquillement pour produire un site web rapidement.

Les 10 Meilleures Plateformes CMS NodeJS À Utiliser En 2021

Dans cet article, je vais te montrer rapidement comment créer facilement une application web avec ReactJS.

ReactJS est connu comme un framework facile à apprendre parce que :

* Il est basé sur le langage JavaScript qui est très populaire.
* Le DOM virtuel dans ReactJS améliore l'expérience utilisateur et accélère le travail du développeur.
* L'autorisation de réutiliser les composants ReactJS fait gagner du temps de manière significative.
* Le flux de données unidirectionnel dans ReactJS fournit un code stable.
* Une bibliothèque Facebook open-source : en constante évolution et ouverte à la communauté

> Salut ! Je balance un peu de la musique sur [amazone music](https://www.amazon.fr/music/unlimited?tag=cristhos-21).
>
> J'ai crée mes images avec [canva](https://www.canva.com/join/apaisant-beaute-faucon).

## Qu'est-ce que React JS ?

ReactJS est une bibliothèque [JavaScript](https://www.trakode.com/blog/apprendre-le-langage-html-css-javascript/) qui combine la vitesse de JavaScript et utilise une nouvelle façon de rendre les pages Web. 

Ce qui les rend très **dynamiques** et **réactives** aux entrées de l'utilisateur. 

Cette librairie JavaScript a considérablement changé l'approche du développement de l'entreprise Facebook. 

Après la sortie de la bibliothèque, elle est devenue extrêmement populaire en raison de son approche révolutionnaire de **la programmation des interfaces utilisateur**.

***Elle s'est attiré une [concurrence de](https://www.trakode.com/blog/frameworks-javascript-creation-application-web/) longue date entre ReactJS, Angular et les autres outil de développement Web populaire.***

## Pourquoi intégrer ReactJS dans ton projet d'application web ?

### Ton contenu sera référençable

Tu découvriras que c’est la fonctionnalité qui fait la différence par rapport aux autres frameworks. 

Avec l’utilisation [d’un serveur Nodejs](https://www.trakode.com/blog/apprendre-nodejs-essentiel-rapidement/), le code va être généré côté client et côté serveur.

***C'est comme du PHP donc… tout en gardant les avantages du JavaScript !***

### ReactJS est très rapide

ReactJS créé son propre DOM virtuel où sont rattachés tes composants. 

Avec cette approche, tu auras énormément de flexibilité et des performances exceptionnelles.

***ReactJS calcule quel changement dans le DOM a besoin d’être fait, et change juste La partie qui a besoin d’être mise à jour. De cette façon, ReactJS évite des opérations coûteuses dans le DOM.***

### Les composants sont le futur du développement web

ReactJS a pris le concept de Shadow DOM et du framework PolymerJS et l’a poussé à un niveau supérieur. 

React.js n’utilise pas Shadow DOM, à la place, il te donne l’habilité de créer tes propres composant. C'est super !

***Tu peux les réutiliser plus tard, combiner, et/ou inclure dans le cœur de votre contenu.*** Comme des biques !

### La communauté

ReactJS a séduit rapidement la communauté des développeurs JS. Très attirante !

Et c’est sans parler de **React Native** qui de son côté permet de [créer des applications natives iPhone et Android](https://www.trakode.com/blog/comment-creer-une-application-mobile-facilement/) en écrivant du JavaScript.  Tu vas gagner énormément de temps !

### L’intelligibilité

ReactJS produit du code « propre » (simple à lire), sa lecture permet de déterminer immédiatement quelles sont les fonctionnalités de votre application. 

Ce qui est essentiel pour la maintenance et l’expansion de votre projet dans le temps.

### Le JavaScript plus simple à écrire

ReactJS utilise une syntaxe spéciale appelé JSX, qui permet de mixer l’HTML et le JavaScript. 

Tu n'es pas obligé, Tu peux toujours écrire ton app ReactJS en JavaScript natif.

## Bien Démarrer avec React JS

### Utilisation de la documentation

Pour bien débuter avec React JS, Tu peux lire l'article [Bien démarrer avec React](https://fr.reactjs.org/tutorial/tutorial.html) sur le site officiel.

J'avoue que c'est un article très technique, tu auras l'impression de te perdre.

Personnellement, je préfère ouvrir [un terminal](https://www.trakode.com/blog/les-7-outils-les-plus-rapides-et-efficaces-dans-la-programmation/) et utiliser Create React App.

### Utilisation de l'application Create React App pour créer des applications React

Avec Create React App, l'installation est très simple.

```bash
# tu commences par générer la structure de base
npx create-react-app super-app

# tu vas ouvrir le dossier de ton application
cd super-app

# Demarer ton app
yarn start
```

*[npx](https://www.npmjs.com/package/npx) est un outil fourni avec [npm 5.2+](https://www.npmjs.com/).* 

*Nous allons récupérer la dernière version de `create-react-app` et l'utiliser pour l'installer.*

Create React App est livrée avec de nombreux éléments prêts à l'emploi, y compris **un point de départ pour chaque application React.**

* Build setup (webpack et Babel pour le transpiling).
* Structure de dossier pratique.
* Scripts pour exécuter notre application.
* Scripts à regrouper pour la production.
* Possibilité d'étendre avec Toupet, TypeScrit et plus.

Voici la structure du dossier :

```bash
super-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js
```

**public /**

Tout ce qui se trouve dans le dossier public sera ce qui est disponible pour les navigateurs. 

Tu n'auras pas besoin de travailler ici trop souvent. 

Ce ne sont que les actifs que tu vas regrouper avec ton application avec un minimum de travail.

**src /**

C'est là que tu vas faire la majorité de ton travail. 

Tous tes composants ReactJS seront dans le `src/` dossier.

Dossier **racine**  **/**

C'est là que se trouvent tes fichiers de configuration. 

La plupart de ta configuration se trouve dans`package.json`

## Conclusion

La création d'une application web avec ReactJS n'est pas aussi complexe.

ReactJS offre plusieurs possibilités. Tu as découvert la plus simple !

Create React App est un outil génial pour les développeurs React. 

Auparavant, nous devions faire nos propres configurations Webpack et Babel.

Désormais, les développeurs React peuvent directement développer des applications React impressionnantes. 

Ils n'ont plus à se soucier de la configuration.

Tu peux [Create React App](https://create-react-app.dev/docs/getting-started/) pour démarrer vos applications. 

Il fournit une base solide et est constamment mis à jour par l'équipe React.

Comment Créer Facilement Une application Web Avec Reactjs ?
description: Découvrir comment débuter facilement, sans stress avec ReactJs, créer sa première application web ReactJs

Comment Créer Facilement Une application Web Avec Reactjs ?

Un cours qui va t'aider à apprendre rapidement le langage html et css. Trop d'exercices pratiques pour te permettre de maitriser le développement web.

Le langage Html et Css : Apprendre à créer et héberger un site web

Des cous qui va te permettre de compléter des connaissances en HTML et CSS en ajoutant de l'interactivité à tes pages web.

Apprendre le langage Javascript pour rendre le site web dynamique

Il s'agit de comprendre le base incontournable de la logique derrière la programmation.

Algorithmique et Structure de données : Le pilier de la programmation

je vais créer ta première application de streaming de a à z

Je vais créer une application de streaming musical

Je vais créer une plateforme de formation en ligne

Je vais héberger un site ou une plateforme web dans le cloud

Apprendre le développement web et mobile.
Gagner directement de l'argent avec vos compétences.


Des articles simplifiés sur la programmation Web et Mobile

Blog