Réagir au concept de base

React est une bibliothèque JavaScript frontale créée par Facebook. Il suit une approche basée sur les composants qui aide à créer des éléments d'interface utilisateur réutilisables.

1. JSX en réaction

Habituellement JSXjuste du sucre syntaxique pourReact.createElement(component, props, ...children)

Le JSXcode :

<div>My Name is Hossain</div>

React.createElement("div", null, "My Name is Hossain");

Nous pouvons passer n'importe quelle expression javascript dans les accessoires avec {}. En suivant l'exemple ci-dessous :

<Component sum={5 + 9 + 1} />

3. Littéraux de chaîne

Nous pouvons passer une chaîne comme accessoire. là deux expressions JSX sont équivalentes. identique à l'attribut HTML.

<Component name="Hossain" />
<Component name={'Hossain'} />

Nous pouvons déjà avoir des props en tant qu'objet, et nous sommes allés passer des props dans JSX. nous pouvons utiliser ...l'opérateur "spread" pour passer un objet props.

const App = () => {
  const props = {name: 'Hossain', age: 20};
  
  return <Person {...props} />
}

Vous pouvez transmettre plus de JSX en tant qu'enfants props.childrenou Afficher le composant imbriqué comme HTML.

<Container>
  <App1 />
  <App2 />
</Container>

defaultPropspeut être défini comme propriété dans le classcomposant. il définit les accessoires par défaut dans le fichier class. Ceci est utilisé pour undefindmais pas utilisénull

class Container extends React.Component {
  // ...
}
Container.defaultProps = {
  color: 'red'
};

Si vous n'êtes pas sûr que votre processus de construction soit actuellement configuré, vous pouvez installer React Developer Tools pour Chrome . Si vous visitez votre site avec l'ambiance de production React, vous pouvez voir que la couleur d'arrière-plan des outils de développement React est sombre. mais votre site est d'humeur de développement, vous pouvez voir que la couleur d'arrière-plan de React Developer Tools est rouge. si vous construisez votre site avec create-react-app, vous pouvez envoyer cette recommandation :

npm run build
or 
yarn build

Jusqu'à présent, nous pouvons utiliser des données statiques, mais lorsque les données changent pour un changement d'état, nous pouvons utiliser useStatele formulaire React hooks. coulant l'exemple soufflé: useStateest une fonction. Sa valeur par défaut de la countvaleur. si setCount()changer de statevaleur. countla valeur change.

const App = () => {
  [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(count + 1)
  }
  
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

Dans JSX possible d'utiliser l'opérateur ternaire pour le rendu conditionnel.

<div>{name ? name : 'What is your name?'}</div>

La gestion des événements dans l'élément de réaction est très similaire à la gestion des événements dans l'élément DOM. il y a quelques différences de syntaxe

• Le nom de l'élément React utilise camelCase.
• Avec JSX, vous pouvez transmettre une fonction en tant que gestionnaire d'événements, plutôt qu'une chaîne.

<button onClick={() => console.log('Clicked me')}>
    Click me
</button>