Comment Créer Facilement Une application Web Avec Reactjs ?

Comment Créer Facilement Une application Web Avec Reactjs ?
Mise à jours :

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.

J'ai crée mes images avec canva.

Qu'est-ce que React JS ?

ReactJS est une bibliothèque 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 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, 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 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 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 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.

# 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 est un outil fourni avec npm 5.2+.

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 :

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 danspackage.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 pour démarrer vos applications.

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