My Miscellaneous Notes on React

• You CAN use React with JSX in browser; it’s slower Running JSX in your browser without Babel

• A reducer is simply a function, a pure function, that takes in a previous state as the first parameter, and an action as the second parameter, and returns a new state.

• useState and useReducer explained: 3 Rules of React State Management My explanation: you use useReducer if there are multiple ways to set one state variable; for single is useState

• useEffect explained: Lifecycle methods, hooks, suspense: which’s best for fetching in React?

• About Lodash and such: How To Use Correctly JavaScript Utility Libraries

• Setup fast dev-env with Parcel: How To Setup Your Local React Playground

  If your playground needs more libraries, you don’t have to install them manually. Simply require the needed library using import syntax, and parcel automatically installs the required dependencies. Woow!

React Tooling

Create React App:

• can select package manager (–use-npm). By default is using yarn as it is also a facebook project
• has templates (–template typescript / find templates: https://www.npmjs.com/search?q=cra-template-*)
  • cra-template-redux (for Redux)
  • cra-template-typescript (for Typescript)
• npm start = yarn start

Lot of boilerplates but some are really notable:

• using Context Global and Hooks; viniarruda/react-boilerplate
• most modern boilerplate for Firebase & React; React Starter Kit

CSS / Styling React

• What is Utility-first CSS? It just feels wrong… Until you try it for yourself! I repeat, you have to try it out to understand it! Why not just write inline styles?

CSS in JS Library

5 Ways to Style React Components in 2020

• styled-components is the leader and has whole ecosystem (extra packages around it)

• Emotion is good alternative and gaining traction

  Emotion supports React Concurrent Mode and that is obviously a big deal. In Concurrent Mode, rendering is interruptible. more: Concurrent UI Patterns

React Testing

google: How to test container components?

Immediately-invoked Function Expressions (IIFE)

We can assign to a variable a value that’s of function type. The function on the right-hand side of the assignment operator is called a “function expression”. We can have anonymous function expressions; without name. When we don’t have an assignment, we can also force a function to be treated as an expression in a lot of ways: prefixing with void or anything else before function keyword; quite often we just put parentheses.

Source: Mastering Immediately-invoked Function Expressions or JavaScript IIFE

I want to declare and immediately instantiate a class. So the question is: Can we have Immediately Invoked Class Expression (IICE)? It turns out, yes, we can! Just prefix with void new class and that’s that. Read more: IICE

How to remove all node_modules folders

find . -name “node_modules” -type d -prune -exec rm -rf ‘{}’ +

Here is an explanation and run in Windows also: How to delete ALL node_modules folders on your machine?

There are also tools like NPKILL - Maintain your development workspace clean. with repo voidcosmos/npkill: List any node_modules 📦 dir in your system and how heavy they are. You can then select which ones you want to erase to free up space 🧹

Hooks as Redux replacement

Use Hooks + Context, not React + Redux

GitHub Student Developer Pack

user: andrea236
pass: PolozitiP110
Connected also with my email: cvladan+gh.andrea@gmail.com 

Learning for free

• yes | 6 months free of Frontend Masters
• no | 1 month of Community-Powered Bootcamp Flatiron School
• no | Two-week course in web development Thinkful
• maybe | free for 30-days One Month | very basic courses
• yes | 12 months of free access to Next Tech; advanced environment
• maybe | 3-month free SymfonyCasts

Great Perks

• yes | icons8; 3-month license

• no | 6 months free Gitpod; online IDE for GitHub

• Bootstrap Studio + GitHub Student Developer Pack; free license while you are a student (forever) Download: https://bootstrapstudio.io/download/

• Scrapy Cloud; 1 Free Forever Scrapy Cloud Unit

• Repl.it; free Hacker plan for one year

• Canva; free year of Canva Pro

Noted perks

Free feature flags for students | ConfigCat feature flags GitHub Desktop | Simple collaboration from your desktop

JavaScript Basics

Q: Class vs Object? A: Class is a template for objects and Object is an “instance” of a class. Syntactically we use commas to separate properties and methods in Objects, but in Classes we don’t need them.

Q: Then, what is Object Prototype vs Class? A: Class defines object type which will be instantiated at runtime. Object prototype is itself an object instance already. Therefore, a prototypal inheritance: a prototype is a working object instance and objects inherit directly from other objects.