One place for hosting & domains

      Comment créer des éléments React avec JSX


      L’auteur a choisi Creative Commons​​​ pour recevoir un don dans le cadre du programme Write for DOnations.

      Introduction

      Dans ce tutoriel, vous apprendrez à décrire des éléments avec JSX. JSX est une abstraction qui vous permet d’écrire une syntaxe de type HTML dans votre code JavaScript et vous permettra de construire des composants React qui ressemblent au balisage HTML standard.  JSX est le langage de référence de React, et constitue donc le fondement de tout balisage que React apportera à votre demande. 

      Comme JSX vous permet également d’écrire du JavaScript dans votre balisage, vous pourrez tirer parti des fonctions et des méthodes JavaScript, notamment le mappage des tables et l’évaluation des courts-circuits pour les conditionnels

      Dans le cadre du tutoriel, vous capturerez les événements de clic sur les boutons directement dans le balisage et repérerez les cas où la syntaxe ne correspond pas exactement au HTML standard, par exemple avec les classes CSS. À la fin de ce tutoriel, vous disposerez d’une application de travail qui utilise diverses fonctionnalités JSX pour afficher une liste d’éléments ayant un auditeur de clics intégré. Il s’agit d’un modèle courant dans les applications React que vous utiliserez souvent durant l’apprentissage du cadre. Vous pourrez également mélanger des éléments HTML standard avec du JavaScript pour voir comment React vous donne la possibilité de créer de petits morceaux de code réutilisables.

      Conditions préalables

      Étape 1 – Ajouert des balises à un élément de React

      Comme mentionné précédemment, React dispose d’un langage de balisage spécial appelé JSX. Il s’agit d’un mélange de syntaxe HTML et JavaScript qui ressemble à quelque chose comme ça :

      <div>
        {inventory.filter(item => item.available).map(item => (
          <Card>
              <div className="title"}>{item.name}</div>
              <div className="price">{item.price}</div>
          </Card>
          ))
        }
      </div>
      

      Vous reconnaîtrez certaines fonctionnalités de JavaScript telles que .filter et .mapainsi que du HTML standard comme <div>. Mais il y a d’autres parties qui ressemblent à la fois au HTML et au JavaScript, comme <Card> et className. 

      Il s’agit de JSX, le langage de balisage spécial qui donne aux composants de React la sensation du HTML avec la puissance du JavaScript.

      Dans cette étape, vous apprendrez à ajouter une syntaxe de base de type HTML à un élément React existant. Pour commencer, vous ajouterez des éléments HTML standard dans une fonction JavaScript, puis vous verrez le code compilé dans un navigateur. Vous regrouperez également les éléments afin que React puisse les compiler avec un minimum de balisage, laissant une sortie HTML propre.

      Pour commencer, faites un nouveau projet. Sur votre ligne de commande, exécutez le script suivant pour installer un nouveau projet en utilisant create-react-app :

      • npx create-react-app jsx-tutorial

      Une fois le projet terminé, passez dans le répertoire :

      Dans un nouvel onglet ou une nouvelle fenêtre du terminal, démarrez le projet en utilisant le script de démarrage de l’application Create React . Le navigateur se réactualise automatiquement en fonction des changements, alors laissez ce script fonctionner pendant toute la durée de votre travail :

      Vous obtiendrez un serveur local en fonctionnement. Si le projet ne s’est pas ouvert dans une fenêtre de navigateur, vous pouvez le trouver sur http://localhost:3000/. Si vous l’exécutez à partir d’un serveur distant, l’adresse sera http://your_IP_address:3000.

      Votre navigateur se chargera avec une application React incluse dans le cadre de Create React App.

      Modèle de projet React

      Vous allez créer un tout nouvel ensemble de composants personnalisés, vous devrez donc commencer par effacer du code passe-partout afin d’avoir un projet vide. Pour commencer,ouvrez App.js dans un éditeur de texte. C’est le composant root (racine) qui est injecté dans la page. Tous les composants partiront de là.

      Dans un nouveau terminal, déplacez-vous dans le dossier du projet et ouvrez src/App.js avec la commande suivante : 

      Vous verrez un fichier comme ceci :

      jsx-tutorial/src/App.js

      import React from 'react';
      import logo from './logo.svg';
      import './App.css';
      
      function App() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                Edit <code>src/App.js</code> and save to reload.
              </p>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
            </header>
          </div>
        );
      }
      
      export default App;
      

      Maintenant, supprimez la ligne import logo from './logo.svg et tout ce qui suit la déclaration de retour dans la fonction. Modifiez-le pour retourner null. Le code final ressemblera à ceci :

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return null;
      }
      
      export default App;
      

      Sauvegardez et quittez l’éditeur de texte.

      Enfin, supprimez le logo. Dans la fenêtre du terminal, tapez la commande suivante :

      Vous n’utiliserez pas ce fichier SVG dans votre application, et vous devez supprimer les fichiers inutilisés pendant que vous travaillez. Cela permettra de mieux organiser votre code sur le long terme.

      Maintenant que ces parties de votre projet ont été supprimées, vous pouvez passer à l’exploration des facettes de JSX. Ce langage de balisage est compilé par React et devient finalement le HTML que vous voyez sur une page web. Sans aller trop loin dans les internes, React prend le JSX et crée un modèle de ce à quoi ressemblera votre page, puis crée les éléments nécessaires et les ajoute à la page. 

      Cela signifie que vous pouvez écrire ce qui ressemble à du HTML et vous attendre à ce que le HTML rendu soit similaire. Cependant, il y a quelques pièges.

      Tout d’abord, si vous regardez l’onglet ou la fenêtre de votre serveur, vous verrez ceci :

      Output

      ... ./src/App.js Line 1:8: 'React' is defined but never used no-unused-vars ...

      C’est le linter qui vous dit que vous n’utilisez pas le code React importé. Lorsque vous ajoutez la ligne import React à partir de « react » à votre code, vous importez du code JavaScript qui convertit le code JSX en code React. S’il n’y a pas de JSX, l’importation n’est pas nécessaire.

      Changeons cela en ajoutant une petite quantité de JSX. Commencez par remplacer null avec l’exemple Hello, World : 

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return <h1>Hello, World</h1>;
      }
      
      export default App;
      

      Sauvegardez le fichier. Si vous regardez le terminal avec le serveur en marche, vous verrez que le message d’avertissement a disparu. Si vous consultez votre navigateur, vous verrez le message comme un h1 element. 

      écran de navigateur affichant « Hello, World ». 

      Ensuite, sous la balise <h1>, ajoutez une balise de paragraphe qui contient la chaîne J'écris JSX. Le code ressemblera à ceci :

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return(
          <h1>Hello, World</h1>
          <p>I am writing JSX</p>
        )
      }
      
      export default App;
      

      Comme le JSX s’étend sur plusieurs lignes, vous devrez mettre l’expression entre parenthèses.

      Sauvegardez le fichier. Lorsque vous le ferez, vous verrez une erreur dans le terminal qui fait fonctionner votre serveur :

      Output

      ./src/App.js Line 7:5: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? 5 | return( 6 | <h1>Hello, World</h1> > 7 | <p>I am writing JSX</p> | ^ 8 | ) 9 | } 10 |

      Lorsque vous renvoyez JSX à partir d’une fonction ou d’une déclaration, vous devez renvoyer un seul élément. Cet élément peut avoir des enfants nichés, mais il doit y avoir un seul élément de haut niveau. Dans ce cas, vous rendez deux éléments.

      Le correctif est un petit changement de code. Entourez le code d’une balise vide. Une balise vide est un élément HTML sans aucun mot. Il ressemble à ceci : <></>.

      Retournez à la page ./src/App.js dans votre éditeur et ajoutez la balise vide : 

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return(
          <>
            <h1>Hello, World</h1>
            <p>I am writing JSX</p>
          </>
        )
      }
      
      export default App;
      

      La balise vide crée un élément unique, mais lorsque le code est compilé, il n’est pas ajouté à la balise finale. Cela vous permettra de garder votre code propre tout en donnant à React un seul élément.

      Note : Vous auriez également pu envelopper le code avec un div au lieu de balises vides à condition que le code renvoie un élément. Dans cet exemple, une balise vide a l’avantage de ne pas ajouter de balisage supplémentaire à la sortie analysée.

      Enregistrez le code et quittez le fichier. Votre navigateur rafraîchit et affiche la page mise à jour avec l’élément de paragraphe. En outre, lorsque le code est converti, les balises vides sont supprimées :

      Navigateur affichant le balisage et devtools affichant le balisage sans les balises vides 

      Vous avez maintenant ajouté quelques JSX de base à votre composant et appris comment tous les JSX doivent être imbriqués dans un seul composant. Dans l’étape suivante, vous ajouterez un peu de style à votre composant.

      Étape 2 – Ajout de style à un élément avec attributs

      Dans cette étape, vous allez styliser les éléments de votre composant pour apprendre comment les attributs HTML fonctionnent avec JSX. Il existe de nombreuses options de style dans React. Certaines d’entre elles impliquent l’écriture de CSS en Javascript, d’autres utilisent des préprocesseurs. Dans ce tutoriel, vous travaillerez avec des classes CSS et CSS importées.

      Maintenant que vous avez votre code, il est temps d’ajouter un peu de style. Ouvrez App.css dans votre éditeur de texte :

      Comme vous commencez avec le nouveau JSX, le CSS actuel fait référence à des éléments qui n’existent plus. Comme vous n’avez pas besoin du CSS, vous pouvez le supprimer.

      Après avoir effacé le code, vous aurez un fichier vide.

      Ensuite, vous ajouterez un style pour centrer le texte. Dans src/App.css, ajoutez le code suivant :

      jsx-tutorial/src/App.css

      .container {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      

      Dans ce bloc de code, vous avez créé un sélecteur de classe CSS appelé .container et utilisé ça pour centrer le contenu en utilisant display : flex.

      Sauvegardez le fichier et quittez. Le navigateur sera mis à jour, mais rien ne changera. Pour pouvoir voir le changement, vous devez ajouter la classe CSS à votre composant React. Ouvrez le code JavaScript du composant :

      Le code CSS est déjà importé avec la ligne import './App.css'. Cela signifie que le webpack va tirer le code pour faire une feuille de style finale, mais pour appliquer le CSS à vos éléments, vous devez ajouter les classes. 

      Tout d’abord, dans votre éditeur de texte, changez les balises vides <> en <div>.

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return(
          <div>
            <h1>Hello, World</h1>
            <p>I am writing JSX</p>
          </div>
        )
      }
      
      export default App;
      

      Dans ce code, vous avez remplacé les balises vides –<>-avec les balises div. Les balises vides sont utiles pour regrouper votre code sans ajouter de balises supplémentaires, mais ici vous devez utiliser un div car les balises vides n’en acceptent aucuns attributs HTML.

      Ensuite, vous devez ajouter le nom de la classe. C’est là que JSX va commencer à s’écarter du HTML. Si vous vouliez ajouter une classe à un élément HTML habituel, vous le feriez comme ceci :

      <div class="container">
      

      Mais comme JSX est du JavaScript, il a quelques limites. L’une des limites est que JavaScript a réservé des mots-clés. Cela signifie que vous ne pouvez pas utiliser certains mots dans un code JavaScript. Par exemple, vous ne pouvez pas faire de variable appelée null parce que ce mot est déjà réservé.

      L’un des mots réservés est classe. Réagissez en contournant ce mot réservé en le modifiant légèrement. Au lieu d’ajouter l’attribut class, vous ajouterez l’attribut className. En règle générale, si un attribut ne fonctionne pas comme prévu, essayez d’ajouter la version en camel case. Un autre attribut qui est légèrement différent est l’attribut for que vous utiliseriez pour les étiquettes. Il y a quelques autres cas mais heureusement, la liste est assez courte. 

      Remarque : Dans React, les attributs sont souvent appelés des accessoires. Les accessoires sont des données que vous pouvez transmettre à d’autres composants personnalisés. Ils ont le même aspect que les attributs, sauf qu’ils ne correspondent à aucune spécification HTML. Dans ce tutoriel, nous les appellerons attributs, car ils sont principalement utilisés comme des attributs HTML standard. Cela permettra de les distinguer des accessoires qui ne se comportent pas comme des attributs HTML qui seront abordés plus loin dans cette série.

      Maintenant que vous savez comment l’attribut class est utilisé dans React, vous pouvez mettre à jour votre code pour inclure les styles. Dans votre éditeur de texte, ajoutez className="container" à votre étiquette de div d’ouverture : 

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return(
          <div className="container">
            <h1>Hello, World</h1>
            <p>I am writing JSX</p>
          </div>
        )
      }
      
      export default App;
      

      Sauvegardez le fichier. Lorsque vous le ferez, la page se rechargera et le contenu sera centré.

      Éléments html centrés dans un navigateur.

      L’attribut className est unique dans React. Vous pouvez ajouter la plupart des attributs HTML à JSX sans aucune modification. Par exemple, retournez à votre éditeur de texte et ajoutez un id de salutation à votre élément <h1>. Il ressemblera à du HTML standard :

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return(
          <div className="container">
            <h1 id="greeting">Hello, World</h1>
            <p>I am writing JSX</p>
          </div>
        )
      }
      
      export default App;
      

      Sauvegardez la page et rechargez le navigateur. Ce sera le même.

      Jusqu’à présent, JSX ressemble à un balisage standard, mais l’avantage de JSX est que même s’il ressemble au HTML, il a la puissance du JavaScript. Cela signifie que vous pouvez attribuer des variables et les référencer dans vos attributs. Pour référencer un attribut, enveloppez-le avec des accolades –{}– au lieu de guillemets.

      Dans votre éditeur de texte, ajoutez les lignes surlignées suivantes pour faire référence à un attribut :

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        const greeting = "greeting";
        return(
          <div className="container">
           <h1 id={greeting}>Hello, World</h1>
            <p>I am writing JSX</p>
          </div>
        )
      }
      
      export default App;
      

      Dans ce code, vous avez créé une variable au-dessus de l’instruction de return appelée greeting avec la valeur de « greeting », puis référencé la variable dans l’attribut id de votre balise <h1>.

      Enregistrez et quittez le fichier. La page sera la même, mais avec une balise id.

      Page avec la balise id mise en évidence dans les outils de développement 

      Jusqu’à présent, vous avez travaillé avec quelques éléments seuls, mais vous pouvez aussi utiliser JSX pour ajouter de nombreux éléments HTML et les imbriquer pour créer des pages complexes.

      Pour le démontrer, vous ferez une page avec une liste d’emojis. Ces emoji seront enveloppés d’un élément <button>. Lorsque vous cliquez sur les émojis, vous obtenez leur nom abrégé CLDR.

      Pour commencer, vous devrez ajouter quelques éléments supplémentaires à la page. Ouvrez src/App.js dans votre éditeur de texte. Gardez-le ouvert tout au long de cette étape.

      Tout d’abord, ajoutez une liste d’emojis en ajoutant les lignes surlignées suivantes :

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        const greeting = "greeting";
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            <p>I am writing JSX</p>
            <ul>
              <li>
                  <button>
                    <span role="img" aria-label="grinning face" id="grinning face">😀</span>
                  </button>
              </li>
              <li>
                <button>
                    <span role="img" aria-label="party popper" id="party popper">🎉</span>
                </button>
              </li>
              <li>
                <button>
                    <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
                </button>
              </li>
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Ici vous avez créé une balise <ul> pour contenir une liste d’emojis. Chaque emoji se trouve dans un élément séparé <li> et est entouré d’un élément <button>. À l’étape suivante, vous ajouterez un événement à ce bouton.

      Vous avez également entouré l’emoji avec une balise <span> qui possède quelques autres attributs. Chaque span possède l’attribut de rôle fixé au rôle img. Cela signalera au logiciel d’accessibilité que l’élément agit comme une image. En outre, chaque <span> a également une étiquette aria-label et un id avec le nom de l’emoji. L’étiquette aria-label indiquera aux visiteurs munis de lecteurs d’écran ce qui est affiché. Vous utiliserez l’id lors de la rédaction des événements de l’étape suivante.

      Lorsque vous écrivez un code de cette manière, vous utilisez des éléments sémantiques ce qui permettra de garder la page accessible et facile à analyser pour les lecteurs d’écran. 

      Enregistrez et quittez le fichier. Votre navigateur va se rafraîchir et vous verrez ceci :

      navigateur avec emojis comme liste

      Maintenant, ajoutez un peu de style. Ouvrez le code CSS dans votre éditeur de texte :

      Ajoutez le code surligné suivant pour supprimer l’arrière-plan et la bordure par défaut des boutons tout en augmentant la taille de la police :

      jsx-tutorial/src/App.css

      .container {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      
      button {
          font-size: 2em;
          border: 0;
          padding: 0;
          background: none;
          cursor: pointer;
      }
      
      ul {
          display: flex;
          padding: 0;
      }
      
      li {
          margin: 0 20px;
          list-style: none;
          padding: 0;
      }
      

      Dans ce code, vous avez utilisé la taille de la police, la bordure et d’autres paramètres permettant d’ajuster l’apparence de vos boutons et de modifier la police. Vous avez également supprimé les styles de liste et ajouté display : flex à l’élément <ul> pour le rendre horizontal.

      Enregistrez et fermez le fichier CSS. Votre navigateur va se rafraîchir et vous verrez ceci :

      liste avec les styles par défaut supprimés 

      Vous avez maintenant travaillé avec plusieurs éléments JSX qui ressemblent à du HTML normal. Vous avez ajouté des classes, des ids et des balises aria, et vous avez travaillé avec des données sous forme de chaînes et de variables. Mais React utilise également des attributs pour définir comment vos éléments doivent répondre aux événements des utilisateurs. Dans l’étape suivante, vous commencerez à rendre la page interactive en ajoutant des événements au bouton.

      Étape 3 – Ajouter des événements aux éléments

      Dans cette étape, vous ajouterez des événements aux éléments en utilisant des attributs spéciaux et capturerez un événement de clic sur un élément de bouton. Vous apprendrez comment saisir les informations de l’événement pour envoyer une autre action ou utiliser d’autres informations dans le cadre du dossier.

      Maintenant que vous disposez d’une page d’information de base, il est temps d’y ajouter quelques événements. Il existe de nombreux gestionnaires d’événements que vous pouvez ajouter aux éléments HTML. React vous donne accès à tous ces éléments. Comme votre code JavaScript est couplé à votre balisage, vous pouvez rapidement ajouter les événements tout en gardant votre code bien organisé.

      Pour commencer, ajoutez le gestionnaire d’événements onclick. Cela vous permet d’ajouter un peu de code JavaScript directement à votre élément plutôt que d’attacher un auditeur de l’événement :

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        const greeting = "greeting";
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            <p>I am writing JSX</p>
            <ul>
              <li>
                <button
                  onClick={event => alert(event.target.id)}
                >
                  <span role="img" aria-label="grinning face" id="grinning face">😀</span>
                </button>
              </li>
              <li>
                <button
                  onClick={event => alert(event.target.id)}
                >
                    <span role="img" aria-label="party popper" id="party popper">🎉</span>
                </button>
              </li>
              <li>
                  <button
                    onClick={event => alert(event.target.id)}
                  >
                    <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
                </button>
              </li>
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Comme il s’agit de JSX, vous avez mis onclick en camel case, ce qui signifie que vous l’avez ajouté en tant que onClick. Cet attribut onClick utilise une fonction d’anonymat pour récupérer des informations sur l’élément cliqué. 

      Vous avez ajouté une fonction de flèche anonyme qui obtiendra l’événement à partir du bouton cliqué, et l’événement aura une cible qui est l’élément <span>. Les informations dont vous avez besoin se trouvent dans l’attribut id auquel vous pouvez accéder avec event.target.id. Vous pouvez déclencher l’alerte avec la fonction alert().

      Sauvegardez le fichier. Dans votre navigateur, cliquez sur l’un des emojis et vous obtiendrez une alerte avec le nom.

      Alerte pour le party popper 

      Vous pouvez réduire une duplication en déclarant la fonction une fois et en la passant à chaque action onClick. Comme la fonction ne repose sur rien d’autre que des entrées et des sorties, vous pouvez la déclarer en dehors de la fonction du composant principal. En d’autres termes, la fonction n’a pas besoin d’accéder au champ d’application du composant. L’avantage de les garder séparés est que la fonction de votre composant est légèrement plus courte et que vous pouvez déplacer la fonction dans un fichier séparé plus tard si vous le souhaitez.

      Dans votre éditeur de texte, créez une fonction appelée displayEmojiName qui prend l’événement et appelle la fonction alert() avec un identifiant. Ensuite, passez la fonction à chaque attribut onClick : 

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      const displayEmojiName = event => alert(event.target.id);
      
      function App() {
        const greeting = "greeting";
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            <p>I am writing JSX</p>
            <ul>
              <li>
                <button
                  onClick={displayEmojiName}
                >
                  <span role="img" aria-label="grinning face" id="grinning face">😀</span>
                </button>
              </li>
              <li>
                <button
                  onClick={displayEmojiName}
                >
                    <span role="img" aria-label="party popper" id="party popper">🎉</span>
                </button>
              </li>
              <li>
                  <button
                    onClick={displayEmojiName}
                  >
                    <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
                </button>
              </li>
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Sauvegardez le fichier. Dans votre navigateur, cliquez sur un émoji et vous verrez la même alerte.

      Dans cette étape, vous avez ajouté des événements à chaque élément. Vous avez également vu comment JSX utilise des noms légèrement différents pour les événements des éléments, et vous avez commencé à écrire du code réutilisable en prenant la fonction et en la réutilisant sur plusieurs éléments. Dans l’étape suivante, vous allez écrire une fonction réutilisable qui renvoie des éléments JSX plutôt que d’écrire chaque élément à la main. Cela permettra de réduire encore la duplication.

      Étape 4 – Recouper les données pour créer des éléments

      Dans cette étape, vous irez au-delà de l’utilisation de JSX comme simple balisage. Vous apprendrez à le combiner avec JavaScript pour créer un balisage dynamique qui réduit le code et améliore la lisibilité. Vous refaites votre code dans un tableau que vous passez en boucle pour créer des éléments HTML.

      JSX ne vous limite pas à une syntaxe de type HTML. Il vous donne également la possibilité d’utiliser JavaScript directement dans votre balisage. Vous avez déjà un peu essayé en passant des fonctions aux attributs. Vous avez également utilisé des variables pour réutiliser les données. Il est maintenant temps de créer JSX directement à partir des données, en utilisant le code JavaScript standard.

      Dans votre éditeur de texte, vous devrez créer un tableau des données emoji dans le fichier src/App.js. Réouvrez le dossier si vous l’avez fermé :

      Ajouter une table qui contiendra les objets qui ont l’émoji et portent le nom de l’émoji. Notez que les emojis doivent être entourés de guillemets. Créez cette table au-dessus de la fonction App :

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      const displayEmojiName = event => alert(event.target.id);
      const emojis = [
        {
          emoji: "😀",
          name: "grinning face"
        },
        {
          emoji: "🎉",
          name: "party popper"
        },
        {
          emoji: "💃",
          name: "woman dancing"
        }
      ];
      
      function App() {
      ...
      }
      
      export default App;
      

      Maintenant que vous avez les données, vous pouvez les passer en boucle. Pour utiliser JavaScript dans JSX, vous devez l’entourer d’accolades : {}. C’est la même chose que lorsque vous avez ajouté des fonctions aux attributs.

      Pour créer les composants React, vous devez convertir les données en éléments JSX. Pour ce faire, vous allez cartographier les données et renvoyer un élément JSX. Il y a quelques éléments que vous devez garder à l’esprit lorsque vous écrivez le code.

      Tout d’abord, un groupe d’articles doit être entouré d’un conteneur <div>. Deuxièmement, chaque objet a besoin d’un bien spécial appelé key. La key, ou clé, doit être une donnée unique que React peut utiliser pour garder une trace des éléments, afin de savoir quand mettre à jour le composant. La clé sera retirée du HTML compilé, car elle est réservée à un usage interne. Chaque fois que vous travaillez avec des boucles, vous devez ajouter une simple chaîne comme clé.

      Voici un exemple simplifié qui fait correspondre une liste de noms à une liste contenant <div>: 

      ...
      const names = [
          "Atul Gawande",
          "Stan Sakai",
          "Barry Lopez"
      ];
      
      return(
          <div>
              {names.map(name => <div key={name}>{name}</div>)}
          </div>
      )
      ...
      

      Le HTML qui en résulte ressemblerait à ceci :

      ...
      <div>
          <div>Atul Gawande</div>
          <div>Stan Sakai</div>
          <div>Barry Lopez</div>
      </div>
      ...
      

      La conversion de la liste des emojis sera similaire. Le <ul> sera le conteneur. Vous allez cartographier les données et retourner un <li> avec une clé du nom court de l’emoji. Vous remplacerez les données codées en dur dans les champs <button> et <span> avec des informations provenant de la boucle. 

      Dans votre éditeur de texte, ajoutez ce qui suit :

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      const displayEmojiName = event => alert(event.target.id);
      const emojis = [
        {
          emoji: '😀',
          name: "test grinning face"
        },
        {
          emoji: '🎉',
          name: "party popper"
        },
        {
          emoji: '💃',
          name: "woman dancing"
        }
      ];
      
      function App() {
        const greeting = "greeting";
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            <p>I am writing JSX</p>
            <ul>
              {
                emojis.map(emoji => (
                  <li key={emoji.name}>
                    <button
                      onClick={displayEmojiName}
                    >
                      <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
                    </button>
                  </li>
                ))
              }
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Dans le code, vous avez mis en correspondance sur la table d’emojis dans la balise <ul> et renvoyé un <li>. Dans chaque <li> vous avez utilisé le nom de l’emoji comme accessoire clé. Le bouton aura la même fonction que normalement. Dans l’élément <span>, remplacez l’étiquette aria-label et id par l’élément name. Le contenu de la balise <span> devrait être l’emoji. 

      Sauvegardez le fichier. Votre fenêtre se rafraîchira et vous verrez les données. Remarquez que la clé n’est pas présente dans le HTML généré.

      Navigateur avec outils de développement affichant le HTML mis à jour sans accessoires clés 

      La combinaison de JSX et de JavaScript standard vous donne de nombreux outils pour créer du contenu de manière dynamique, et vous pouvez utiliser n’importe quel JavaScript standard que vous souhaitez. Dans cette étape, vous avez remplacé le JSX codé en dur par une table et une boucle pour créer du HTML de façon dynamique. Dans l’étape suivante, vous afficherez les informations de manière conditionnelle en utilisant un court-circuit.

      Étape 5 – Présenter sous condition des éléments avec un court-circuit

      Dans cette étape, vous utiliserez le court-circuit pour afficher conditionnellement certains éléments HTML. Cela vous permettra de créer des composants qui peuvent masquer ou afficher du HTML en fonction d’informations supplémentaires, ce qui donnera à vos composants la souplesse nécessaire pour gérer plusieurs situations.

      Il y a des moments où vous aurez besoin d’un élément pour montrer des informations dans certains cas et pas dans d’autres. Par exemple, vous pouvez vouloir afficher un message d’alerte pour l’utilisateur seulement si certains cas sont vrais, ou vous pouvez vouloir afficher certaines informations de compte pour un administrateur que vous ne voudriez pas qu’un utilisateur normal voit.

      Pour ce faire, vous utiliserez un court-circuit. Cela signifie que vous utiliserez un conditionnel, et si la première partie est vraie, il renverra les informations dans la deuxième partie.

      Voici un exemple. Si vous vouliez afficher un bouton uniquement dans le case où l’utilisateur serait connecté, vous entoureriez l’élément avec des accolades et ajouteriez la condition précédente.

      {isLoggedIn && <button>Log Out</button>}
      

      Dans cet exemple, vous utilisez l’opérateur &&, qui renvoie la dernière valeur si tout est vrai. Sinon, il revient comme faux, ce qui indiquera à React de ne pas renvoyer de balisage supplémentaire. Si isLoggedIn est vrai, React affichera le bouton. Si isLoggedIn est faux, il n’affichera pas le bouton.

      Pour essayer, ajoutez les lignes surlignées suivantes :

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      ...
      
      function App() {
        const greeting = "greeting";
        const displayAction = false;
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            {displayAction && <p>I am writing JSX</p>}
            <ul>
      ...
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Dans votre éditeur de texte, vous avez créé une variable appelée displayAction avec une valeur assignée comme false (fausse). Vous avez ensuite entouré la balise <p> avec des accolades.  Au début des bretelles bouclées, vous avez ajouté displayAction && pour créer le conditionnel. 

      Enregistrez le fichier et vous verrez l’élément disparaître dans votre navigateur. Et surtout, il n’apparaîtra pas non plus dans le HTML généré. Ce n’est pas la même chose que de masquer un élément avec le CSS. Il n’existera pas du tout dans le balisage final.

      Navigateur avec outils de développement n'affichant aucun élément de paragraphe 

      Actuellement, la valeur de displayAction est codée en dur, mais vous pouvez également stocker cette valeur en tant qu’état ou la transmettre comme accessoire d’un composant parent. 

      Dans cette étape, vous avez appris à montrer des éléments de manière conditionnelle. Cela vous donne la possibilité de créer des composants qui sont personnalisables en fonction d’autres informations.

      Conclusion

      À ce stade, vous avez créé une application personnalisée avec JSX. Vous avez appris comment ajouter des éléments de type HTML à votre composant, ajouter du style à ces éléments, passer des attributs pour créer un balisage sémantique et accessible, et ajouter des événements aux composants. Vous avez ensuite mélangé JavaScript dans votre JSX pour réduire le code en double et afficher ou masquer les éléments de manière conditionnelle.

      C’est la base dont vous avez besoin pour fabriquer les futurs composants. En utilisant une combinaison de JavaScript et de HTML, vous pouvez construire des composants dynamiques qui sont flexibles et permettent à votre application de se développer et de changer.

      Si vous souhaitez en savoir plus sur React, consultez notre page thématique React.



      Source link

      Comment installer un logiciel sur des clusters Kubernetes avec le gestionnaire de packages Helm 3


      Introduction

      Helm est un gestionnaire de package pour Kubernetes qui permet aux développeurs et aux opérateurs de configurer et à déployer des applications plus facilement sur les clusters Kubernetes.

      Dans ce tutoriel, vous allez configurer Helm 3 et l’utiliser pour installer, reconfigurer, revenir en arrière et supprimer une instance de l’application Kubernetes Dashboard. Le dashboard (tableau de bord) est une interface graphique Kubernetes officielle basée sur le web.

      Pour un aperçu conceptuel de Helm et de son écosystème de packaging, veuillez lire notre article, Une introduction à Helm.

      Conditions préalables

      Pour ce tutoriel, vous aurez besoin de :

      • Un cluster Kubernetes avec contrôle d’accès basé sur les rôles (RBAC) activé. Helm 3.1 prend en charge les clusters des versions 1.14 à 1.17. Pour plus d’informations, consultez la page des versions de Helm.
      • L’outil de ligne de commande kubectl installé sur votre machine locale, configuré pour vous connecter à votre cluster. Vous pouvez en savoir plus sur l’installation de kubectl dans la documentation officielle.

      Vous pouvez tester votre connectivité avec la commande suivante :

      Si vous ne voyez aucune erreur, vous êtes connecté au cluster. Si vous avez accès à plusieurs clusters avec kubectl, veillez à vérifier que vous avez choisi le contexte de cluster adéquat :

      • kubectl config get-contexts

      Output

      CURRENT NAME CLUSTER AUTHINFO NAMESPACE * do-fra1-helm3-example do-fra1-helm3-example do-fra1-helm3-example-admin

      Dans cet exemple, l’astérisque (*) indique que nous sommes connectés au cluster do-fra1-helm3-example. Pour changer les clusters exécutez :

      • kubectl config use-context context-name

      Lorsque vous êtes connecté au bon cluster, continuez à l’Étape 1 pour commencer à installer Helm.

      Étape 1 — Installation de Helm

      Tout d’abord, vous allez installer l’utilitaire de ligne de commande helm sur votre machine locale. Helm fournit un script qui gère le processus d’installation sur MacOS, Windows ou Linux.

      Entrez dans un répertoire inscriptible et téléchargez le script depuis le référentiel GitHub de Helm :

      • cd /tmp
      • curl -fsSL -o get_helm.sh https://raw.githubusercontent.com/helm/helm/master/scripts/get-helm-3

      Rendez le script exécutable avec chmod :

      Vous pouvez utiliser votre éditeur de texte préféré pour ouvrir le script et l’inspecter, afin de vous assurer qu’il est sûr. Lorsque vous êtes satisfait, exécutez-le :

      Votre mot de passe peut vous être demandé. Saisissez-le et appuyez sur ENTER pour continuer.

      La sortie finale ressemblera à ceci :

      Output

      Downloading https://get.helm.sh/helm-v3.1.2-linux-amd64.tar.gz Preparing to install helm into /usr/local/bin helm installed into /usr/local/bin/helm

      Maintenant que vous avez installé Helm, vous êtes prêt à utiliser Helm pour installer votre premier tableau.

      Étape 2 — Installation d’un tableau Helm

      Les packages logiciels Helm sont appelés des tableaux. Il existe un référentiel de tableaux conservé, appelé stable, composé principalement de tableaux communs, que vous pouvez voir dans leur référentiel GitHub. Helm n’est pas préconfiguré pour cela, vous devrez donc l’ajouter manuellement. Ensuite, à titre d’exemple, vous allez installer le tableau de bord Kubernetes.

      Ajoutez le référentiel stable en exécutant :

      • helm repo add stable https://kubernetes-charts.storage.googleapis.com

      Le résultat sera :

      Output

      "stable" has been added to your repositories

      Ensuite, utilisez helm pour installer le package kubernetes-dashboard à partir du référentiel stable :

      • helm install dashboard-demo stable/kubernetes-dashboard --set rbac.clusterAdminRole=true

      Le paramètre --set vous permet de personnaliser les variables de tableaux, que le tableau affiche pour vous permettre de personnaliser sa configuration. Ici, vous définissez la variable d’application rbac.clusterAdminRole sur true pour donner l’accès à votre cluster entier au tableau de bord Kubernetes.

      La sortie ressemblera à :

      Output

      NAME: dashboard-demo LAST DEPLOYED: Tue Mar 31 15:04:19 2020 NAMESPACE: default STATUS: deployed REVISION: 1 TEST SUITE: None NOTES: ...

      Notez la ligne NAME, surlignée dans l’exemple de sortie ci-dessus. Dans ce cas, vous avez spécifié le nom dashboard-demo. C’est le nom de la version. Une version Helm est un simple déploiement d’un tableau avec une configuration spécifique. Vous pouvez déployer plusieurs versions du même tableau, chacune ayant sa propre configuration.

      Vous pouvez énumérer toutes les versions dans le cluster :

      Le résultat sera similaire à celui-ci :

      Output

      NAME NAMESPACE REVISION UPDATED STATUS CHART APP VERSION dashboard-demo default 1 2020-03-31 15:04:19.324774799 +0000 UTC deployed kubernetes-dashboard-1.10.1 1.10.1

      Vous pouvez maintenant utiliser kubectl pour vérifier qu’un nouveau service a été déployé sur le cluster :

      La sortie finale ressemblera à ceci :

      Output

      NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE dashboard-demo-kubernetes-dashboard ClusterIP 10.245.115.214 <none> 443/TCP 4m44s kubernetes ClusterIP 10.245.0.1 <none> 443/TCP 19m

      Notez que par défaut, le nom de service correspondant à la version est une combinaison du nom de la version Helm et du nom du tableau.

      Maintenant que vous avez déployé l’application, vous utiliserez Helm pour modifier sa configuration et mettre à jour le déploiement.

      Étape 3 — Mise à jour d’une version

      La commande helm upgrade peut être utilisée pour mettre à niveau une version avec un nouveau tableau ou un tableau mis à jour, ou pour mettre à jour ses options de configuration (variables).

      Vous allez apporter une simple modification à la version dashboard-demo pour démontrer le processus de mise à jour et de démantèlement : vous allez mettre à jour le nom du service du tableau de bord en kubernetes-dashboard, au lieu de dashboard-demo-kubernetes-dashboard.

      Le tableau kubernetes-dashboard fournit une option de configuration fullnameOverride pour contrôler le nom du service. Pour renommer la version, exécutez helm upgrade avec ce jeu d’options :

      • helm upgrade dashboard-demo stable/kubernetes-dashboard --set fullnameOverride="kubernetes-dashboard" --reuse-values

      En passant l’argument --reuse values, vous vous assurez que les variables de tableau que vous avez précédemment définies ne seront pas réinitialisées par le processus de mise à niveau.

      Vous verrez une sortie semblable à l’étape initiale d'installation de helm.

      Vérifiez si vos services Kubernetes reflètent les valeurs mises à jour :

      La sortie ressemblera à ce qui suit :

      Output

      NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE kubernetes ClusterIP 10.245.0.1 <none> 443/TCP 38m kubernetes-dashboard ClusterIP 10.245.49.157 <none> 443/TCP 8s

      Notez que le nom du service a été mis à jour avec la nouvelle valeur.

      Remarque : à ce stade, vous pouvez charger le tableau de bord Kubernetes dans votre navigateur et le consulter. Pour ce faire, exécutez d’abord la commande suivante :

      Cela crée un proxy qui vous permet d’accéder aux ressources de cluster à distance depuis votre ordinateur local. En fonction des instructions précédentes, votre service de tableau de bord est nommé kubernetes-dashboard et il fonctionne dans le namespace par default. Vous pouvez maintenant accéder au tableau de bord grâce à l’URL suivante :

      http://localhost:8001/api/v1/namespaces/default/services/https:kubernetes-dashboard:https/proxy/
      

      Les instructions pour l’utilisation effective du tableau de bord sont hors sujet pour ce tutoriel, mais vous pouvez consulter les documents officiels du tableau de bord Kubernetes pour plus d’informations.

      Ensuite, vous verrez la capacité de Helm à revenir en arrière et à supprimer les versions.

      Étape 4 — Retour en arrière et suppression d’une version

      Lorsque vous avez mis à jour la version dashboard-demo à l’étape précédente, vous avez créé une deuxième révision de la version. Helm conserve tous les détails des versions précédentes si vous devez revenir sur une configuration ou un tableau précédents.

      Utilisez helm list pour inspecter à nouveau la version :

      Vous verrez la sortie suivante :

      Output

      NAME REVISION UPDATED STATUS CHART NAMESPACE dashboard-demo 2 Wed Aug 8 20:13:15 2018 DEPLOYED kubernetes-dashboard-0.7.1 default

      La colonne REVISION vous indique que c’est maintenant la deuxième révision.

      Utilisez helm rollback pour revenir à la première révision :

      • helm rollback dashboard-demo 1

      Vous devriez voir la sortie suivante, indiquant que le retour en arrière a réussi :

      Output

      Rollback was a success! Happy Helming!

      À ce stade, si vous lancez à nouveau kubectl get services, vous remarquerez que le nom du service est revenu à sa valeur précédente. Helm a re-deployé l’application avec la configuration de révision 1.

      Les versions Helm peuvent être supprimées avec la commande helm delete :

      • helm delete dashboard-demo

      Le résultat sera :

      Output

      release "dashboard-demo" uninstalled

      Vous pouvez essayer de lister les versions de Helm :

      Vous verrez qu’il n’y en a pas :

      Output

      NAME NAMESPACE REVISION UPDATED STATUS CHART APP VERSION

      Maintenant, la version a été réellement supprimée, et vous pouvez réutiliser le nom de la version.

      Conclusion

      Dans ce tutoriel, vous avez installé l’outil de ligne de commande de helm et étudié l’installation, la mise à niveau, le retour en arrière et la suppression des tableaux de bord et des versions de Helm en gérant le tableau kubernetes-dashboard. 

      Pour plus d’informations sur Helm et les tableaux de Helm, veuillez consulter la documentation officielle de Helm.



      Source link

      Installieren des OpenLiteSpeed Web-Servers unter Ubuntu 18.04


      Einführung

      OpenLiteSpeed ist ein optimierter Open-Source-Webserver, der zur Verwaltung und Bereitstellung von Websites verwendet werden kann. OpenLiteSpeed verfügt über einige nützliche Funktionen, die ihn zu einer soliden Wahl für viele Installationen machen: Apache-kompatible Neuschreibregeln, eine integrierte webbasierte Verwaltungsoberfläche und eine angepasste, für den Server optimierte PHP-Verarbeitung.

      In diesem Leitfaden zeigen wir Ihnen, wie Sie OpenLiteSpeed auf einem Ubuntu 18.04 Server installieren und konfigurieren.

      Voraussetzungen

      Um dieses Tutorial zu absolvieren, benötigen Sie einen Ubuntu 18.04-Server mit einem sudo-fähigen non-root user und aktivierter ufw Firewall.

      Anweisungen zur Erfüllung dieser Anforderungen finden Sie in unserem Tutorial Ersteinrichtung des Servers mit Ubuntu 18.04.

      Schritt 1 – Installieren von OpenLiteSpeed

      OpenLiteSpeed bietet ein Software-Repository, das wir zum Herunterladen und Installieren des Servers mit dem Standardbefehl apt von Ubuntu verwenden können.

      Um dieses Repository für Ihr Ubuntu-System zu aktivieren, laden Sie zunächst den Software-Signaturschlüssel des Entwicklers herunter:

      • wget -qO - https://rpms.litespeedtech.com/debian/lst_repo.gpg | sudo apt-key add -

      Dieser Schlüssel wird zur kryptographischen Verifizierung verwendet, dass die Software, die wir herunterladen möchten, nicht manipuliert wurde.

      Als Nächstes fügen wir die Informationen des Repository in unser System ein:

      • sudo add-apt-repository 'deb http://rpms.litespeedtech.com/debian/ bionic main'

      Nachdem das Repository hinzugefügt wurde, wird unsere Paket-Cache mit dem Befehl add-apt-repository aktualisiert und die neue Software kann installiert werden.

      Installieren Sie den OpenLiteSpeed-Server und seinen PHP-Prozessor mit apt install:

      • sudo apt install openlitespeed lsphp73

      Erstellen Sie abschließend einen Softlink zu dem PHP-Prozessor, den wir gerade installiert haben. Dadurch wird der OpenLiteSpeed-Server zur Verwendung der richtigen Version angewiesen:

      • sudo ln -sf /usr/local/lsws/lsphp73/bin/lsphp /usr/local/lsws/fcgi-bin/lsphp5

      Nachdem nun der OpenLiteSpeed-Server installiert ist, sichern wir ihn durch die Aktualisierung des Standardkontos admin.

      Schritt 2 – Festlegen des administrativen Passworts

      Bevor wir den Server testen, sollten wir ein neues administratives Passwort für OpenLiteSpeed festlegen. Standardmäßig ist das Passwort auf 123456 festgelegt, sodass wir dies sofort ändern sollten. Dies können wir tun, indem wir ein von OpenLiteSpeed bereitgestelltes Skript ausführen:

      • sudo /usr/local/lsws/admin/misc/admpass.sh

      Sie werden aufgefordert, einen Benutzernamen für den administrativen Benutzer anzugeben. Wenn Sie die Eingabetaste drücken, ohne einen neuen Benutzernamen zu wählen, wird die Standardeinstellung von admin verwendet. Dann werden Sie aufgefordert, ein neues Passwort für das Konto zu erstellen und zu bestätigen. Tun Sie dies und drücken Sie dann ein letztes Mal die Eingabetaste. Das Skript wird eine erfolgreiche Aktualisierung bestätigen:

      Output

      Administrator's username/password is updated successfully!

      Nachdem wir nun das Konto admin gesichert haben, testen wir den Server und stellen sicher, dass er einwandfrei läuft.

      Schritt 3 – Starten und Verbinden mit dem Server

      OpenLiteSpeed sollte nach der Installation automatisch gestartet werden. Wir können dies mit dem Befehl lswsctrl überprüfen:

      • sudo /usr/local/lsws/bin/lswsctrl status

      Output

      litespeed is running with PID 990.

      Wenn Sie keine ähnliche Meldung sehen, können Sie den Server mit lswsctrl starten:

      • sudo /usr/local/lsws/bin/lswsctrl start

      Output

      [OK] litespeed: pid=5137.

      Der Server sollte nun laufen. Bevor wir ihn in unserem Browser besuchen können, müssen wir einige Ports in unserer Firewall öffnen. Wir tun dies mit dem Befehl ufw:

      • sudo ufw allow 8088
      • sudo ufw allow 7080

      Der erste Port, 8088, ist der Standardport für die Beispielseite von OpenLiteSpeed. Er sollte nun für die Öffentlichkeit zugänglich sein. Navigieren Sie in Ihrem Webbrowser zu dem Domänennamen oder der IP-Adresse Ihres Servers gefolgt von :8088, um den Port anzugeben:

      http://server_domain_or_IP:8088
      

      Ihr Browser sollte die Standardseite von OpenLiteSpeed laden, die wie folgt aussieht:

      Screenshot der Standard-Demoseite von OpenLiteSpeed

      Die Links am Ende der Seite sollen verschiedene Funktionen des Servers demonstrieren. Wenn Sie diese nacheinander anklicken, werden Sie feststellen, dass diese Funktionen bereits installiert und richtig konfiguriert sind. So ist zum Beispiel ein CGI-Beispielskript verfügbar, eine angepasste PHP-Instanz wird ausgeführt und benutzerdefinierte Fehlerseiten und Authentifizierungsgates sind konfiguriert. Klicken Sie herum, um sich ein wenig umzusehen.

      Wenn Sie mit der Standardseite zufrieden sind, können Sie zu der administrativen Oberfläche übergehen. Navigieren Sie in Ihrem Webbrowser unter Verwendung von HTTPS zu dem Domänennamen oder der IP-Adresse Ihres Servers gefolgt von :7080, um den Port anzugeben:

      https://server_domain_or_IP:7080
      

      Sie werden wahrscheinlich eine Seite mit einer Warnung sehen, dass das SSL-Zertifikat von dem Server nicht validiert werden kann. Da es sich um ein selbstsigniertes Zertifikat handelt, ist dies zu erwarten. Klicken Sie durch die verfügbaren Optionen, um zu der Website zu gelangen. In Chrome müssen Sie auf „Erweitert“ und dann auf „Weiter zu…“ klicken.

      Sie werden aufgefordert, den administrativen Benutzernamen und das Passwort einzugeben, die Sie im vorherigen Schritt mit dem Skript admpass.sh ausgewählt haben:

      Screenshot der OpenLiteSpeed Admin-Anmeldeseite

      Sobald Sie sich korrekt authentifiziert haben, wird Ihnen die Administrationsoberfläche von OpenLiteSpeed angezeigt:

      Screenshot des OpenLiteSpeed Admin-Dashboards

      Hier findet der Großteil Ihrer Konfiguration für den Webserver statt.

      Als Nächstes erkunden wir diese Oberfläche, indem wir eine allgemeine Konfigurationsaufgabe durchgehen: die Aktualisierung des von der Standardseite verwendeten Ports.

      Schritt 4 – Ändern des Ports für die Standardseite

      Um die Konfiguration von Optionen über die Weboberfläche zu demonstrieren, werden wir den Port, den die Standardseite verwendet, von 8088 auf den herkömmlichen HTTP-Port 80 ändern.

      Um dies zu erreichen, klicken Sie zunächst in der Liste der Optionen auf der linken Seite der Oberfläche auf Listeners. Eine Liste aller verfügbaren Listener wird geladen.

      Klicken Sie in der Liste der Listener auf die Schaltfläche „Anzeigen/Bearbeiten“ für den Listener Default:

      Screenshot der Zusammenfassung der Listeners von OpenLiteSpeed

      Dadurch wird eine Seite mit weiteren Einzelheiten über den Listener Default geladen. Klicken Sie in der oberen rechten Ecke der Tabelle „Address Settings“ auf die Schaltfläche „Bearbeiten“, um ihre Werte zu ändern:

      Screenshot der Listener Detailseite von OpenLiteSpeed

      Ändern Sie auf dem nächsten Bildschirm Port 8088 in Port 80 und klicken Sie anschließend auf das Diskettensymbol Save:

      Screenshot der Aktualisierungsoberfläche für Listener von OpenLiteSpeed

      Nach der Änderung müssen Sie den Server neu starten. Klicken Sie auf das Pfeilsymbol „Neu laden“, um OpenLiteSpeed neu zu starten:

      Schaltfläche „Unterbrechungsfreier Neustart“

      Zusätzlich müssen Sie nun Port 80 in Ihrer Firewall öffnen:

      Die Standard-Webseite sollte nun in Ihrem Browser auf Port 80 anstatt Port 8088 zugänglich sein. Wenn Sie den Domänennamen oder die IP-Adresse Ihres Servers aufrufen, ohne eine Port-Nummer anzugeben, wird nun die Website angezeigt.

      Zusammenfassung

      OpenLiteSpeed ist ein mit allen Funktionen ausgestatteter Webserver, der in erster Linie über die administrative Weboberfläche verwaltet wird. Ein vollständiger Überblick darüber, wie Sie Ihre Website über diese Oberfläche konfigurieren können, liegt außerhalb des Rahmens dieses Leitfadens.

      Um Ihnen den Einstieg zu erleichtern, werden wir jedoch im Folgenden auf einige wichtige Punkte eingehen:

      • Alles im Zusammenhang mit OpenLiteSpeed finden Sie unter dem Verzeichnis /usr/local/lsws.
      • Der Dokumentenstamm (von dem aus Ihre Dateien bereitgestellt werden) für den standardmäßigen virtuellen Host befindet sich unter /usr/local/lsws/DEFAULT/html. Die Konfiguration und die Protokolle für diesen virtuellen Host finden Sie unter dem Verzeichnis /usr/local/lsws/DEFAULT.
      • Sie können mit der Admin-Oberfläche neue virtuelle Hosts für verschiedene Websites erstellen. Alle Verzeichnisse, auf die Sie bei der Einrichtung Ihrer Konfiguration verweisen, müssen jedoch zuvor auf Ihrem Server angelegt werden. OpenLiteSpeed kann die Verzeichnisse nicht erstellen.
      • Sie können Virtual Host-Vorlagen für virtuelle Hosts einrichten, die das gleiche allgemeine Format besitzen.
      • Häufig ist es am einfachsten, die Verzeichnisstruktur und Konfiguration des standardmäßigen virtuellen Hosts zu kopieren, um sie als Ausgangspunkt für neue Konfigurationen zu verwenden.
      • Die Admin-Oberfläche verfügt über ein integriertes Tooltip-Hilfesystem für fast alle Felder. Im linken Menü gibt es auch eine Help-Menüoption, die auf die Serverdokumentation verweist.  Konsultieren Sie diese Informationen während der Konfiguration, wenn Sie weitere Hilfe benötigen.
      • Weitere Information zur Sicherung Ihrer OpenLiteSpeed-Installation mit HTTPS finden Sie im Abschnitt SSL-Einrichtung der offiziellen Dokumentation.

      Jetzt sollten OpenLiteSpeed und PHP auf einem Ubuntu 18.04-Server installiert sein und ausgeführt werden. OpenLiteSpeed bietet hervorragende Leistung, eine webbasierte Konfigurationsoberfläche und vorab konfigurierte Optionen für die Skriptverarbeitung.



      Source link