Ce que j'aurais aimé savoir quand j'ai commencé avec React

Leçons de 3 ans de développement de React

Quand j'ai plongé pour la première fois dans React, j'avais l'impression d'ouvrir la boîte de Pandore. Il y avait tellement de choses à apprendre, et en cours de route, j'ai rencontré beaucoup de « Aha ! instants. Voici 10 choses que j'aurais aimé savoir quand j'ai commencé, pour vous aider à éviter quelques ralentisseurs dans votre parcours React.

1. Les composants ne sont que des fonctions

La réalisation la plus importante ? Les composants React ne sont que des fonctions JavaScript. Vous transmettez des accessoires comme arguments, et ils renvoient JSX, qui ressemble à du HTML mais ne l'est pas. Une fois que vous pensez aux composants de cette façon, comprendre des concepts tels que les accessoires et l'état devient beaucoup plus simple.

const MyComponent = (props) => {
  return <h1>{props.title}</h1>;
};

2. L'état et les accessoires sont différents

Cela peut sembler basique maintenant, mais au début, la différence entre les accessoires et l'état n'était pas évidente pour moi. Voici un petit rappel :

• Les Props sont externes et immuables (données que vous transmettez au composant).
• L'état est interne et mutable (géré au sein du composant).

En cas de doute : si les données proviennent du parent, ce sont des accessoires. Si les données résident à l’intérieur du composant, c’est l’état.

3. Les crochets changent la donne

Lorsque React a introduit les hooks, cela a changé la donne. Au lieu de jongler avec les méthodes de cycle de vie, vous pouvez désormais gérer facilement l’état et les effets secondaires à l’aide de hooks comme useState et useEffect. J'aurais aimé savoir à quel point ces hooks pouvaient créer mon code puissant et simple dès le début.

const [count, setCount] = useState(0);
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

4. Comprendre le DOM virtuel

Je n’ai compris pleinement comment fonctionnait le DOM virtuel de React que plus tard, et c’était une erreur. L'efficacité de React vient de la mise à jour directe du DOM virtuel au lieu du DOM réel. En différenciant les modifications, React ne met à jour que ce qui est nécessaire, ce qui rend vos applications rapides.

5. Composition des composants par héritage

React privilégie la composition des composants (imbrication des composants les uns dans les autres) plutôt que l'héritage basé sur les classes. Si vous devez réutiliser la logique entre les composants, il est préférable de l'extraire dans des composants réutilisables ou des hooks personnalisés plutôt que d'utiliser l'héritage.

const Greeting = ({name}) => <h1>Hello, {name}!</h1>;
const Page = () => <Greeting name="John" />;

6. Gérer l'État est un art

À mesure que votre application se développe, la gestion de l'état devient délicate. L'état des composants locaux fonctionne bien pour les petites applications, mais pour les plus grandes, des outils comme l'API Context ou des bibliothèques comme Redux aident à gérer l'état dans l'ensemble de votre application. J'ai commencé avec Redux trop tôt, mais je sais maintenant quand m'appuyer sur des solutions plus simples comme useContext ou useReducer avant d'introduire des outils plus lourds.

const MyContext = React.createContext();
const App = () => {
  return (
    <MyContext.Provider value={/* some value */}>
      <ComponentA />
    </MyContext.Provider>
  );
};

7. TypeScript en vaut la peine

Si vous travaillez sur des bases de code plus volumineuses, l'adoption de TypeScript vaut la courbe d'apprentissage. Il peut prévenir les bogues plus tôt en appliquant des types et facilite la collaboration avec d’autres développeurs. J'ai eu du mal avec TypeScript au début, mais une fois que je l'ai adopté, mon code React est devenu beaucoup plus robuste.

interface Props {
  title: string;
}
const MyComponent: React.FC<Props> = ({ title }) => {
  return <h1>{title}</h1>;
};

8. CSS-in-JS pour le style étendu

Quand j'ai commencé, je luttais contre des styles mondiaux qui s'affrontaient les uns avec les autres. Les bibliothèques CSS-in-JS comme styled-components ou Emotion ont changé la donne pour moi en autorisant des styles étendus qui cohabitent avec la logique des composants.

import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  padding: 10px;
`;

const App = () => <Button>Click Me</Button>;

9. Les tests sont plus faciles que vous ne le pensez

Tester les composants React était intimidant, mais des outils comme React Testing Library et Jest facilitent la tâche. Écrivez des tests pour les composants importants pour vous assurer qu'ils se comportent comme prévu, et vous vous remercierez plus tard.

import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders the title', () => {
  const { getByText } = render(<MyComponent title="Hello" />);
  expect(getByText(/Hello/i)).toBeInTheDocument();
});

10. L'optimisation compte

À mesure que votre application évolue, vous souhaiterez l’optimiser en termes de performances. Des techniques telles que la mémorisation (React.memo), le chargement paresseux de composants (React.lazy) et le fractionnement du code (React.Suspense) peuvent considérablement améliorer l'expérience utilisateur. Au début, la performance n’était pas une priorité pour moi, mais elle devrait l’être pour vous !

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => (
  <React.Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </React.Suspense>
);

Pensées finales

React est un outil incroyable pour créer des interfaces utilisateur dynamiques, mais comme toute technologie, il s'accompagne d'une courbe d'apprentissage. Adoptez les bases et n’hésitez pas à explorer des concepts avancés. Plus important encore, continuez à construire !

Ce sont les 10 choses que j’aurais aimé savoir dès le début. Espérons qu'ils vous feront gagner du temps et de la frustration lors de votre parcours React.

---

Cela vous a-t-il aidé ? Déposez un commentaire ou partagez vos propres conseils React ci-dessous !

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!