Assignments Of Day 16 - Styling Components in React

Assignment 1: Styling with CSS Stylesheets

Task

Create a simple React component that displays a greeting message. Style the component using an external CSS stylesheet.

Steps

Set Up Your React App: If you haven't already, create a new React app using Create React App.

bash

Verify

Open In Editor

Edit

Copy code

npx create-react-app greeting-app

cd greeting-app

Create a CSS File: Inside the src folder, create a file named Greeting.css.

css

Verify

Open In Editor

Edit

Copy code

/* Greeting.css */

.greeting {

background-color: lightyellow;

padding: 20px;

border-radius: 10px;

text-align: center;

font-family: Arial, sans-serif;

}

.greeting h1 {

color: darkorange;

}

Create the Greeting Component: Create a new file named Greeting.js in the src folder.

javascript

Verify

Open In Editor

Edit

Copy code

// Greeting.js

import React from 'react';

import './Greeting.css'; // Import the CSS file

const Greeting = () => {

return (

<h1>Hello, Welcome to React Styling!</h1>

</div>

);

};

export default Greeting;

Use the Greeting Component: Open App.js and import the Greeting component.

javascript

Verify

Open In Editor

Edit

Copy code

// App.js

import React from 'react';

import Greeting from './Greeting';

const App = () => {

return (

<div>

</div>

);

};

export default App;

Run Your App: Start your React app to see the styled component.

bash

Verify

Open In Editor

Edit

Copy code

npm start

Explanation

In this assignment, you created a simple React component and styled it using an external CSS stylesheet. The styles are defined in Greeting.css, and the component imports this stylesheet to apply the styles.

Assignment 2: Using Inline Styles

Task

Create a React component that displays a list of items. Style the list using inline styles.

Steps

Create a New Component: Create a file named ItemList.js in the src folder.

javascript

Verify

Open In Editor

Edit

Copy code

// ItemList.js

import React from 'react';

const ItemList = () => {

const listStyle = {

listStyleType: 'none',

padding: 0,

};

const itemStyle = {

backgroundColor: 'lightblue',

padding: '10px',

margin: '5px 0',

borderRadius: '5px',

color: 'darkblue',

};

return (

</ul>

);

};

export default ItemList;

Use the ItemList Component: Open App.js and import the ItemList component.

javascript

Verify

Open In Editor

Edit

Copy code

// App.js

import React from 'react';

import ItemList from './ItemList';

const App = () => {

return (

<div>

</div>

);

};

export default App;

Run Your App: Start your React app to see the styled list.

bash

Verify

Open In Editor

Edit

Copy code

npm start

Explanation

In this assignment, you created a list of items and styled them using inline styles. The styles are defined as JavaScript objects and applied directly to the elements using the style attribute.

Assignment 3: Using Styled-Components

Task

Create a React component that displays a button. Style the button using styled-components.

Steps

Install Styled-Components: If you haven't already, install the styled-components library.

bash

Verify

Open In Editor

Edit

Copy code

npm install styled-components

Create a New Component: Create a file named StyledButton.js in the src folder.

javascript

Verify

Open In Editor

Edit

Copy code

// StyledButton.js

import React from 'react';

import styled from 'styled-components';

const Button = styled.button`

background-color: lightgreen;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 16px;

&:hover {

background-color: darkgreen;

}

const StyledButton = () => {

return (

Click Me!

</Button>

);

};

export default StyledButton;

Use the StyledButton Component: Open App.js and import the StyledButton component.

javascript

Verify

Open In Editor

Edit

Copy code

// App.js

import React from 'react';

import StyledButton from './StyledButton';

const App = () => {

return (

<div>

<h1>Welcome to Styled Components</h1>

</div>

);

};

export default App;

Run Your App: Start your React app to see the styled button.

bash

Verify

Open In Editor

Edit

Copy code

npm start

Explanation

In this assignment, you created a button styled with styled-components. The button's styles are defined using a styled component, which allows for scoped styles and dynamic styling capabilities, such as changing the background color on hover.

Summary

These assignments provide hands-on experience with different styling methods in React. By completing them, students will gain a better understanding of how to apply styles effectively in their React applications, using CSS stylesheets, inline styles, and styled-components. ## Assignment 4: Combining CSS and Inline Styles

Task

Create a React component that displays a card with a title and description. Use both an external CSS stylesheet for the card layout and inline styles for the text.

Steps

Create a CSS File: Inside the src folder, create a file named Card.css.

css

Verify

Open In Editor

Edit

Copy code

/* Card.css */

.card {

background-color: white;

border: 1px solid #ccc;

border-radius: 10px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

padding: 20px;

margin: 20px;

max-width: 300px;

}

.card-title {

font-size: 24px;

color: #333;

}

Create the Card Component: Create a new file named Card.js in the src folder.

javascript

Verify

Open In Editor

Edit

Copy code

// Card.js

import React from 'react';

import './Card.css'; // Import the CSS file

const Card = () => {

const descriptionStyle = {

fontSize: '16px',

color: '#666',

lineHeight: '1.5',

};

return (

<h2 className="card-title">Card Title</h2>

This is a description of the card. It provides additional information about the content.

</p>

</div>

);

};

export default Card;

Use the Card Component: Open App.js and import the Card component.

javascript

Verify

Open In Editor

Edit

Copy code

// App.js

import React from 'react';

import Card from './Card';

const App = () => {

return (

<div>

<h1>My Card Component</h1>

</div>

);

};

export default App;

Run Your App: Start your React app to see the card with styles applied.

bash

Verify

Open In Editor

Edit

Copy code

npm start

Explanation

In this assignment, you created a card component that combines both external CSS for layout and inline styles for specific text styling. The card's overall appearance is managed by the CSS file, while the description's font size and color are controlled through inline styles.

Assignment 5: Theming with Styled-Components

Task

Create a themed button using styled-components that changes its style based on a prop.

Steps

Create a New Component: Create a file named ThemedButton.js in the src folder.

javascript

Verify

Open In Editor

Edit

Copy code

// ThemedButton.js

import React from 'react';

import styled from 'styled-components';

const Button = styled.button`

background-color: ${props => props.primary ? 'blue' : 'gray'};

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 16px;

&:hover {

background-color: ${props => props.primary ? 'darkblue' : 'darkgray'};

}

const ThemedButton = ({ primary }) => {

return (

{primary ? 'Primary Button' : 'Secondary Button'}

</Button>

);

};

export default ThemedButton;

Use the ThemedButton Component: Open App.js and import the ThemedButton component.

javascript

Verify

Open In Editor

Edit

Copy code

// App.js

import React from 'react';

import ThemedButton from './ThemedButton';

const App = () => {

return (

<div>

<h1>Welcome to Themed Buttons</h1>

</div>

);

};

export default App;

Run Your App: Start your React app to see the themed buttons.

bash

Verify

Open In Editor

Edit

Copy code

npm start

Explanation

In this assignment, you created a button that changes its style based on a prop (primary). The button's background color and hover effect are determined by whether the primary prop is true or false, demonstrating how to implement theming with styled-components.

Summary

These additional assignments further enhance your understanding of styling in React. By combining different methods and exploring theming with styled-components, you will gain a comprehensive skill set for styling React applications effectively. ## Assignment 6: Responsive Design with CSS Media Queries

Task

Create a React component that displays a responsive card. Use CSS media queries to adjust the card's layout based on the screen size.

Steps

Create a CSS File: Inside the src folder, create a file named ResponsiveCard.css.

css

Verify

Open In Editor

Edit

Copy code

/* ResponsiveCard.css */

.responsive-card {

background-color: white;

border: 1px solid #ccc;

border-radius: 10px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

padding: 20px;

margin: 20px;

max-width: 300px;

transition: transform 0.2s;

}

.responsive-card:hover {

transform: scale(1.05);

}

.responsive-card-title {

font-size: 24px;

color: #333;

}

@media (max-width: 600px) {

.responsive-card {

max-width: 100%;

margin: 10px;

}

.responsive-card-title {

font-size: 20px;

}

Create the ResponsiveCard Component: Create a new file named ResponsiveCard.js in the src folder.

javascript

Verify

Open In Editor

Edit

Copy code

// ResponsiveCard.js

import React from 'react';

import './ResponsiveCard.css'; // Import the CSS file

const ResponsiveCard = () => {

return (

<h2 className="responsive-card-title">Responsive Card</h2>

<p>This card adjusts its size based on the screen width.</p>

</div>

);

};

export default ResponsiveCard;

Use the ResponsiveCard Component: Open App.js and import the ResponsiveCard component.

javascript

Verify

Open In Editor

Edit

Copy code

// App.js

import React from 'react';

import ResponsiveCard from './ResponsiveCard';

const App = () => {

return (

<div>

<h1>Responsive Design Example</h1>

</div>

);

};

export default App;

Run Your App: Start your React app to see the responsive card in action.

bash

Verify

Open In Editor

Edit

Copy code

npm start

Explanation

In this assignment, you created a responsive card component that uses CSS media queries to adjust its layout based on the screen size. The card scales up on hover and changes its maximum width and font size on smaller screens, demonstrating how to implement responsive design in React.

Assignment 7: Animations with CSS Transitions

Task

Create a React component that displays a list of items with hover animations using CSS transitions.

Steps

Create a CSS File: Inside the src folder, create a file named AnimatedList.css.

css

Verify

Open In Editor

Edit

Copy code

/* AnimatedList.css */

.animated-list {

list-style-type: none;

padding: 0;

}

.animated-list-item {

background-color: lightblue;

padding: 10px;

margin: 5px 0;

border-radius: 5px;

transition: background-color 0.3s, transform 0.3s;

}

.animated-list-item:hover {

background-color: darkblue;

color: white;

transform: scale(1.05);

}

Create the AnimatedList Component: Create a new file named AnimatedList.js in the src folder.

javascript

Verify

Open In Editor

Edit

Copy code

// AnimatedList.js

import React from 'react';

import './AnimatedList.css'; // Import the CSS file

const AnimatedList = () => {

const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

return (

{items.map((item, index) => (

{item}

</li>

))}

</ul>

);

};

export default AnimatedList;

Use the AnimatedList Component: Open App.js and import the AnimatedList component.

javascript

Verify

Open In Editor

Edit

Copy code

// App.js

import React from 'react';

import AnimatedList from './AnimatedList';

const App = () => {

return (

<div>

<h1>Animated List Example</h1>

</div>

);

};

export default App;

`` 4. **Run Your App**: Start your React app to see the animated list in action.

```bash

npm start

Explanation

In this assignment, you created a list of items that animate on hover using CSS transitions. The list items change their background color and scale up slightly when hovered over, providing a visual feedback effect that enhances user interaction.

Summary

These assignments cover a variety of styling techniques in React, including responsive design, animations, and the use of CSS transitions. By completing these tasks, students will gain practical experience in creating visually appealing and interactive components in their React applications. ## Assignment 8: Creating a Modal with Styled-Components

Task

Create a modal component that can be opened and closed. Style the modal using styled-components.

Steps

Install Styled-Components: If you haven't already, ensure that styled-components is installed.

bash

Verify

Open In Editor

Edit

Copy code

npm install styled-components

Create the Modal Component: Create a new file named Modal.js in the src folder.

javascript

Verify

Open In Editor

Edit

Copy code

// Modal.js

import React from 'react';

import styled from 'styled-components';

const Overlay = styled.div`

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0, 0, 0, 0.5);

display: flex;

justify-content: center;

align-items: center;

const ModalContainer = styled.div`

background: white;

padding: 20px;

border-radius: 10px;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

width: 300px;

text-align: center;

const CloseButton = styled.button`

background: red;

color: white;

border: none;

padding: 10px;

border-radius: 5px;

cursor: pointer;

const Modal = ({ isOpen, onClose }) => {

if (!isOpen) return null;

return (

<h2>Modal Title</h2>

<p>This is a modal message.</p>

<CloseButton onClick={onClose}>Close</CloseButton>

</ModalContainer>

</Overlay>

);

};

export default Modal;

Create the App Component: Open App.js and implement the modal functionality.

javascript

Verify

Open In Editor

Edit

Copy code

// App.js

import React, { useState } from 'react';

import Modal from './Modal';

import styled from 'styled-components';

const OpenModalButton = styled.button`

background: blue;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

const App = () => {

const [isModalOpen, setModalOpen] = useState(false);

const openModal = () => setModalOpen(true);

const closeModal = () => setModalOpen(false);

return (

<div>

<h1>Modal Example</h1>

<OpenModalButton onClick={openModal}>Open Modal</OpenModalButton>

</div>

);

};

export default App;

Run Your App: Start your React app to see the modal in action.

bash

Verify

Open In Editor

Edit

Copy code

npm start

Explanation

In this assignment, you created a modal component that can be opened and closed. The modal is styled using styled-components, and it appears centered on the screen with a semi-transparent overlay. The modal can be closed by clicking the "Close" button, demonstrating how to manage component visibility in React.

Assignment 9: Building a Responsive Navigation Bar

Task

Create a responsive navigation bar that collapses into a hamburger menu on smaller screens.

Steps

Create a CSS File: Inside the src folder, create a file named Navbar.css.

css

Verify

Open In Editor

Edit

Copy code

/* Navbar.css */

.navbar {

display: flex;

justify-content: space-between;

align-items: center;

background-color: #333;

padding: 10px 20px;

}

.navbar-links {

display: flex;

list-style: none;

}

.navbar-links li {

margin: 0 15px;

color: white;

}

.hamburger {

display: none;

flex-direction: column;

cursor: pointer;

}

.bar {

height: 3px;

width: 25px;

background-color: white;

margin: 3px 0;

}

@media (max-width: 600px) {

.navbar-links {

display: none;

flex-direction: column;

position: absolute;

top: 50px;

left: 0;

background-color: #333;

width: 100%;

}

.navbar-links.active {

display: flex;

}

.hamb urger {

display: flex;

}

Create the Navbar Component: Create a new file named Navbar.js in the src folder.

javascript

Verify

Open In Editor

Edit

Copy code

// Navbar.js

import React, { useState } from 'react';

import './Navbar.css';

const Navbar = () => {

const [isOpen, setIsOpen] = useState(false);

const toggleMenu = () => {

setIsOpen(!isOpen);

};

return (

<h1 style={{ color: 'white' }}>My Website</h1>

</div>

<li>About</li>

<li>Services</li>

<li>Contact</li>

</ul>

</nav>

);

};

export default Navbar;

Use the Navbar Component: Open App.js and import the Navbar component.

javascript

Verify

Open In Editor

Edit

Copy code

// App.js

import React from 'react';

import Navbar from './Navbar';

const App = () => {

return (

<div>

<h1>Welcome to My Website</h1>

</div>

);

};

export default App;

Run Your App: Start your React app to see the responsive navigation bar in action.

bash

Verify

Open In Editor

Edit

Copy code

npm start

Explanation

In this assignment, you created a responsive navigation bar that collapses into a hamburger menu on smaller screens. The navigation links are hidden by default on mobile devices and can be toggled by clicking the hamburger icon. This demonstrates how to implement responsive design and manage component state in React.

Summary

These assignments provide a comprehensive overview of styling techniques in React, including creating modals, responsive navigation bars, and implementing animations. By completing these tasks, students will develop a strong foundation in styling React applications and enhancing user experience through effective design. ## Assignment 10: Creating a Tooltip Component

Task

Create a tooltip component that displays additional information when hovering over an element. Style the tooltip using styled-components.

Steps

Create the Tooltip Component: Create a new file named Tooltip.js in the src folder.

javascript

Verify

Open In Editor

Edit

Copy code

// Tooltip.js

import React from 'react';

import styled from 'styled-components';

const TooltipContainer = styled.div`

position: relative;

display: inline-block;

cursor: pointer;

const TooltipText = styled.span`

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 5px;

padding: 5px;

position: absolute;

z-index: 1;

bottom: 125%; /* Position above the element */

left: 50%;

margin-left: -60px;

opacity: 0;

transition: opacity 0.3s;

${TooltipContainer}:hover & {

visibility: visible;

opacity: 1;

}

const Tooltip = ({ text, children }) => {

return (

{children}

</TooltipContainer>

);

};

export default Tooltip;

Use the Tooltip Component: Open App.js and implement the tooltip functionality.

javascript

Verify

Open In Editor

Edit

Copy code

// App.js

import React from 'react';

import Tooltip from './Tooltip';

import styled from 'styled-components';

const Button = styled.button`

background-color: blue;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

const App = () => {

return (

<div>

<h1>Tooltip Example</h1>

<Button>Hover over me</Button>

</Tooltip>

</div>

);

};

export default App;

Run Your App: Start your React app to see the tooltip in action.

bash

Verify

Open In Editor

Edit

Copy code

npm start

Explanation

In this assignment, you created a tooltip component that displays additional information when hovering over a button. The tooltip is styled using styled-components and appears above the button with a fade-in effect. This demonstrates how to create interactive components that enhance user experience.

Assignment 11: Building a Card Gallery

Task

Create a card gallery that displays multiple cards in a grid layout. Style the cards using CSS Grid and add hover effects.

Steps

Create a CSS File: Inside the src folder, create a file named CardGallery.css.

css

Verify

Open In Editor

Edit

Copy code

/* CardGallery.css */

.gallery {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

gap: 20px;

padding: 20px;

}

.card {

background-color: white;

border: 1px solid #ccc;

border-radius: 10px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

padding: 20px;

transition: transform 0.2s;

}

.card:hover {

transform: scale(1.05);

}

.card-title {

font-size: 18px;

margin: 0;

}

.card-description {

color: #666;

}

Create the CardGallery Component: Create a new file named CardGallery.js in the src folder.

javascript

Verify

Open In Editor

Edit

Copy code

// CardGallery.js

import React from 'react';

import './CardGallery.css';

const CardGallery = () => {

const cards = [

{ title: 'Card 1', description: 'This is the first card.' },

{ title: 'Card 2', description: 'This is the second card.' },

{ title: 'Card 3', description: 'This is the third card.' },

{ title: 'Card 4', description: 'This is the fourth card.' },

];

return (

{cards.map((card, index) => (

<h3 className="card-title">{card.title}</h3>

<p className="card-description">{card.description}</p>

</div ))}

</div>

);

};

export default CardGallery;

Use the CardGallery Component: Open App.js and import the CardGallery component.

javascript

Verify

Open In Editor

Edit

Copy code

// App.js

import React from 'react';

import CardGallery from './CardGallery';

const App = () => {

return (

<div>

<h1>Card Gallery Example</h1>

</div>

);

};

export default App;

Run Your App: Start your React app to see the card gallery in action.

bash

Verify

Open In Editor

Edit

Copy code

npm start

Explanation

In this assignment, you created a card gallery that displays multiple cards in a responsive grid layout using CSS Grid. Each card has a hover effect that scales it up slightly, enhancing the visual interaction. This demonstrates how to effectively use CSS Grid for layout and apply hover effects for better user experience.

Summary

These assignments provide a comprehensive exploration of various styling techniques in React, including tooltips, card galleries, and responsive design. By completing these tasks, students will gain practical experience in creating visually appealing and interactive components, enhancing their skills in React development.

Assignments Of Day 16 - Styling Components in React

Post a Comment

How to Create Login and Register Modals in React (Step-by-Step)

Contact form

Assignments Of Day 16 - Styling Components in React

You Might Like

Post a Comment

Contact form