7 conseils et astuces dans React

Utiliser TypeScript

Qu'il s'agisse de react ou d'autres bibliothèques, l'utilisation de Typescript sera d'une grande aide pour garder votre code Organisé. Comparons les éléments suivants Javascript vs Typescript traitant des types d'accessoires.

import PropTypes from 'prop-types'

function UserCard({ utilisateur }) {
return

{prénom.utilisateur}, {nom.utilisateur}

}

UserCard.propTypes = {
user : PropTypes.shape({
firstname : PropTypes.string.isRequired,
nom : PropTypes.string.isRequired
...
})
}

function UserList({ users }) {
return

{users.map((user) => )}

}

UserList.propTypes = {
users : PropTypes.arrayOf(PropTypes.shape({
firstname : PropTypes.string.isRequired,
lastname : PropTypes.string.isRequired
...
}))
}

interface User {
firstname : Chaîne !
lastname : Chaîne !
...
}

function UserCard({ user } : { user : User }) {
return

{prénom.utilisateur}, {nom.utilisateur}

}

function UserList({ users } : { users : User[] }) {
return

{users.map((user) => )}

Imaginez que vous ayez tous vos schémas de données sous forme d'interfaces en un seul endroit et que vous les réutilisiez dans tout le reste de votre code. Cela vous permettra non seulement d'éviter les fautes de frappe, mais aussi, si vous souhaitez modifier le schéma, de ne le faire qu'à un seul endroit.

En outre, de nombreuses bibliothèques javascript bien connues migrent vers Typescript, par exemple : AdonisJS

Séparer les éléments de présentation et les éléments de contenu

La séparation des composants de présentation et de conteneur rend notre code plus facile à tester et à raisonner.

Éléments de présentation sont concernés par l'aspect des choses. Il reçoit son données et comportement des composants parents.

Composants du conteneur sont concernés par comment les choses fonctionnent. Ils fournissent les données et comportement à des éléments de présentation ou à d'autres éléments du conteneur.

Cette approche nous permet de réutiliser les mêmes composants de présentation avec des données et des comportements différents. En outre, elle rend notre code plus propre et beaucoup plus facile à tester.

Regardez l'exemple suivant avec le composant utilisateur qui est utilisé avec différents conteneurs qui fournissent des données et des comportements différents.

function BuyerContainer() {
return
}

function SellerContainer() {
return
}

function UserComponent({ name, onClick }) {
return

}

Utilisez les crochets React et les composants fonctionnels Les composants fonctionnels "appelés auparavant composants sans état" ne sont plus sans état. Grâce aux crochets React, vous pouvez désormais utiliser le crochetState pour stocker l'état dans un composant fonctionnel, ou même utiliser le cycle de vie du composant à l'aide de useEffect. Les composants fonctionnels sont faciles à lire et à tester. Le noyau React dispose d'autres crochets utiles que vous pouvez explorer dans la référence des crochets. Ce qui est étonnant, c'est que vous pouvez également définir vos propres crochets. Dans l'exemple suivant, nous avons créé un hook react personnalisé appelé useDebounce. Il est utilisé pour limiter les appels à l'API d'autocomplétion lorsque le texte saisi change.

import { useEffect } from 'react' ;
import { debounce } from 'lodash' ;
export default function useDebounce( fn, delay = 500 ) {
const debounced = useMemoOne( () => debounce( fn, delay ), [
fn,
delay,
] ) ;
useEffect( () => () => debounced.cancel(), [ debounced ] ) ;
return debounced ;
}
export default fonction SearchComponent()
const fetchAutoComplete = useDebounce((e) => {
      // API Fetch (optionnel)
}, 1000) // 1 sec

return (

{...}
)
}

En outre, les crochets React remplacent avantageusement les composants d'ordre supérieur (HoC). Styled Component Styled Component est une bibliothèque permettant l'introduction de CSS dynamiques au niveau des composants, tout en profitant des avantages d'ES. Il rend vos composants plus prévisibles et réutilisables. Ne perdez plus de temps à chercher le bon nom de classe pour un élément tout en essayant d'éviter d'utiliser une classe existante. Avec les composants stylisés, vous vous assurez que vos styles sont appliqués au composant et que les noms de classe sont générés automatiquement à l'étape de la construction. De plus, il n'a jamais été aussi facile de créer des CSS dynamiques. Vos styles seront générés en fonction des props passés au composant. Dans l'exemple suivant, le style de la div dépend à la fois de l'accessoire défini et du thème global.

const Wrapper = styled.div`

  border : ${props => props.outlined ? '1px solid' : 'none'} ;

    background : ${props => props.theme.light ? 'black' : 'white'}

Le dernier point concernant les composants stylisés est qu'ils améliorent les performances en ne chargeant pas les styles inutiles des composants inutilisés. Slot Fill Library Imaginons que vous ayez défini une mise en page pour votre application react, puis que vous souhaitiez ajouter un widget dans la barre latérale uniquement pour une page spécifique. Si vous n'avez pas envisagé ce cas dès le début, cela peut nécessiter une énorme modification de la mise en page. Mais en utilisant une bibliothèque comme ‣ vous pouvez simplement définir un Slot dans la Sidebar. De cette façon, vous éviterez de passer des drapeaux tout au long de l'arbre des composants pour accéder à la barre latérale. Le comportement est similaire à celui des portails React, ce qui est également une excellente solution pour des cas tels que les modales, les infobulles...

import { Slot, Fill, Provider } from 'react-slot-fill' ;
const Sidebar = (props) =>
 
export default Toolbar ;
Sidebar.Item = (props) =>

{ props.label }
const Widget = () =>
[

] ;
const Page = ({children}) =>

{enfants}

const HomePage = () =>

une page sans Widjet
const DashboardPage = () =>

une page avec Widjet

Composants d'ordre supérieur Même si les crochets React remplacent les HOC dans la plupart des cas. Les HoCs restent un excellent choix pour dissimuler la complexité des composants, comme la fourniture de plusieurs accessoires aux composants de page ou le rendu conditionnel (routes privées, état de chargement...). L'exemple suivant illustre comment nous pouvons encapsuler la complexité des routes privées et des accessoires communs de page dans des HoCs réutilisables appliqués à toutes les pages de l'application. Gardez à l'esprit que la plupart des HoCs peuvent être remplacés par des Hooks React et que nous pouvons par erreur remplacer des props par des HoCs composés. N'utilisez donc les HoC que lorsque cela est nécessaire pour que les composants de la page soient plus propres.

function withPrivateRoute(Component) {
...
return function PrivateRoute(props) {
if (!userConnected) return ;
return ;
} ;
}
function withPageProps(Component) {
...
return function privateRoute(props) {
return ;
} ;
}
function ProfilePage({ navigation, currentPath, currentUser}) {
return
Page de profil
}
export default withPrivateRoute(withPageProps(ProfilePage))

Limites d'erreur Les limites d'erreur sont des composants de classe qui attrapent toutes les erreurs/exceptions lancées au niveau des enfants. Lorsqu'elles sont déclarées au niveau supérieur, elles vous permettent de gérer correctement les erreurs en affichant un message d'erreur et en enregistrant l'erreur dans un outil de surveillance de la plateforme tel que Sentry. De cette façon, vous serez le premier à détecter les erreurs et à essayer de les corriger avant qu'elles n'aient un impact sur l'expérience de l'utilisateur. Note : Les ErrorBoundaries doivent être déclarés dans les classes qui ne supportent pas les composants fonctionnels.

class ErrorBoundary extends React.Component {
constructor(props) {
super(props) ;
this.state = { hasError : false } ;
}
static getDerivedStateFromError(error) {
return { hasError : true } ;
}
componentDidCatch(error, errorInfo) {
logErrorToMySentry(error, errorInfo) ;
}
render() {
if (this.state.hasError) {
return
Quelque chose s'est mal passé ! Contacter l'administrateur
;
}
return this.props.children ;

}
}