This blog post as most others here is in a "notes to myself" category , in case its useful to any other reader - well thats great , i dont really have the time to create very readable user focused content as on date .
Just starting with React.js , few observations , specially so to document the delta/diff , that i see between the Python/CONDA/ Miniconda style of packaging vs. the NPM/NVM and Node/NodeJS style of packaging.
#
$ node -v
v12.13.0
$ whereis node
node: /home/dhankar/.nvm/versions/node/v12.13.0/bin/node
#
Firstly - where was my option to choose where to install Node ?
I have node installed in my Home DIR - why ?
#
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 13226 100 13226 0 0 3804 0 0:00:03 0:00:03 --:--:-- 3804
=> Downloading nvm from git to '/home/dhankar/.nvm'
=> Cloning into '/home/dhankar/.nvm'...
remote: Enumerating objects: 278, done.
remote: Counting objects: 100% (278/278), done.
remote: Compressing objects: 100% (249/249), done.
remote: Total 278 (delta 33), reused 88 (delta 16), pack-reused 0
Receiving objects: 100% (278/278), 142.36 KiB | 0 bytes/s, done.
Resolving deltas: 100% (33/33), done.
Checking connectivity... done.
=> Compressing and cleaning up git repository
=> Appending nvm source string to /home/dhankar/.bashrc
=> Appending bash_completion source string to /home/dhankar/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
(demo_venv) dhankar@dhankar-VPCEB44EN:~$
#
Why wasnt i informed that there is a GIT Repo thats going to be cloned ?
Kudos , the package manager ended up making the required edits to my
/home/dhankar/.bashrc , which is cool as most python package managers that i know of dont make changes there or the human is supposed to edit the - /home/dhankar/.bashrc , and then also source/save etc .
npx - So whats the binary file named - npx ?
npx is a for the npm registry ( the npm registry being similar to the PyPi for Python the listing or register for all the packages for Python ) what probably "pip / pip3" is for Conda or the PyPi.
Quote ---- from Source = https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b
npx is a tool intended to help round out the experience of using packages from the npm registry — the same way npm makes it super easy to install and manage dependencies hosted on the registry, npx makes it easy to use CLI tools and other executables hosted on the registry.
---- UnQuote
# terminal dump below ----
dhankar@dhankar-VPCEB44EN:/media/dhankar/Dhankar_1/demo/nginx_dc_oct19$ npx create-react-app my-app
npx: installed 91 in 14.483s
Creating a new React app in /media/dhankar/Dhankar_1/demo/nginx_dc_oct19/my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
> core-js@2.6.10 postinstall /media/dhankar/Dhankar_1/demo/nginx_dc_oct19/my-app/node_modules/babel-runtime/node_modules/core-js
> node postinstall || echo "ignore"
> core-js@3.2.1 postinstall /media/dhankar/Dhankar_1/demo/nginx_dc_oct19/my-app/node_modules/core-js
> node scripts/postinstall || echo "ignore"
+ react@16.11.0
+ react-scripts@3.2.0
+ react-dom@16.11.0
added 1475 packages from 693 contributors and audited 904933 packages in 113.47s
found 0 vulnerabilities
Success! Created my-app at /media/dhankar/Dhankar_1/demo/nginx_dc_oct19/my-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd my-app
npm start
Happy hacking!
dhankar@dhankar-VPCEB44EN:/media/dhankar/Dhankar_1/demo/nginx_dc_oct19$ ls -ltr
# Ends - terminal dump #
Initial / default contents of the - package.json , file
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
While trying to paste in the content of the - package-lock.json , file , blogger throws an error - so i guess i let that be for now , probably will check it into Git later on ....
Suffice to say that the DIST wheel for the package manager has created the -package-lock.json file , and the META-DATA for the package is written within this file , few lines extract from this file is as seen below ....
{
"name": "my-app",
"version": "0.1.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@babel/code-frame": {
"version": "7.5.5",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
"integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==",
"requires": {
"@babel/highlight": "^7.0.0"
}
},
"@babel/core": {
"version": "7.6.0",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.6.0.tgz",
"integrity": "sha512-FuRhDRtsd6IptKpHXAa+4WPZYY2ZzgowkbLBecEDDSje1X/apG7jQM33or3NdOmjXBKWGOg4JmSiRfUfuTtHXw==",
"requires": {
"@babel/code-frame": "^7.5.5",
"@babel/generator": "^7.6.0",
"@babel/helpers": "^7.6.0",
"@babel/parser": "^7.6.0",
"@babel/template": "^7.6.0",
"@babel/traverse": "^7.6.0",
"@babel/types": "^7.6.0",
"convert-source-map": "^1.1.0",
"debug": "^4.1.0",
"json5": "^2.1.0",
"lodash": "^4.17.13",
"resolve": "^1.3.2",
"semver": "^5.4.1",
"source-map": "^0.5.0"
},
Further details about the package.json file and its mandatory "directives" can be read here - https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/
The package.json file is a MANIFEST file - Source - WIKI - https://en.wikipedia.org/wiki/Manifest_file
A manifest file in computing is a file containing metadata for a group of accompanying files that are part of a set or coherent unit. For example, the files of a computer program may have a manifest describing the name, version number, license and the constituting files of the program.
Linux distributions rely heavily on package management systems for distributing software. In this scheme, a package is an archive file containing a manifest file. The primary purpose is to enumerate the files which are included in the distribution, either for processing by various packaging tools or for human consumption.
All NPM ( Node Package Manager ) packages will have a package.json file , further questions that come up at this stage .
So whats NPM - its a package Manager similar to "pip" , Conda / Miniconda etc ...from the Python world. Within the NPM structure . What are Local and Global Packages ? What are dependencies and dev - dependencies ?
To see a basic level help screen related to NPM - at the terminal
$npm
dhankar@dhankar-VPCEB44EN:~/.npm$ npm
Usage: npm <command>
where <command> is one of:
access, adduser, audit, bin, bugs, c, cache, ci, cit,
clean-install, clean-install-test, completion, config,
create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
edit, explore, get, help, help-search, hook, i, init,
install, install-ci-test, install-test, it, link, list, ln,
login, logout, ls, org, outdated, owner, pack, ping, prefix,
profile, prune, publish, rb, rebuild, repo, restart, root,
run, run-script, s, se, search, set, shrinkwrap, star,
stars, start, stop, t, team, test, token, tst, un,
uninstall, unpublish, unstar, up, update, v, version, view,
whoami
npm <command> -h quick help on <command>
npm -l display full usage info
npm help <term> search for help on <term>
npm help npm involved overview
Specify configs in the ini-formatted file:
/home/dhankar/.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config
npm@6.12.0 /home/dhankar/.nvm/versions/node/v12.13.0/lib/node_modules/npm
dhankar@dhankar-VPCEB44EN:~/.npm$
if and when we need to create a - package.json , file at the terminal -
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (dhankar_1)
version: (1.0.0)
description: test_npm_package
entry point: (index.js)
test command:
git repository:
keywords:
author: RohitDhankar
license: (ISC)
About to write to /media/dhankar/Dhankar_1/package.json:
{
"name": "dhankar_1",
"version": "1.0.0",
"description": "test_npm_package",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "RohitDhankar",
"license": "ISC"
}
Is this OK? (yes)
dhankar@dhankar-VPCEB44EN:/media/dhankar/Dhankar_1$ ls -ltr
total 8076
drwxrwxr-x 7 dhankar dhankar 4096 Oct 29 22:12 demo
drwxrwxr-x 4 dhankar dhankar 4096 Oct 30 20:43 a5_test_sphinx
-rw-rw-r-- 1 dhankar dhankar 233 Nov 15 12:02 package.json
dhankar@dhankar-VPCEB44EN:/media/dhankar/Dhankar_1$
#
The React toolchain recommendations and what they mean [FOO_TBD]
Recommended Toolchains
The React team primarily recommends these solutions:
- If you’re learning React or creating a new single-page app, use Create React App.
- If you’re building a server-rendered website with Node.js, try Next.js.
- If you’re building a static content-oriented website, try Gatsby.
- If you’re building a component library or integrating with an existing codebase, try More Flexible Toolchains.
Quote ---- from Source = Learning React - by Alex Banks and Eve Porcello
Popularity of Functional JavaScript
In addition to the changes emerging at a language level, there is a lot of momentum around functional JavaScript programming. JavaScript isn’t necessarily a functional language, but functional techniques can be used in JavaScript code.
React emphasizes functional programming over object-oriented programming. This shift in thinking can lead to benefits in areas like testability and performance. But when a lot of React materials assume an understanding of the paradigm, it can be hard to learn so much
at once.
Quote ---- from Source = Learning React - by Alex Banks and Eve Porcello
FOO_Q----is the search index for QUESTIONS
FOO_A---- the search index for Answers / Links to further reads
FOO_Q---- Whats Babel ?
FOO_A---- Inspired by the Tower of "BABEL" from the pre-christ history (Book of Genesis) babel is --- SOURCE --- https://medium.com/front-end-weekly/a-world-of-javascript-transpilers-b3b7b880a1be
Aptly named, Babel is a platform that translates many of the extended language functionalities into ES5, which is a version of ECMAScript that is standard on all modern browsers. This makes Babel a launchpad for many of the slick and shiny JavaScript platforms out there because it allows us to extend the functionality of JavaScript while maintaining its backwards-compatibility. In other words, it lets you build out JavaScript without breaking the web!
For example, Babel is an integral part of the React build. In React, when we use JSX to build out the virtual DOM elements in psuedo-HTML, we are writing in a language that Babel is built to understand. In spinning up a build, we are using Babel to translate the JSX, as well as the rest of the JavaScript in React, into a single ES5 file. Ever looked at the static .js file of an app you’ve spun up from React and noticed that it’s literally thousands of lines longer than your original project files? Yep, that’s Babel. In fact, Babel has its own preset specifically for React, among others:
FOO_Q---- Whats WEBPACK ?
FOO_Q---- Whats Code Splitting ?
FOO_Q---- Whats Code Compression ?
FOO_Q---- Whats SCSS - Why it needs to be Pre-processed ?
FOO_Q---- Whats REDUX , how is it used as a Client Data Container ?
FOO_Q---- Whats "transpiling" code ? Why we need to do that with JS6 - REACT Code?
FOO_A--- from Source = Learning React - by Alex Banks and Eve Porcello
Transpiling ES6
Not all web browsers support ES6, and even those that do don’t support everything.
The only way to be sure that your ES6 code will work is to convert it to ES5 code
before running it in the browser. This process is called transpiling. One of the most
popular tools for transpiling is Babel.[https://babeljs.io/]
FOO_Q---- Whats JEST Testing , Whats a REACT ROUTER ?
FOO_Q---- Whats SENTRY -- https://sentry.io/for/react/
Further reads --- React Conf's
REACT RALLY - http://www.reactrally.com
No comments:
Post a Comment