React Add CSS to Your Site

(Last Updated On: )

If you haven’t already done so please follow this tutorial in setting up your React/Python site.

Folder Structure:

• You need to add file(s) to your existing structure.
• Inside testApp create the following:
  • folder: app
    • folder: home
    • folder: css
      • file: home.css

NPM:

We need to add style-loader and css-loader to our application.

npm install style-loader --save
npm install css-loader --save
npm install create-react-class --save

Webpack.config.js Setup:

Now that we have installed our loaders we need to setup webpack.config.js to use our new loaders. The below will go in the “loaders” array.

	{
		test: /\.css$/,
		loader: 'style-loader!css-loader'
	}

Things to note:

• The ! in the loader section just means it applies to both.
• The .css in the test area says any css file.

Home.jsx Modification:

We need to pull in our css file for home.jsx. Notice the “require” now in our home.jsx file and that we added a class to our div.

var React = require("react");
var ReactDOM = require("react-dom");
var createReactClass = require("create-react-class");
 
require("../css/home.css");
 
var Home = createReactClass({
	render: function() {
		return (<div className="div-hi">Hi</div>);
	}
});
 
ReactDOM.render(<Home />, document.getElementById("app"));

Home.css Setup:

Put anything you want in the css file as long as it matches the classname we set in home.jsx.

.div-hi {
	color: red;
}

Run:

We can now run the following to build and deploy our site. It will be available on http://localhost:5000/. Once you login you will be able to see our red “hi”. As long as you following the building a react python site creation.

webpack
flask run