React Template App (w/o create-react-app)

mkdir
cd to newly created

npm init -y

 [2007][react-from-scratch]$ npm init -y
 Wrote to /home/brigzz/webdev/react-from-scratch/package.json:

 {
   "name": "react-from-scratch",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
 }

Install react and react-dom libraries:

npm install react react-dom

 [2008][react-from-scratch]$ npm install react react-dom
 npm notice created a lockfile as package-lock.json. You should commit this file.
 npm WARN react-from-scratch@1.0.0 No description
 npm WARN react-from-scratch@1.0.0 No repository field.

 + react@16.13.1
 + react-dom@16.13.1
 added 8 packages from 3 contributors and audited 22 packages in 10.993s
 found 0 vulnerabilities

You should see some updates in package.json as well as libraries and dependencies in node_modules folder:

 [2019][react-from-scratch]$ ls node_modules
 js-tokens     object-assign  react      react-is
 loose-envify  prop-types     react-dom  scheduler

At this point, you might want to create a .git-ignore file and add node_modules and dist to the list so they will be updated in your git repository.
```
 [2021][react-from-scratch]$ cat .gitignore
 node_modules
 dist
```

Create folder app. Add index.html, index.css and index.js inside the folder.

 [2022][react-from-scratch]$ mkdir app
 [2023][react-from-scratch]$ ls
 app  node_modules  package.json  package-lock.json
 [2024][react-from-scratch]$ touch index.css index.js index.html
 [2030][react-from-scratch]$ ls app
 index.css  index.js	 index.html

Boilerplate for index.html

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

Add to index.js

 const React = require('react');
 const ReactDOM = require('react-dom');
 require('./index.css');

 class App extends React.Component {
     render() {
         return(
             <div>Hello World</div>
         )
     }
 }

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

index.css

 body {
     background-color: bisque;
 }

 #app {
     color: lightseagreen;
 }

There are a lot of variations as to what to install for babel and webpack. For now I will be installing these:

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

//not installed
html-loader 

@babel/core - core functionality of Babel
@babel/preset-env - allows you to use the latest JavaScript without needing to micromanage which syntax transforms
@babel/preset-react - Adds support for JSX
babel-loader- allows transpiling JavaScript files using Babel and webpack.
webpack - to bundle JavaScript files for usage in a browser
webpack-cli - provides a flexible set of commands for developers to increase speed when setting up a custom webpack project.
webpack-dev-server - Serves a webpack app
css-loader - help webpack to collect CSS from all the css files referenced in your application and put it into a string
style-loader - style-loader would take the output string generated by the above css-loader and put it inside the
html-webpack-plugin - Plugin that simplifies creation of HTML files to serve your bundles.

Create webpack.config.js file in root folder of the application.

[2033][react-from-scratch]$ touch webpack.config.js
[2034][react-from-scratch]$ ls
app  node_modules  package.json  package-lock.json  webpack.config.js

Add below code into file:

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

module.exports = {
    mode: 'development',
    entry: './app/index.js',
    output: {
        //location of bundle directory/file
        path: path.resolve(__dirname, 'dist'),
        filename: 'index_bundle.js'
    },
    module: {
        rules: [
            { test: /\.js$/, use: 'babel-loader'},
            { test: /\.css$/, use:[ 'style-loader', 'css-loader']}
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({template: './app/index.html'})
    ]
};

Add the following to package.json for babel and scripts:

  "babel" : {
    "presets": ["@babel/preset-env", "@babel/preset-react"]
  },
  "scripts": {
    //for bundling into dist folder
    "bundle": "webpack",
    //for dev
    "start-dev" : "webpack-dev-server --open"
  },

To bundle:

[2038][react-from-scratch]$ npm run bundle

To run as dev server:

[2038][react-from-scratch]$ npm run start-dev

react-template-without-create-react-app

React Template App (w/o create-react-app)

React Template App (w/o create-react-app)