React30-Project 20: Building a Game Release Website with Styled Components
Introduction:
In the dynamic world of game releases, having a dedicated website to showcase upcoming games can be a thrilling project. In this article, we'll guide you through the process of building a game release website using React and adding style to your components with the powerful Styled Components library. This combination not only makes your website visually appealing but also enhances maintainability.
Prerequisites:
Basic understanding of React and JSX.
Node.js and npm installed on your machine.
Goals
Build game release website using styled components in React as shown below:
Implementation:
- Create a React App:
Start by creating a new React app using CRA.
npx create-react-app game-release-website
cd game-release-website
2. Install Styled Components:
Install Styled Components to manage styling in your React components. Also install react-slick for carousel component.
npm install styled-components react-slick slick-carousel
3. Create a Layout Component:
Design a reusable layout component to establish a consistent visual structure for your website.
Create `src/Layout.js`:-
// Layout.js
import styled from "styled-components";
export const Container = styled.div`
max-width: 1200px;
margin: 0 auto;
padding: 20px;
`;
4. Create Components:
Design components for your game release website, such as a GameCard component to display each game.
Create `src/components/GameCard.js`:
// GameCard.js
import React from "react";
import styled from "styled-components";
const Card = styled.div`
background-color: #fff;
border: 1px solid #e1e1e1;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
margin-top: 20px;
&:hover {
transform: scale(1.05);
}
`;
const Image = styled.img`
width: 100%;
height: 200px;
object-fit: cover;
border-bottom: 1px solid #e1e1e1;
`;
const Title = styled.h2`
font-size: 1.5rem;
margin: 10px 0;
`;
const ReleaseDate = styled.p`
color: #666;
`;
const Details = styled.div`
padding: 15px;
`;
const FeatureList = styled.ul`
list-style: none;
padding: 0;
`;
const Feature = styled.li`
margin-bottom: 5px;
`;
const Price = styled.p`
font-size: 1.2rem;
color: rgb(107, 97, 197);
`;
const ConsoleVersions = styled.p`
color: #777;
`;
const GameCard = ({
title,
releaseDate,
imageUrl,
features,
price,
consoleVersions
}) => {
return (
<Card>
<Image src={imageUrl} alt={title} />
<Details>
<Title>{title}</Title>
<ReleaseDate>Release Date: {releaseDate}</ReleaseDate>
<FeatureList>
{features.map((feature, index) => (
<Feature key={index}>{feature}</Feature>
))}
</FeatureList>
<Price>{`Price: ${price}`}</Price>
<ConsoleVersions>{`Available on: ${consoleVersions.join(
", "
)}`}</ConsoleVersions>
</Details>
</Card>
);
};
export default GameCard;
Explanation about how Styled Components are implemented:
Styled Components allow us to write CSS directly within our JavaScript files, making styling more modular and maintainable. In the GameCard.js example, we created a Card styled component using Styled Components' template literal syntax. This Card component defines the styling for our game card, including borders, padding, margin, and border radius.
Inside the GameCard component, we use the Card styled component to style our game card container. This approach keeps the styling closely associated with the component, making it easy to understand and modify.
Styled Components also provide dynamic styling capabilities by allowing the use of props in the styled component definition. In this case, the GameCard component accepts props like title, releaseDate, and imageUrl, which are used to dynamically display game information.
The result is a clean and readable code structure that combines the logic of React components with the styling of Styled Components, enhancing the development and maintenance experience
Create Header component in `src/components` folder:
// Header.js
import React from "react";
import styled from "styled-components";
const StyledHeader = styled.header`
background-color: rgb(40, 42, 66);
color: #fff;
padding: 15px 0;
text-align: center;
h1 {
margin: 0;
font-size: 2rem;
}
`;
const Header = () => {
return (
<StyledHeader>
<h1>Game Release Hub</h1>
</StyledHeader>
);
};
export default Header;
Create a Carousel Component:
Implement a Carousel component at the top of the page to showcase the latest game releases. In `src/components` folder create Carousel.js file:
// Carousel.js
import React from "react";
import styled from "styled-components";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
const CarouselContainer = styled.div`
overflow: hidden;
`;
const CarouselTrack = styled.div`
display: flex;
transition: transform 0.5s ease-in-out;
`;
const CarouselItem = styled.div`
max-width: 100%;
box-sizing: border-box;
img {
width: 100%;
height: auto;
max-height: 170px;
border-radius: 8px;
}
`;
const Carousel = ({ images }) => {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true
};
return (
<CarouselContainer>
<Slider {...settings}>
{images.map((image, index) => (
<CarouselItem key={index}>
<img src={image} alt={`Game ${index + 1}`} />
</CarouselItem>
))}
</Slider>
</CarouselContainer>
);
};
export default Carousel;
5. Use Styled Components in App:
Incorporate the GameCard component into your main App component.
// App.js
import React from "react";
import { Container } from "./Layout";
import Header from "./components/Header";
import "./styles.css";
import GameCard from "./components/GameCard";
import Carousel from "./components/Carousel";
const App = () => {
const latestReleases = [
"/images/mario.jpg",
"/images/game2.png"
// Add more image URLs as needed
];
const games = [
{
title: "Game 1",
releaseDate: "2023-01-01",
imageUrl: "/images/mario.jpg",
features: [
"Immersive Storyline",
"Multiplayer Mode",
"High-Quality Graphics"
],
price: 49.99,
consoleVersions: ["PS5", "Xbox Series X", "PC"]
},
{
title: "Game 2",
releaseDate: "2023-02-15",
imageUrl: "/images/game2.png",
features: [
"Open World Exploration",
"Co-op Gameplay",
"Dynamic Environments"
],
price: 59.99,
consoleVersions: ["PS4", "Xbox One", "PC"]
}
// Add more game data as needed
];
return (
<>
<Header />
<Container>
<Carousel images={latestReleases} />
<h1>Upcoming Game Releases</h1>
{games.map((game, index) => (
<GameCard key={index} {...game} />
))}
</Container>
</>
);
};
export default App;
6. Styling and adding images
Update styles.css in src folder as shown below
.slick-prev {
left: 3% !important;
z-index: 1;
}
.slick-next {
right: 3% !important;
z-index: 1;
}
Add game images in public/images folder and update image file names in code accordingly.
7. Run Your App:
Start your development server and see your game release website in action.
npm start
Live Demo:
Conclusion:
By building a game release website with React and incorporating Styled Components, you not only create an aesthetically pleasing user interface but also benefit from the flexibility and maintainability that Styled Components offer. This combination empowers you to focus on building engaging content for your users while keeping your codebase organized and efficient.
Check out my YouTube channel for more content:
Next part in the series for building a text-only social media website using React. To optimize performance, we’ll leverage the useMemo hook for efficient memoization of data.
