Posted on 8 February 2022

React-App (Typescript) from scratch with Webpack

In this tutorial we build up a React-App from scratch. No cra (create-react-app) to have a look on how this can work and to understand a bit of what kinda goes up in behind of create-react-app.

Prerequesites

What you need to follow this tutorial is:

npm (comes with NodeJs or I recommend using NVM)
text editor (I use VSCode)

Let's start with Javascript

Project initialization

First of all we create the directory for our project and then initialize a package.json with npm.

mkdir reactfromscratch
cd reactfromscratch
npm init -y

(using the -y flag to skip the package.json initialization form)

Install dependencies

Our first dependencies are, of course, react and react-dom. So we install them via npm.

npm i react react-dom

Then we need webpack to pack our project together and some packages to compile our javascript to runnable code in the browser. We need the following packages and install them as dev dependencies.

npm i -D webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react

The node_modules folder should be created and our package.json should be updated and look like this:

{
  "name": "reactfromscratch",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "webpack": "^5.68.0",
    "webpack-cli": "^4.9.2"
  }
}

Create the index.html and index.js

Start with creating a folder called src in your projects root directory. In here we place our code files. Then create a basic index.html page and include a div with the id of "root".

<!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 From Scratch</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Next to the index.html create a index.js file.

import ReactDOM from "react-dom";

ReactDOM.render(
  document.createElement("p").innerText("this is react"),
  document.getElementById("root")
);

To be continued...