Learning full-stack Javascript MongoDB, react and node

Arrow func this 

node - index.js 

exports.i = 'am exports'
console.log(this); // {i: 'am exports'}

let util = {
    f1: function() {
        console.log(this);
    },
    
    f2: () => {
        console.log(this);
    }
}

util.f1(); // {f1: ƒ, f2: ƒ}
util.f2(); // index.js:10 {i: "am exports"}

Arrow functions, beside being shorter and more fun to type, are lexically scoped, which is a fancy way of saying that they close over the this keyword available on their parent, while regular functions use the caller to determine what's inside their this keyword. For example, in a Node module, the top level, this keyword, is the exports object, which is empty by default.I'm adding a property i here just to identify it. In here, I have a util object, which defines two functions.

F1 is regular scope, f2 is arrow scope. When we normally call f1, the this keyword in f1 will be the caller, which is the util object, while the this keyword in f2 will be the parent scope, which is the exports object.

 

const Component = require('react').Component

const {Component} = require('react').Component

import react, {Component} from 'react' 

 

Beginning project from scratch (with only Readme.md, LICENSE, .git, .gitignore from github):

1. npm installation

npm init (generate package.json)

Main dependency:

npm i express (create a node server)

npm i mongodb (connect to database)

npm i react react-dom (react: user interface, react-dom: render interface)

npm i prop-types

Dev dependency:

npm i -D webpack webpack-cli (translate modular code into something the browser can understand. webpack: library,

webpack-cli: cmd interface)

npm i -D babel-loader @babel/node @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

( Now, Wepback itself is just the bundler.We still need to configure it with loaders to transform the JFX extension code into what React understands today. That loader is Babel. Babel will also transform a few of the modern JavaScript features that are not yet supported natively in all browsers.)

npm install -D nodemo (Now, when we make changes in a Node project, a restart is required for the changes to be reflected in any running process, but instead of manually restarting Node, let's bring in the nodemon package. npm install -D nodemon. This package can monitor our files and autorestart Node for us when we save changes to this)

npm i -D eslint babel-eslint eslint-plugin-react (eslint configuration lacks!)

2.configurations