Une introduction rapide à React.js

React permet la création de sites Web dynamiques entièrement rendus dans le navigateur. Son élément central est JSX, une syntaxe ressemblant à HTML et XML.

Language	Full Form	Use	Tags
HTML	Hyper Text Markup Language	Website Development	Predefined tags (e.g., H1, H2, P)
XML	Extensible Markup Language	Data Structuring	Customizable Tags
JSX	JavaScript XML	Combines HTML and JavaScript	HTML & Custom Tags

Exemples illustratifs

HTML

<code class="language-html"><div>
  <h1>This is heading 1</h1>
  <p>This is an example paragraph in HTML</p>
</div></code>

XML

<code class="language-xml"><example><title>XML Example
  <note>This is a note</note><data1>Example Data</data1><data2>Example Data</data2></title></example></code>

JSX

<code class="language-javascript">function ExampleReactComponent() {
  return (
    <div>
      <h1>This is heading 1</h1>
      <p>This is an example paragraph in JSX</p>
    </div>
  );
}</code>

La similitude entre HTML, XML et JSX est évidente. JSX intègre de manière unique le HTML dans JavaScript, d'où son nom : JavaScript XML.

Cette fusion de HTML et JavaScript permet une manipulation HTML dynamique. Par exemple, un clic sur un bouton pourrait faire basculer le nom d'une classe.

Composants React

React facilite la définition de composants personnalisés qui renvoient JSX. Essentiellement, un composant React est une fonction JavaScript générant du JSX.

Lors du rendu d'un composant React racine, JSX est automatiquement converti en HTML et intégré à la page Web. React permet de créer des composants personnalisés (semblables à des balises personnalisées) à inclure dans d'autres composants.

Voici un composant utilisant le ExampleReactComponent :

<code class="language-javascript">function RootReactComponent() {
  return (
    <div>
      <h1>This is the main Component</h1>
      <ExampleReactComponent />
    </div>
  );
}</code>

Accessoires

Semblables aux attributs HTML, les composants React utilisent des accessoires.

<code class="language-javascript">function PropsExample(props) {
  console.log(props); // Prints { exampleValue: "example-value" }
  return (
    <div>
      <h1>Props Example</h1>
      {props.exampleValue}
    </div>
  );
}

function MainComponent() {
  return (
    <div>
      <h1>This is the Main Component</h1>
      <PropsExample exampleValue={"example-value"} />
    </div>
  );
}</code>

Le rendu MainComponent invoque PropsExample avec { exampleValue: "example-value" } comme argument props. Notez que les variables JavaScript sont intégrées dans JSX à l'aide de {}.

État

Les données sont généralement stockées dans des variables pour être affichées. React utilise « l'état » pour la gestion des données, agissant comme un mécanisme getter/setter. Lorsque l'état est modifié, React met automatiquement à jour le HTML du composant.

Cet exemple montre les mises à jour HTML automatiques lors des changements d'état :

<code class="language-javascript">import { useState } from 'react';

function IncrementDecrement() {
  const [value, setValue] = useState(0); // Initial value: 0

  function increment(e) {
    setValue(value + 1);
  }

  function decrement(e) {
    setValue(value - 1);
  }

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      {value}
    </div>
  );
}</code>

Créer des applications React avec Vite

Des outils comme Vite rationalisent le regroupement des composants React et JSX dans du JavaScript exécutable par navigateur.

Pour lancer un projet React :

<code class="language-bash">npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev</code>

Conclusion

Cette introduction à React.js fournit une compréhension fondamentale. Après avoir configuré un projet Vite, essayez de créer des composants React pour approfondir votre compréhension. D’autres ressources d’apprentissage sont disponibles sur https://www.php.cn/link/27a5eaafdb88c45dd61732d6a6493421.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!