JayChung xJkit

Charts are from different sources and thus colors are inconsistent, please carefully read the chart's legends.

Like this? Check React Native vs Flutter: https://gist.github.com/tkrotoff/93f5278a4e8df7e5f6928eff98684979

Stack Overflow trends

https://insights.stackoverflow.com/trends?tags=reactjs%2Cvue.js%2Cangular%2Csvelte%2Cangularjs%2Cvuejs3

React + Typescript Cheatsheet

Setup

If you use atom... download & install the following packages:

What are Typescript type definition files? (*.d.ts)

lodash v4.17.20

There are many tutorials and articles available online which explain functional programming. Examples show small functions, which are composed into others which again get composed. It is hard to imagine how it would all work, then come the analogies and then the math. While the math is necessary to understand it can be difficult to grasp initially. The analogies on the other hand, (at least for me) are not relatable. Some articles assume the reader knows the different terminologies of FP. Over all I felt it is not inviting to learn.

This introduction is for those who have had a tough time understanding those analogies, taken the plunge to functional programming but still have not been able to swim. This is yet another tutorial on functional programming

Terminology

Functions as first class citizens

Functions are first class means they are just like anyone else, or rather they are not special, they behave the same as say primitives or strings or objects.

	import PropTypes from 'prop-types';
	import React from 'react';

	class Carousel extends React.Component {
	static propTypes = {
	limit: PropTypes.number,
	total: PropTypes.number,
	data: PropTypes.oneOfType([
	PropTypes.object,
	PropTypes.array

	// ./postinstall.js
	'use strict';

	const fs = require('fs');

	const RN_TSD = __dirname + '/node_modules/@types/react-native/index.d.ts';
	const raw = fs.readFileSync(RN_TSD);

	// Fix @types/node conflict
	// @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/15960

	// This is an advanced example! It is not intended for use in application code.
	// Libraries like Relay may make use of this technique to save some time on low-end mobile devices.
	// Most components should just initiate async requests in componentDidMount.

	class ExampleComponent extends React.Component {
	_hasUnmounted = false;

	state = {
	externalData: null,
	};

	// 'downloadFile.js', written by blending two solutions:
	// 'js-download' https://github.com/kennethjiang/js-file-download
	// 'Anders Paulsen' https://blog.jayway.com/2017/07/13/open-pdf-downloaded-api-javascript/

	export function downloadFile(data, filename, mime) {
	// It is necessary to create a new blob object with mime-type explicitly set
	// otherwise only Chrome works like it should
	const blob = new Blob([data], {type: mime \|\| 'application/octet-stream'});
	if (typeof window.navigator.msSaveBlob !== 'undefined') {
	// IE doesn't allow using a blob object directly as link href.

	// ==UserScript==
	// @name Trello Syntax Highlight
	// @namespace https://gist.github.com/AsyncWizard
	// @version 0.1
	// @description try to take over the world!
	// @author AsyncWizard
	// @require https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js
	// @resource https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/github.min.css
	// @match https://trello.com/*
	// @grant none

	// Paste these lines into website's console (Win/Linux: Ctrl + Shift + I / Mac: Cmd + Alt + I)

	if(!!window.React \|\|
	!!document.querySelector('[data-reactroot], [data-reactid]') \|\|
	Array.from(document.querySelectorAll('*')).some(e => e._reactRootContainer !== undefined \|\| Object.keys(e).some(k => k.startsWith('__reactContainer')))
	)
	console.log('React.js');

	if(!!document.querySelector('script[id=__NEXT_DATA__]'))
	console.log('Next.js');