In the previous part, we already setup react from scratch, but it is not totally complete, we can’t add CSS files for styling and assets. So therefore in this part, we will finish our webpack configuration

Update webpack configuration

Styling configuration

To make a website more beautiful, we need CSS files to set colors, typography, layout, etc. So we need to add a new configuration to our webpack to read CSS files.

We need two package

style-loader used for adding CSS files into components.
css-loader used to make components can read CSS files

pnpm install --save-dev style-loader css-loader

Create CSS files

Create files index.css with any style, in this case, my styling like this

.title {
  font-size: 36px;
  color: pink;
}

Import file index.css kedalam komponen utama yaitu index.jsx agar komponent tersebut dapat menerapkan styling yang sudah ada.
Import file index.css to the root component index.jsx

import React from "react";
import reactDom from 'react-dom/client';

// import CSS
import "./index.css";

const App = () => {
  return (
    <div>
      {/* applying styling to the classname */}
      <h1 className="title">Hello world</h1>
    </div>
  );
};

const root = reactDom.createRoot(document.getElementById('root'));
root.render(<App />);

Configuration assets on Webpack

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./index.jsx"),
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "index.js",
    clean: true,
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\\\\.(js)x?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
          },
        ],
      },
      {
        test: /\\\\.css$/,
        use: ["style-loader", "css-loader"],
      },
	// configuration for images
      {
        test: /\\\\.(png|svg|jpg|jpeg|gif)/i,
        type: "asset/resource",
        generator: {
          filename: "assets/img/[hash][ext][query]",
        },
      },
	// end of configuration for images
    ],
  },
  plugins: [
    new htmlWebpackPlugin({
      template: path.resolve(__dirname, "./index.html"),
    }),
  ],
};

test allowed file extensions
type what module should use
generator akan menghasilkan sebuah file kedalam sebuah folder yang sudah di tentukan.
generator will generate a result of the file and will be in the defined path

After adding that configuration, we should add an image to the component and run pnpm build to test whether our image was successful, and if successful, it will automatically create a new image file in path build/assets/img/nama_file_hash.png

import React from "react";
import reactDom from 'react-dom/client';
import Logo from "./assets/logo.png";
import "./index.css";

const App = () => {
  return (
    <div>
      <h1 className="title">Hello world</h1>
      {/* add new image */}
      <img src={Logo} alt="logo-react" />
    </div>
  );
};

const root = reactDom.createRoot(document.getElementById('root'));
root.render(<App />);

The last step is should run pnpm start to check are our applied styling and assets can work as expected on the website

Conclusion

In this stage, we can use React like what React templates do, we can add styling and assets to each page on the website.

Setup React from scratch part 1

You can access the code in this repository

Setup React from scratch 2 - Update webpack for styling and asset

Update webpack configuration

Styling configuration

Create CSS files

Configuration assets on Webpack

Conclusion