✂️ Snippets React pour VS Code
Cette extension VS Code fournit des snippets React/ReactJS pour accélérer votre développement.
🛠️ Installation
- Ouvrez VS Code
- Appuyez sur
Ctrl+P/Cmd+P - Tapez
ext install dsznajder.es7-react-js-snippets
📘 Snippets disponibles
📘 Composants React
| Snippet | Description |
|---|---|
rfc→ | Crée un composant fonctionnel |
rfce→ | Crée un composant fonctionnel avec export |
rcc→ | Crée une classe composant |
// rfc
function MonComposant() {
return (
<div>
</div>
)
}
// rfce
function MonComposant() {
return (
<div>
</div>
)
}
export default MonComposant
// rcc
class MonComposant extends React.Component {
render() {
return (
<div>
</div>
)
}
}📘 Hooks React
| Snippet | Description |
|---|---|
useS→ | useState Hook |
useE→ | useEffect Hook |
useR→ | useRef Hook |
// useState
const [compteur, setCompteur] = useState(0)
// useEffect
useEffect(() => {
// Code à exécuter
}, [])
// useRef
const monRef = useRef(null)📘 Props & State
| Snippet | Description |
|---|---|
pts→ | PropTypes String |
ptn→ | PropTypes Number |
ptf→ | PropTypes Func |
MonComposant.propTypes = {
nom: PropTypes.string,
age: PropTypes.number,
onClick: PropTypes.func,
}📘 Import/Export
| Snippet | Description |
|---|---|
imp→ | import |
exp→ | export |
import { Component } from 'react'
export default ComponentTooling
Terminez le quiz du chapitre pour le marquer comme complété.
🧩 PropTypes React
React PropTypes est un mécanisme de validation des props dans React qui permet de vérifier le type des données passées aux composants.
💅 Styled Components
Styled Components est une bibliothèque qui permet d'écrire du CSS dans du JavaScript en utilisant les tagged templates literals. Cette approche permet de créer des composants React