Spring Boot + React application

Could this process be easier than this?

https://dzone.com/articles/spring-boot-and-react-happily-ever-after

Test Driven Development (TDD)

AAA - Arrange, Act, Assert

DIE - describe - it - expect

Fail - Pass - Refactor

Bare-bones ReactJS application with Jest and Enzyme

https://github.com/kadirisani/reactjs-jest-tutorial

Good References:

https://codewithhugo.com/jest-fn-spyon-stub-mock/

It took me a while to find this online tool where TDD can be practiced. Enjoy TDD: https://repl.it/languages/jest  -- it stopped working :(

Webpack made easy :)

Came across this blog and delighted to read the details on how to set up a ReactJs application from scratch. Really awesome, read on: https://www.valentinog.com/blog/babel/

While following the example, use the following in webpack.config.js instead of what was suggested in the blog to resolve the .jsx files:

const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {

    module: {

        rules: [

            {

                test: /\.(js|jsx)$/,

                exclude: /node_modules/,

                resolve: {

                    extensions: [".js", ".jsx"]

                },

                use: {

                    loader: "babel-loader"

                }

            },

            {

                test: /\.html$/,

                use: [

                    {

                        loader: "html-loader"

                    }

                ]

            }

        ]

    },

    plugins: [

        new HtmlWebPackPlugin({

           template: "./src/index.html",

           filename: "./index.html"

        })

    ]

}

And use the following in index.js file (remove the last two lines from Form.js):

import React from 'react'

import ReactDOM from "react-dom"

import Form from "./js/components/Form"

const wrapper = document.getElementById("container")
wrapper ? ReactDOM.render(<Form />, wrapper) : false

Do npm run build and use the main.js file in https://reactjs.org/docs/add-react-to-a-website.html#add-react-in-one-minute (use a div with id 'container' in index.html)

Also, remove .babelrc and create babel.config.js under project and add the following content:

module.exports = { presets: ['@babel/preset-env', '@babel/preset-react'], };

To add Jest to run the unit tests, do the following steps:

npm i jest babel-jest react-test-renderer --save-dev

npm i enzyme --save-dev

In package.json

"scripts" : {

    "test": "jest"

}

To add SASS/SCSS to this project, check this out: https://medium.com/front-end-weekly/how-to-add-sass-or-scss-to-create-react-app-c303dae4b5bc

NPM - the node package manager

You should always revisit the basics just to make sure that you still have that bird's eye view:

https://medium.com/the-andela-way/build-and-publish-your-first-npm-package-a4daf0e2431

https://www.digitalocean.com/community/tutorials/how-to-create-a-node-js-module

A React PWA application

Please check the following URLs.:

https://medium.com/front-end-weekly/build-a-realtime-pwa-with-react-99e7b0fd3270

Reactjs Hooks

As per Reactjs docs:

A Hook is a special function that lets you "hook into" React features.

- in other word -

Hooks are functions that let you 'hook into' React state and lifecycle features from function components. 

References:
https://medium.com/free-code-camp/learn-the-basics-of-react-hooks-in-10-minutes-b2898287fe5d (very simple and elegant way of explanation)
https://reactjs.org/docs/hooks-intro.html
https://daveceddia.com/usecontext-hook/

https://reactjs.org/docs/hooks-overview.html

**https://reactjs.org/docs/hooks-reference.html - this is where you can find all the hooks & examples


from the author who created global-state-hook: https://medium.com/@chathuranga94/managing-global-state-with-reacts-hooks-context-api-9b9f781d8a3f

About custom hooks: https://dev.to/wellpaidgeek/how-to-write-custom-hooks-in-react-1ana

About React Context: https://www.freecodecamp.org/news/react-context-in-5-minutes/

Good examples on:

useContext: https://www.robinwieruch.de/react-usecontext-hook

customHooks: https://blog.bitsrc.io/writing-your-own-custom-hooks-4fbcf77e112e

A simple example on using some of the hooks:
NOTE:

1. Once you create app using create-react-app, remove all the files in public and src folders.
2. Add index.html in public folder and rest of the files in src folder

JavaScript Sandbox

Here's one sandbox where we can play with plain vanilla JavaScript:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment