M. Mücahit Tezcan FocusThen

🦄

Everyting is JavaScript

FocusThen / useState.js

Created February 21, 2021 20:44

React useState from scratch

	import React from 'react';
	import ReactDOM from 'react-dom';

	let callCount = -1
	let states = []

	function useState(initValue) {
	const id = ++callCount

	if (states[id]) return states[id]

FocusThen / vdom-finished.html

Created June 26, 2020 08:00 — forked from themarcba/vdom-finished.html

Vue.js-like Virtual DOM

	<div id="app"></div>
	<script>
	// Create virtual node
	function h(tag, props, children) {
	// Return the virtual node
	return {
	tag,
	props,
	children,
	}

FocusThen / vuejs-like-dependency.html

Created June 26, 2020 07:59 — forked from themarcba/vuejs-like-dependency.html

Vue.js-like Reactive Dependency

	<script>
	let activeEffect

	class Dep {
	// Initialize the value of the reactive dependency
	constructor(value) {
	this._value = value
	this.subscribers = new Set()
	}

FocusThen / vuejs-like-reactive-state.html

Created June 26, 2020 07:59 — forked from themarcba/vuejs-like-reactive-state.html

Vue.js-like reactive state

	<script>
	let activeEffect

	class Dep {
	subscribers = new Set()
	depend() {
	if (activeEffect) this.subscribers.add(activeEffect)
	}
	notify() {
	this.subscribers.forEach((sub) => sub())

FocusThen / vuejs-like-mini-framework.html

Created June 26, 2020 07:58 — forked from themarcba/vuejs-like-mini-framework.html

This is the click counter example for a blog post I wrote about creating your own mini-Vue.js. https://marc.dev/blog/vue-from-scratch-part-5

	<style>
	* {
	user-select: none;
	}
	body {
	margin: 0;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}
	#app {
	height: 100vh;