Create React App without command-line tool

Create React App without command-line tool

Create React Application using Babel, and Webpack without using create-react-app

Dileepa Chandima's photo
Dileepa Chandima
·

3 min read

Hey guys, Today I'm going to initiate a React project without using create-react-app CLI tool, we are going to use Webpack and babel today ...... yeeee Let's get started.

Steps

  1. Initiate the project using npm

  2. Install react and react-dom

  3. Install Babel for JS transpiling

  4. Install Webpack modules and create the configuration

  5. Add basic files ( index.html, index.js, App.js )

  6. Run the application 🤩

  7. Add TypeScript

Initiate the Project

To initialize the project we can use npm-init , it will ask a few questions from you to get better description about the project or else you can use npm init -y to get all the default settings

Install react and react-dom

You have created an empty node application, now we need to install all the necessary dependencies to the project to convert this project as a react application. To make this a react application we need to install react and react-dom modules that provide react and dom functionalities.

yarn add react react-dom

Install Babel for JS transpiling

Now we are going to install the required Babel modules, Babel is a tool that compiles the ES6+ features to old versions of JS, and also the React JSX need to compile to a code that our browsers understand.

yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

Let's create the Babel config .babelrc file in the root folder

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

Install Webpack modules and create the configuration

Now we need to install Webpack, which is a static module bundler for JS applications. Webpack is the most used JS bundler.

yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin

Let's create the Webpack configuration in the root

const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js",
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },,
    ],
  },
};

Add basic files ( index.html, index.js, App.js )

Now it is the time to implement the react, let's initiate the react by creating the index.html index.js and App.js files under src folder

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";
import { createRoot } from "react-dom/client";

const domNode = document.getElementById("root");
const root = createRoot(domNode);
root.render(<App />);

App.js

import React from "react";

export const App = () => {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
};

Run the application

To run the application you need to add new scripts to the package.json file

{
...
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
...
}

Let's run the local server 👑

yarn start

You can build the application in production mode by runing this

yarn build

Add TypeScript

Let's add TypeScript to the project

yarn add -D typescript ts-loader @types/react @types/react-dom

And Now we need to create the TypeScript config tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node"
  }
}

And let's update the Webpack configuration to use Typescript, This is the new Webpack config file

const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /.tsx?$/,
        exclude: /node_modules/,
        use: "ts-loader",
      },
    ],
  },
};

And run yarn start you can see your application running on the browser .....

You can find my code here - https://github.com/dilipchandima/react-webpack-babel-blog

ReactwebpackTypeScriptJavaScript