Adding CSS Styles and Image files to my React Website
Stylize your React!
Following up on my last topic of building my first React website, I wanted to spruce up the our React app with some styles and maybe images! If you don’t already have a React project built, follow the guide HERE and come back!
From this point on, I will assume that we are using the same project from our previous topic, if you do not have it, feel free to clone a copy from my Github account. If you already have your own project going, not to worry! The most important thing is to ensure you have the webpack.config.js and package.json , then we are ready to go!
Lets throw in some styles
We’ll start with something really simple. If you have a CSS file hosted someone online, simply add the CSS style into you index.html as follow
<head>
...
<link rel="stylesheet" href="//link_to_your.css" />
...
</head>But of course that’s not why we are here, with Webpack we can actually compile the CSS as part of our compiled JavaScript. To do this, let’s install a css-loader by running
npm i css-loader style-loader --save-devand add a rule to our webpack.config.js so that Webpack knows what to do with your css file
module.exports = {
module: {
rules: [
...
{
// this tells webpack to searhc through .css
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
...
]
}
...
};Last thing is to do now is to create an index.css file under src/ folder with the following example
h1 {
text-align: center;
}#main_wrapper {
margin: 1em;
}.btn-custom {
color: green
}
and import them in our main index.js (although this import can be done in any of your JavaScript file).
// Since webpack enter from here, let's import the file and trigger it
import style from "./index.css";
import Home from "./scene/home.jsx";Adding class names to React component is slightly different than a regular html, use className instead as follows
class Button extends Component {
... render() {
return ( // Notice we change "class" to "className"
<button type="button" className="btn-custom" onClick={this.onClick}>Click Me!</button>
);
}
}
now run your React app with npm run start and you can see your custom styles applied to the elements.
But why do I have to add the CSS as part of the compilation? Can’t I just add it to my html <head> as an import? That is true, but then you will not have the ability for Webpack to auto refresh on change and thats an extra file you will need to keep track of.
Another benefit to precompiling your CSS with webpack is that you can use css extensions like SASS and LESS that can make your life wayy easier. As an example, we can install a SASS loader
npm install sass-loader node-sass webpack --save-devenable it in our webpack.config.js
module.exports = {
module: {
rules: [
...
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
...
]
}
...
};create ourself a sass style
$white: white;.btn-custom {
color: $white;
text-decoration: none;
padding: 5px 10px;
border-radius: 3px;
font-family: cursive;
font-size: 2em;
}
and finally import it in our index.js
// Since webpack enter from here, let's import the file and trigger it
import style from "./index.css";
import sassStyle from "./index.scss";
import Home from "./scene/home.jsx";Run our application and see that your styles has been properly added!
Let’s throw in some Images
Similar to CSS, if you have your image hosted in a CDN somewhere adding it to your project is as simple as inserting your URL into your project; but we’re not here for that, we want webpack to know where the file is and automatically convert it to a relative path in the code. The images and file will still exist as its own (not bundled in the js), but they will be renamed and moved into our dist folder ready to be deployed.
As you guessed it, we first need to add the file-loader installed
npm i file-loader --save-devand configure it to our webpack.config.js
module.exports = {
module: {
rules: [
...
{
test: /\.(png|svg|jpg|gif)$/, // possible image files
use: ['file-loader'],
},
...
]
}
...
};Once this is done, we can easily add images by importing them into our project. I will be editing our scene/Home.jsx
...
import image from "../media/react_logo.png";class Home extends Component {
render() {
return (
<div id="main_wrapper">
<h1>Hello Wold</h1>
<Button />
// simply replae with variable
<img src={image} />
</div>
);
}
}...
and it will also work if you edit any of the css using relative path
...body {
background: url("./media/background.jpg");
}...
Once set and done, you can bundle the project together using npm run build . Webpack will convert all the files relative links and copy it over to our dist folder. From here, you have the decision to deploy the entire folder in your server so that other people can use it!
Where to go from here
I wrote this as part of the series I have to create a full React web application that we will eventually deploy. I created repo for each section that I have written, so feel free to grab the sample from Github.
Check out my past topics:
Stay tuned if you want to know how to:
- Creating unit test for your React app
- Deploy your app to AWS, complete with custom endpoint and SSL
- Build your React app as a reusable React component
- Build your React app as a reusable JavaScript module
- Publishing your first NPM module
