furcata_react_base v1.0.0
Furcata React
Table des Matières
Furcata React
Ce projet est le frontend d'une application React qui utilise Wagtail comme CMS. Le code frontend est situé dans le dossier frontend_react
.
Structure des Fichiers
- Le fichier
base.js
situé dansfrontend_react/static/js
est le composantApp
principal et la racine du frontend. Le dossier
basePage
dansfrontend_react/static/js
contient tous les composants disponibles pour l'utilisateur à utiliser via Wagtail. Les composants obligatoires sont le menu et le pied de page.Les autres composants disponibles sont : - HeadingBlock - TextBlock - ImageBlock - VideoBlock - WhiteSpaceBlock - BannerBlock - LogoGridBlock - LargeCarousel - ButtonBlock
Chaque composant est situé dans un dossier séparé sous
frontend_react/static/js/components
.Chaque composant est composé d'au moins 2 fichiers : -
blockName.js
: Le fichierBlock
est l'index du composant. -blockNameElements.js
: Le fichierElements
contient le style associé au bloc.Lorsqu'un composant contient des actions ou des animations : -
blockNameComponents.js
: Appelation pour le fichier de sous composants si l'élément racine est trop complexe -blockNameControler.js
: Les actions associées à notre composants
Bloc
Pour utiliser le composant Block
, suivez la syntaxe ci-dessous :
"use strict";
import {
BlockContainer,
BlockImage,
BlockText,
} from "./BlockElements";
const Block = ({ value }) => {
return (
<BlockContainer>
<BlockImage />
<BlockText />
</BlockContainer>
);
};
export default Block;
- Le composant BlockContainer est un conteneur qui contient les composants BlockImage et BlockText.
- Le composant BlockImage est un espace réservé pour l'image qui sera affichée dans le BlockContainer.
- Le composant BlockText est un espace réservé pour le texte qui sera affiché dans le BlockContainer.
- Le composant Block accepte une prop
value
, qui peut être utilisée pour transmettre des données au composant.
Utilisation
Pour utiliser le composant Block, importez-le simplement dans votre composant React et faites-le rendre comme suit :
import Block from "./Block";
function MyComponent() {
return (
<div>
<Block value="example" />
</div>
);
}
Style
Le style des composants doit être dynamique (couleur, fonts, etc.)
Utilisez color.js dans frontend_react/static/js/components/styling/colors.js
et frontend_react/static/js/components/styling/generalStyling.js
export const Colors = {
primary: {
solid: "rgba(199, 200, 221, 1)",
},
secondary: {
solid: "rgba(49, 50, 56, 1)",
},
accent: {
solid: "rgba(88, 121, 157, 1)",
},
colorA: {
solid: "rgba(0, 0, 0, 1)",
},
colorB: {
solid: "rgba(255, 255, 255, 1)",
},
};
Le style pour le composant Block peut être trouvé dans le fichier BlockElements.js.
'use strict'
import { Colors } from "../colors";
export const blockContainer = styled.div`
color: ${Colors.secondary.solid};
`
Utilisation de la fonction transparence
dans colors.js
Vous pouvez utiliser la fonction transparence
pour générer des valeurs CSS avec une opacité spécifiée. Voici comment l'intégrer avec votre exemple de couleurs :
import { Colors } from "../colors";
import { transparence } from './chemin-vers-transparence';
export const CompleteButtonBlockLink = styled(ButtonBlockLink)`
color: ${Colors.primary.solid};
background-color: ${transparence(Colors.secondary.solid, 20)}; /* Exemple avec 20% d'opacité */
&:hover {
color: ${Colors.secondary.solid};
background-color: ${Colors.accent.solid};
}
`;
## StyleProvider et Utilisation des Styles
Pour une gestion dynamique des styles (couleurs, polices, etc.) dans votre application, nous utilisons le `StyleProvider` pour fournir un contexte de style partagé à tous les composants.
### StyleProvider
Le `StyleProvider` est un composant qui enveloppe toute votre application React pour fournir un contexte de style partagé. Il est configuré dans le fichier `StyleProvider.js` et peut être utilisé comme suit dans votre application :
```javascript
import { StyleProvider } from "./StyleProvider";
const App = () => {
return (
<StyleProvider>
{/* Notre app */}
</StyleProvider>
);
};
Utilisation des Couleurs
Pour utiliser les couleurs définies dans le fichier colors.js
, vous pouvez simplement accéder aux propriétés de l'objet style.colors
. Par exemple :
import styled from "styled-components";
import { useStyle } from "chemin-vers-votre-style-context"; // Assurez-vous d'importer depuis le chemin correct
const style = useStyle(); // Utilisez useStyle pour obtenir le thème et les styles
export const ButtonBlockLink = styled.a`
padding: ${buttonPadding.width} ${buttonPadding.height};
font-family: ${style.fonts.primary.family}; // Utilisez le style du contexte
font-weight: 400;
font-size: 1.2rem;
border-radius: 50px;
transition: all 0.3s ease-in-out;
`;
7 months ago