How to set up a React application without using create-react-app (CRA)

ಶುಭಾಶಯಗಳು! (Śubhāśaya)

So, I hope you also like to do some mechanical work and like to assemble a React project just like a toy train ( I used to break that train all the time 👀 ). Using a CRA tool is really good when you want to start with your project without worrying about configurations but it becomes a little tedious job to eject their default configurations later. So, no worries, we can learn how to set up a basic react application without using the create-react-app tool.

Little respect for Webpack

Webpack is a module bundler for modern JavaScript applications. It is a tool that builds your code and manages all your styles and JavaScript files mainly. Although it has more applications like Task Runner (not important for this blog) etc. Suppose you are building a web application and it has many files such as HTML files or CSS files, images and other assets, etc. So, now whenever you try to load your web app to any browser, it has to download every file and needs to make sure the order of the script tags is correct. It might face some difficulty in doing so. That's where Webpack comes into the picture. Webpack takes all these files and bundles them into one which helps to make the downloading task simple for the browser.

Little respect for Babel too

JavaScript is a scripting language that has multiple versions such as ES5, ES6, etc. Whenever we build any React based application, it uses the ES6 import module to include a react component. But the browsers such as Chrome or Firefox do not support ES6/7 natively. That's when we require a transpiler that will transpile ES6/7 to ES5 and Babel is one such transpiler. It comes with different presets. A preset is like a book, like how to transpile Arrow functions, etc.

Now, get back to the business

business gif.gif

We will create a react project without using the CRA tool.

Prerequisites

  • Node. js ( Just to have npm ).
  • React. js ( I am assuming you have basic knowledge about React.js )

and that's it.

Note: Whatever the code snippets I will be sharing, please follow it along with me for the best practice. 😉

Step 0: Initialize a project and install the dependencies for the project by the following commands.

npm init -y
npm install react react-dom
npm install --save-dev webpack webpack-dev-server webpack-cli html-webpack-plugin @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader

Step 1: Create a file named webpack.config.js and paste the below code.

var path = require('path');
var HtmlWebpackPlugin =  require('html-webpack-plugin');

module.exports = {
    entry : './src/index.js',
    output : {
        path : path.resolve(__dirname , 'dist'),
        filename: 'bundle.js'
    },
    module : {
        rules : [
            {
                 test : /\.(js|ts)$/,
                exclude: '/node_modules/',
                use:'babel-loader'
            }
            {
                 test : /\.css$/,
                 use:['style-loader', 'css-loader']}
        ]
    },
    mode:'development',
    plugins : [
        new HtmlWebpackPlugin ({
            template : 'public/index.html'
        })
    ]
}

Now, let's try to understand some terms in the above code.

  • Entry: This will help webpack to figure out the entry point of the application.

  • Output: The webpack will bundle all the js/ts files into a single file, having the filename as bundle.js.

  • Module Rules: It helps webpack to know which file to check and bundle. It is going to exclude the files from node_modules.

Step 2: Now, create a public folder and create an index.html file within that folder. Paste the below code for the index.html 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>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

Here, the div inside the body tag having id as “root” is where the whole application is going to render.

Step 3: Create the src folder and create an index.js file within that folder. Paste the below code into that file.

import React from 'react';
import ReactDOM from 'react-dom';
import './main.css';

class App extends React.Component{
    render(){
        return(
            <div className="container">
                <p>Hello from Wanderland</p>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'))

Step 4: Add the babel properties in the package.json file above the scripts tag.

"babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  }

Step 5: Now, add the below script in the package.json file.

"dev": "webpack serve --config webpack.config.js --open",
"build":"webpack"

Package.json file will look like this.

package.json pic.png

Step 6: Run this command npm run start.

finished pic.png

Now, have some fries🍟! You are done with the setup. Congratulations. ✔

If you want, you can check out the GitHub Repo: link

Last Note

Stuck somewhere or need any guidance, contact me on LinkedIn. Don't worry, you don't have to buy me a coffee (I don't like it).

If this blog helps you in any way, then please like it and share it on LinkedIn. It helps me to talk more Jiber Jaber like this.

ধন্যবাদ ❤