Learning: The New Stack, JavaScript & React

Learning Resources

Selected stack

Environment: Docker Frontend: React (no question anymore), GraphQL and sometimes of REST Backend: Golang (The Future) | Python (Scripting, AI & ML) | node.js (As React companion) | PHP (Blast from the past) API & Serverless: GraphQL, AWS Lambda is important to consider

So what’s this GraphQL thing I keep hearing about? – freeCodeCamp.org GraphQL API Explorer | GitHub Developer Guide

Possible Javascript Bug Sources

Variables which are used without the var keyword (inside functions also) are automatically created in the global scope.
It is possible to have both local and global variables with the same name.

Redux WTF?

If two parallel components share state, we use Redux to avoid having to create a parent component whose sole purpose is to manage state for those two parallel components. You can use hooks to interact with Redux but not replace it.

Dan Abramov introducing Hooks: React Today and Tomorrow and 90% Cleaner React With Hooks

Next.js works better with Material UI React than Semantic UI React 6 tips: Using Next.js for your next web app – Level Up Your Code

Store your URLs in the database (to have nice URL-s without ID)

The Stereotypical Developer in 2018

Forgot Axios or anything similar. As fetch is the new standardised API to interact with remote resources, use it for all your AJAX needs (not only in React). node.js implementations (isomorphic-unfetch = developit/unfetch, bitinn/node-fetch

)

ECMAScript 6 (ES6, also known as ECMAScript 2015)

Learining React

If she can, I can also! From Fashion Designer to Developer

Package Manager

Why Are You Still Using Yarn in 2018?

backend

node.js use npm only npx lets you execute npm package binaries without installing them. Use cases: You don’t want to install packages neither globally nor locally. You don’t have permission to install it globally. Just want to test some commands. NPM is a package manager, you can install node.js packages using NPM NPX is a tool to execute node.js packages. junosuarez/awesome-npx: 🌟 packages and resources that work really well with https://github.com/zkat/npx 🕶 Ladno može i ovo: npx is cool

Introducing npx: an npm package runner NPM - Manages packages but doesn’t make life easy executing any. NPX - A tool for executing Node packages.

Yarn is, like NPM, a package manager for Node.JS. It’s faster and has more features than NPM Yarn is a front-end for npm Since the release of npm 3, some of these advantages are less pronounced

When Yarn burst onto the scene it touted that it was nearly twice as fast as NPM. Which WAS true.

After analyzing Yarn Vs. NPM in this light, I don’t see much of a benefit to using Yarn anymore.

frontend

Bower is a package manager, like npm, which manages frameworks, libraries, assets, and utilities, installs them, and makes sure they are up to date. Traditionally, many web development projects combined npm and Bower. npm was used to manage back-end dependencies, while Bower was used for front-end dependencies. Bye, bye, Bower! Or how to migrate from Bower to npm and Webpack Bower has been deprecated

Generators?

Synonym: client-side scaffolding tool, boilerplate generator

Create-React-App is a boilerplate generator. Next.js is also. Like Yeoman.

Transpilers

Webpack transpile JS (or Typescript) with Babel. Your JavaScript code needs to run in an old browser? No problem, Babel converts the code and makes everything a-okay Want JSX? Flow? TypeScript? Just install a plugin and Babel can handle it. There’s a huge selection of official plugins Minification React transformations

The bright sunny days (with Babel 7). Wouldn’t it be nice to have one JavaScript compiler? Whether your code has ES2015 features, JSX, TypeScript, or something crazy custom — the compiler knows what to do. I just described Babel. Cheeky. By allowing Babel to act as the single compiler, there’s no need to manage, configure, or merge two compilers with some convoluted Webpack sorcery.

Module bundlers

Webpack, Rollup & Parcel

webpack is a module bundler, or in other words, a build tool It provides loaders and plugins that allow you to prepare static file dependencies for your web projects. For example, webpack can take a bunch of CSS files, minify them, and build them as part of your project. webpack fills in an important missing piece for npm users, because many of the assets used to build a web app are not Node.js components. webpack can pull in, prepare and install all those other elements, while npm installs the Node libraries used by the web app.

Parcel web application bundler Switching to Parcel from Webpack

Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development. Hot Module Replacement is one of the most useful features offered by webpack.

Code Splitting - Loading application code can take a long time, especially on mobile. Code-splitting breaks your app into smaller chunks, so that the user only has to load enough JavaScript to get started

React Router?

Well, next.js provides filesystem based routing so I guess I don’t need anything extra.

React Router Documentation: React Router: Declarative Routing for React.js

Redux?

Redux is a tool for managing both data-state and UI-state in React applications.

Some notes:

Namespaces. Solution: don’t use them! They’re outdated. Use the industry standard ES6 modules (import / export) instead. The recommended tslint rules ensure namespaces are not used.

Use React (or Vue) without the build step

Minimal React.js Without A Build Step (Updated) | Shing’s Blog React Without JSX – React

Styling React Components

Avoid traditional CSS-file-based styling (including SASS, PostCSS etc) and use some among many CSS-in-JS frameworks for CSS. Also keep in mind Inline styles and CSS-in-JS are not the same with the major difference is that inline styles only support a subset of CSS.

Good reasons to use:

CSS-in-JS helps with removing dead code (unused CSS)
Unit tests for CSS?

Next.js comes preloaded with a CSS in JS framework called styled-jsx, specifically designed to make your life easier. It allows you to write familiar CSS rules for your components; rules will have no impact on anything other than the components (not even child components). That means, your CSS rules are scoped.

All You Need To Know About CSS-in-JS – Hacker Noon Styling Components in Next.js What is actually CSS-in-JS? – DailyJS – Medium

tuchk4/awesome-css-in-js: Awesome CSS in JS articles / tutorials / videos / benchmarks / comparision

WSL Config

How to go from scratch to Create-React-App on Windows

Connect JS/React to Wordpress API backend

Keen’s Server Side Rendered React + WordPress REST API Boilerplate Even better: postlight/headless-wp-starter: 🔪 WordPress + React Starter Kit: Spin up a WordPress-powered React app in one step

date 04. May 2020 | modified 10. Jun 2024

filename: React & JS » The Modern Stack » Dump