Tutorial: Setup React App from scratch with Webpack’s CSS, SASS and file loaders 2022
The first time I installed React was back in 2020 when I developed an interface for blind users. I remember thinking, “What exactly are these installed files? How do they function together? Which files am I supposed to work on and which are the ones I should not touch?” To satisfy my curiosity, I installed React App from scratch to teach myself and wrote it in a digestible manner for beginners looking to understand. Let’s start!
TLDR: You can make a copy from my Github repo to help you follow along or simply use it!
I assume you have downloaded a code editor of your choice and Nodejs. If not, download them first before proceeding. To check if you have Nodejs, open your command prompt and type ‘node -v’.
1. Create a folder for your React App
Create a folder for your React App, open it in the code editor and open your terminal.
C:\Users\username\>mkdir simple-react-boilerplate
2. Create package.json file
What: This is the identity document of a Nodejs project. It tells us the project version, author, main endpoint, and packages and libraries installed into the project known as dependencies. This needs to be created for every new project.
Use(s): This is the document you share with someone to install your project’s dependencies. One does not share node-modules folder as it is a large folder.
3. Install react and react-dom file
npm install react react-dom
What: This creates a package-lock.json file and node-modules folder. The package-lock.json file locks the version of packages and libraries installed for the project which are stored in node-modules.
4. Install Babel and setup .babel.rc
npm install @babel/core @babel/preset-env @babel/preset-react babel-loader
@babel/core and @babel/preset-env: Transforms modern Javascript code i.e. es2015 into vanilla Javascript that works in all browsers
@babel/preset-react: Transforms React’s JSX code into vanilla Javascript
babel/loader: A package that connects Babel to Webpack to transpile Javascript code
// Add '.babelrc' file to your folder
// Then copy & paste this { "presets": ["@babel/preset-react", "@babel/preset-env"] }
5. Install Webpack
npm install webpack webpack-cli webpack-dev-server
What: Webpack bundles modules used in your project into static output files for production.
Next, we need to create a custom ‘webpack.config.js’ file. This configuration bundles sass and css code into a css folder in the dist folder
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require("path");module.exports = {
mode: "production",
entry: path.resolve(__dirname,"./src/index.js"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "js/[name].[fullhash].js",
clean: true,
},
devServer: {
historyApiFallback: true,
static: "./",
hot:true,
open: true,
},
stats: {
errorDetails: true,
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
new MiniCssExtractPlugin({
filename: "css/[name].css", //creates css folder and puts .css files
}),
],
resolve: {
modules: [__dirname, "src", "node_modules"],
extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: require.resolve("babel-loader"),
},
{
test: /\.(s(a|c)ss)$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "/css/",
},
},
"css-loader",
"sass-loader"],
},
{
test: /\.png|svg|pdf|jpg|gif$/,
use: [
{
loader:"file-loader",
options:
{
outputPath: 'images/',
name: 'images/[name].[ext]',
publicPath: '/images/'
}
}
],
},
],
},
};
We need to install ‘css-loader’, ‘sass-loader’, ‘sass’ and ‘file-loader’ for our bundling configurations.
npm install css-loader sass-loader sass file-loader
6. Create App.js file
Create a folder called ‘src’ and create ‘App.js’ in the folder.
//App.js fileimport React from "react";
const App = () => ( <div></div> );
export default App;
7. Create index.js file
If we look at the webpack.config.js file, we see the entry point is set as ‘./src/index.js’. This index.js file we create is where our react app gets rendered.
import React from "react";
import ReactDOM from "react-dom";
// Import App
import App from './App'ReactDOM.render(<App/>, document.getElementById("root"));
8. Create index.html file
The <div> with the ID root is where the App.js code gets injected. You can rename the id but it MUST match the ReactDOM.render(<App/>,document.getElementById("root"))
in index.js file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
9. Configure scripts in package.json
Under scripts, remove “test” and add “start” and “build”.
"scripts": {
"start": "webpack serve --hot --open",
"build": "webpack --config webpack.config.js --mode production"
},
10. Start the React App
Now, we are ready to run the react app. Simply type the command into the terminal!
I hope that this post has been useful for you!
Originally published at https://heysuen.com on May 28, 2022.