Creating components in React is fairly easy. If you’re coming from a component-based framework, like Angular, you’re already used to the markup+logic+style trio. By using JSX, you can put markup and logic together, in the same file. This is really nice. So you ask me: “How to import CSS files in a React application?”. This is exactly what you will learn in this article. And I can give you a spoiler: it’s very simple.
To illustrate this article, we are going to use a tiny React application:
const App = () => (
<div>
<MovieCard
imagePath="https://i.imgur.com/mtR0tjU.jpg"
title="The Godfather"
text="A 1972 film directed by Francis Ford Coppola."
oscars={3}></MovieCard>
<MovieCard
imagePath="https://i.imgur.com/mhzWZtB.jpg"
title="The Untouchables"
text="A 1987 film directed by Brian De Palma."
oscars={1}></MovieCard>
</div>
);
The component above prints two cards with basic information about classic movies. It depends on aMovieCard
component, which renders a card with image, title, description and number of Oscars won. Let’s check it out:
const MovieCard = (props) => (
<div className="movie-card">
<img src={props.imagePath} className="movie-card__image" />
<div className="movie-card__content">
<h3 className="movie-card-content__title">{props.title}</h3>
<p className="movie-card-content__text">{props.text}</p>
<ul className="movie-card-content__oscars">
{ renderOscars(props.oscars) }
</ul>
</div>
</div>
);
Finally, let’s see how the renderOscars
function is implemented:
function renderOscars(oscars) {
const output = [];
for(let i = 0; i < oscars; i++) {
output.push(
<li className="movie-card-content-oscars__item" key={i}>
<img src="https://i.imgur.com/w1wYJwi.png" />
</li>
);
}
return output;
}
Simple, isn’t it? Here’s how it looks:
Well, it’s raw, it’s ugly, but it works. Note that our markup uses the className
attribute instead of class
. Since JSX is an extension of JavaScript, this approach prevents conflicts with the reserved keyword class
.
Now we need to style our application.
To import CSS files in a React application, you need to configure the Style and CSS loaders first.
Install both loaders:
npm i css-loader style-loader --save-dev
Or, if you love Yarn:
yarn add --dev css-loader style-loader
Add this entry to the module.rules array, in your webpack.config.js file:
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
That’s all. Now you can run your application.
First, we will create a file called app.css in the same directory as your App component. To make it easier to determine if it works, we’ll add the following rule to our new stylesheet:
.movie-card {
background-color: red;
}
Now, we can import the app.css file in our application.
import React from 'react';
import './app.css'; // here is where the magic happens
const MovieCard = (props) => (
[...]
**Note:**In order to simplify things, I’ve saved both MovieCard
and App
components in the same file.
This is how your application should look like:
The next step is to beautify things.
Let’s style each element individually.
First, we will normalize the rem/px proportion and make every element use the border-box sizing:
* {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
Now, we can style the card wrapper:
.movie-card {
display: inline-block;
height: 470px;
width: 300px;
border: 1px solid #DDD;
border-radius: 10px;
overflow: hidden;
vertical-align: top;
margin: 5px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
}
The card content container:
.movie-card__content {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
padding: 15px;
}
The title and body:
.movie-card-content__title {
font-size: 2rem;
margin: 0;
}
.movie-card-content__text {
font-size: 1.6rem;
line-height: 2rem;
}
Finally, the Oscars list:
.movie-card-content__oscars {
list-style-type: none;
padding: 0;
}
.movie-card-content-oscars__item {
display: inline-block;
}
.movie-card-content-oscars__item img {
width: 25px;
}
And voilà:
This looks a lot better, right?
import
keyword.☞ The Complete React Web Developer Course (2nd Edition)
☞ Node with React: Fullstack Web Development
☞ Beginner Full Stack Web Development: HTML, CSS, React & Node
☞ React JS and Redux - Mastering Web Apps
☞ React 16 - The Complete Guide (incl. React Router 4 & Redux)
☞ MERN Stack Front To Back: Full Stack React, Redux & Node.js
☞ Build Responsive Real World Websites with HTML5 and CSS3
☞ Web Design for Beginners: Real World Coding in HTML & CSS
☞ Beginner Full Stack Web Development: HTML, CSS, React & Node
☞ The Complete HTML & CSS Course - From Novice To Professional
#css #reactjs