The best of breed
Books on Functional Programming
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
- 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.
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)
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)
If she can, I can also! From Fashion Designer to Developer
- 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.
- 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
Synonym: client-side scaffolding tool, boilerplate generator
Create-React-App is a boilerplate generator. Next.js is also. Like Yeoman.
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.
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.
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 is a tool for managing both data-state and UI-state in React applications.
- 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
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.