React Component Styling Practice

This repository is dedicated to practicing and mastering Styled Components in React.

Main features:

• Learn and implement Styled Components
• Gain practical experience in organizing styles for scalable applications.

 

🔶 Technologies

 

🔶 See also

Are you interested in React and styling techniques? See my other project.

 

🔶 Installation

The project uses Node.js and npm. To run the project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/devmentor-pl/practice-react-styling.git

2. Navigate to the project directory:

   cd practice-react-styling

3. Install dependencies:

   npm install

4. Start the development server:

   npm start

The application will be available at http://localhost:3000.

 

🔶 Tasks Overview

The project contains several tasks organized in folders 01 to 05, each demonstrating different styling methods. Below is an overview of the tasks:

• 01 – Create an <Alert> component styled with Styled Components. The component should support variants like primary and secondary.
• 02 – Build a <Button> component similar to React Bootstrap, supporting props like variant, size, active, and disabled.
• 03 – Implement a <Breadcrumb> component with <Breadcrumb.Item> for navigation. It should support href and active props.
• 04 – Develop <Tabs> and <Tab> components to manage tabbed content. The active tab should dynamically update the displayed content.
• 05 – Create a <Card> component composed of subcomponents like <Card.Img>, <Card.Body>, <Card.Title>, and <Card.Text>. Use the previously created <Button> component within the card.

Each task includes specific instructions in its respective README.md file.

 

🔶 Solutions provided in the project

One of examples:

The <Card> component is a complex and reusable component built with subcomponents like <Card.Img>, <Card.Body>, <Card.Title>, and <Card.Text>. It demonstrates advanced component composition and integration with the previously created <Button> component.

<Card>
  <Card.Img src="image.jpg" alt="Example" />
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>Some example text to build on the card title and make up the bulk of the card's content.</Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
</Card>

This example showcases:

• Dynamic styling: Styled Components are used to style the card and its subcomponents.
• Component composition: The <Card> component is composed of smaller, reusable subcomponents.
• Integration: The <Button> component created in Task 02 is reused within the <Card> component.

For more details, refer to the implementation in Task05.js and the corresponding README.md.

 

🔶 Conclusions

• Dynamic styling: Styled Components were used extensively to enable dynamic and reusable styling across components.
• Component composition: Components like <Card> and <Tabs> were designed with subcomponents for better modularity and reusability.
• Scalability: The project demonstrates how to organize styles and components for scalable React applications.
• Theming: The use of ThemeProvider allows for centralized theme management, making it easier to maintain consistent styling.

This project provides a solid foundation for mastering React component styling techniques.

 

🔶 Feel free to contact me

If you have any questions or feedback, feel free to reach out!
Find me on GitHub or LinkedIn.

 

🔶 Thanks / Special thanks / Credits

Thanks to my Mentor - devmentor.pl – for providing me with this task and for code review.