Skip to content

README.md

Latest commit

 

History

History
120 lines (78 loc) · 4.67 KB

README.md

File metadata and controls

120 lines (78 loc) · 4.67 KB

React Styling Practice

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

React Styled Components CSS Modules Webpack Babel

 

🔶 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.