Application Pratique du CSS Externe
Pratique de la création d’un composant carte composé de trois composants. L’objectif est d’utiliser différents composants et d’appliquer des styles pour obtenir un rendu visuel attrayant. La réalisation se fera étape par étape.
Avant de commencer, exploration de la fonctionnalité de la prop spéciale children
, qui permet de transmettre des composants, des éléments ou du texte en tant qu’éléments enfants. Fonctionnement illustré ci-dessous :
const App = () => (
<Container>
<Notification />
<Message />
</Container>
);
Le composant Container
inclut une prop children, qui contiendra les composants Notification
et Message
. Tout contenu placé entre les balises ouvrante et fermante du composant Container
sera traité comme ses enfants.
Le composant Container
possède le code suivant :
const Container = (props) => (
<div>{props.children}</div>
);
Remarque
Les props simples sont explicitement définies et accessibles via leurs noms spécifiques dans un composant. En revanche, la prop
children
permet de transmettre des composants, des éléments ou du texte en tant qu’enfants d’un composant sans définir explicitement un nom de prop. Elle représente le contenu situé entre les balises ouvrante et fermante du composant.
Nous pouvons commencer.
Étape 1
Créer tous les composants nécessaires : Container
, UserImage
et UserInfo
. Construire l'application complète en intégrant ces composants dans le composant App
.
Exemple :
// `Container` component to hold `UserImage` and `UserInfo`
const Container = (props) => (
<div>{props.children}</div>
);
// `UserImage` component to display user image
const UserImage = () => (
<img
className="image"
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/styling/user.png"
alt="user"
width={200}
/>
);
// `UserInfo` component to display user information
const UserInfo = (props) => (
<div>
<p>
<span>Name:</span> {props.name}
</p>
<p>
<span>Age:</span> {props.age}
</p>
<p>
<span>Occupation:</span> {props.occupation}
</p>
</div>
);
// `App` component that combines `Container`, `UserImage`, and `UserInfo`
const App = () => (
<Container>
<UserImage />
<UserInfo name="Michelle" age="36 years" occupation="Accountant" />
</Container>
);
Étape 2
S'assurer que tous les noms de classes essentiels sont ajoutés aux éléments à l'aide de l'attribut className
.
// `Container` component to hold `UserImage` and `UserInfo`
const Container = (props) => <div className="container">{props.children}</div>;
// `UserImage` component to display user image
const UserImage = () => (
<img
className="image"
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/styling/user.png"
alt="user"
width={200}
/>
);
// `UserInfo` component to display user information
const UserInfo = (props) => (
<div className="description">
<p className="text">
<span className="label">Name:</span> {props.name}
</p>
<p className="text">
<span className="label">Age:</span> {props.age}
</p>
<p className="text">
<span className="label">Occupation:</span> {props.occupation}
</p>
</div>
);
// `App` component that combines `Container`, `UserImage`, and `UserInfo`
const App = () => (
<Container>
<UserImage />
<UserInfo name="Michelle" age="36 years" occupation="Accountant" />
</Container>
);
Étape 3
Importation du fichier CSS dans le fichier contenant tous les composants. Cette opération s'effectue en haut du fichier.
import "./index.css"; // Importing the CSS file
Étape 4
Enfin, possibilité d'appliquer les styles selon les préférences.
/* Styling for the `Container` component */
.container {
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border: 3px solid #4f5e77;
border-radius: 10px;
width: 320px;
background-color: #ff8a00;
}
/* Styling for the `UserImage` component */
.image {
display: block;
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
/* Styling for the `UserInfo` component text */
.text {
font-size: 22px;
color: #bbdefb;
}
/* Styling for the `UserInfo` component label */
.label {
font-size: 28px;
font-weight: 700;
text-transform: uppercase;
color: #4f5e77;
}
Code complet de l'application :
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.17
Application Pratique du CSS Externe
Glissez pour afficher le menu
Pratique de la création d’un composant carte composé de trois composants. L’objectif est d’utiliser différents composants et d’appliquer des styles pour obtenir un rendu visuel attrayant. La réalisation se fera étape par étape.
Avant de commencer, exploration de la fonctionnalité de la prop spéciale children
, qui permet de transmettre des composants, des éléments ou du texte en tant qu’éléments enfants. Fonctionnement illustré ci-dessous :
const App = () => (
<Container>
<Notification />
<Message />
</Container>
);
Le composant Container
inclut une prop children, qui contiendra les composants Notification
et Message
. Tout contenu placé entre les balises ouvrante et fermante du composant Container
sera traité comme ses enfants.
Le composant Container
possède le code suivant :
const Container = (props) => (
<div>{props.children}</div>
);
Remarque
Les props simples sont explicitement définies et accessibles via leurs noms spécifiques dans un composant. En revanche, la prop
children
permet de transmettre des composants, des éléments ou du texte en tant qu’enfants d’un composant sans définir explicitement un nom de prop. Elle représente le contenu situé entre les balises ouvrante et fermante du composant.
Nous pouvons commencer.
Étape 1
Créer tous les composants nécessaires : Container
, UserImage
et UserInfo
. Construire l'application complète en intégrant ces composants dans le composant App
.
Exemple :
// `Container` component to hold `UserImage` and `UserInfo`
const Container = (props) => (
<div>{props.children}</div>
);
// `UserImage` component to display user image
const UserImage = () => (
<img
className="image"
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/styling/user.png"
alt="user"
width={200}
/>
);
// `UserInfo` component to display user information
const UserInfo = (props) => (
<div>
<p>
<span>Name:</span> {props.name}
</p>
<p>
<span>Age:</span> {props.age}
</p>
<p>
<span>Occupation:</span> {props.occupation}
</p>
</div>
);
// `App` component that combines `Container`, `UserImage`, and `UserInfo`
const App = () => (
<Container>
<UserImage />
<UserInfo name="Michelle" age="36 years" occupation="Accountant" />
</Container>
);
Étape 2
S'assurer que tous les noms de classes essentiels sont ajoutés aux éléments à l'aide de l'attribut className
.
// `Container` component to hold `UserImage` and `UserInfo`
const Container = (props) => <div className="container">{props.children}</div>;
// `UserImage` component to display user image
const UserImage = () => (
<img
className="image"
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/styling/user.png"
alt="user"
width={200}
/>
);
// `UserInfo` component to display user information
const UserInfo = (props) => (
<div className="description">
<p className="text">
<span className="label">Name:</span> {props.name}
</p>
<p className="text">
<span className="label">Age:</span> {props.age}
</p>
<p className="text">
<span className="label">Occupation:</span> {props.occupation}
</p>
</div>
);
// `App` component that combines `Container`, `UserImage`, and `UserInfo`
const App = () => (
<Container>
<UserImage />
<UserInfo name="Michelle" age="36 years" occupation="Accountant" />
</Container>
);
Étape 3
Importation du fichier CSS dans le fichier contenant tous les composants. Cette opération s'effectue en haut du fichier.
import "./index.css"; // Importing the CSS file
Étape 4
Enfin, possibilité d'appliquer les styles selon les préférences.
/* Styling for the `Container` component */
.container {
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border: 3px solid #4f5e77;
border-radius: 10px;
width: 320px;
background-color: #ff8a00;
}
/* Styling for the `UserImage` component */
.image {
display: block;
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
/* Styling for the `UserInfo` component text */
.text {
font-size: 22px;
color: #bbdefb;
}
/* Styling for the `UserInfo` component label */
.label {
font-size: 28px;
font-weight: 700;
text-transform: uppercase;
color: #4f5e77;
}
Code complet de l'application :
Merci pour vos commentaires !