Under-the-hood-ReactJS - Entire React code base explanation by visual block schemes (Stack+Fiber versions)

  •        8

This repository contains an explanation of inner work of React. In fact, I was debugging through the entire code base and put all the logic on visual block-schemes, analyzed them, summarized and explained main concepts and approaches. I've already finished with Stack version and now I work with the next, Fiber version. Read in the best format from github-pages website.

https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/
https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS

Tags
Implementation
License
Platform

   




Related Projects

js-code-to-svg-flowchart - js2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart

  •    Javascript

Why? While I've been working on Under-the-hood-ReactJS I spent enormous amount of time on creating schemes. Each change in code or flowchart affects all entire scheme instantly, forcing you to move and align 'broken pieces'. Just repeated manual work... Imagine a library which takes any JS code and generate SVG flowchart from it, works on client and server. Allows you easily adjust styles scheme for your context or demonstrate your code logic from different abstractions levels. Highlighting, destructing whole blocks, custom modifiers for your needs etc.

gdbgui - Browser-based frontend to gdb (gnu debugger)

  •    Javascript

A modern, browser-based frontend to gdb (gnu debugger). Add breakpoints, view stack traces, and more in C, C++, Go, and Rust! Simply run gdbgui from the terminal and a new tab will open in your browser. gdbgui is easy to get started with yet supports scripting, and has terminal access while keeping the user interface in lock step with the underlying gdb process.

ReactJs-Phonegap - A boilerplate ReactJS-Phonegap/Cordova App + Flux data flow

  •    Javascript

A boilerplate ReactJS-Phonegap/Cordova App + Flux data flow

crawler - An easy to use, powerful crawler implemented in PHP. Can execute Javascript.

  •    PHP

This package provides a class to crawl links on a website. Under the hood Guzzle promises are used to crawl multiple urls concurrently. Because the crawler can execute JavaScript, it can crawl JavaScript rendered sites. Under the hood Chrome and Puppeteer are used to power this feature.


vim-ruby-debugger - Vim plugin for debugging Ruby applications (using ruby-debug-ide gem)

  •    VimL

This Vim plugin implements interactive Ruby debugger in Vim. This version of the plugin works only with Ruby >= 1.9. It uses debugger-xml under the hood, which is just a XML/IDE extension for the debugger gem, which supports Ruby 1.9.2 and 1.9.3 out-of-the-box, but doesn't support Ruby <= 1.8.7.

httplog - Log outgoing HTTP requests

  •    Ruby

Log outgoing HTTP requests made from your application. Helps with debugging pesky API error responses, or just generally understanding what's going on under the hood. Requires ruby >= 2.2.

chrome-har-capturer - Capture HAR files from a headless Chrome instance

  •    Javascript

Capture HAR files from a headless Chrome instance. Under the hood this module uses chrome-remote-interface to instrument Chrome.

Leaflet.heat - A tiny, simple and fast heatmap plugin for Leaflet.

  •    Javascript

A tiny, simple and fast Leaflet heatmap plugin. Uses simpleheat under the hood, additionally clustering points into a grid for performance. Each point in the input array can be either an array like [50.5, 30.5, 0.5], or a Leaflet LatLng object.

mcfly - Flux architecture made easy

  •    Javascript

When writing ReactJS apps, it is enormously helpful to use Facebook's Flux architecture. It truly complements ReactJS' unidirectional data flow model. Facebook's Flux library provides a Dispatcher, and some examples of how to write Actions and Stores. However, there are no helpers for Action & Store creation, and Stores require 3rd party eventing. McFly is a library that provides all 3 components of Flux architecture, using Facebook's Dispatcher, and providing factories for Actions & Stores.

elastiflow - Network flow Monitoring (Netflow, sFlow and IPFIX) with the Elastic Stack

  •    Shell

ElastiFlow™ provides network flow data collection and visualization using the Elastic Stack (Elasticsearch, Logstash and Kibana). It supports Netflow v5/v9, sFlow and IPFIX flow types (1.x versions support only Netflow v5/v9). The following dashboards are provided.

flow-dashboard - A goal, task & habit tracker + personal dashboard to focus on what matters

  •    Javascript

Flow is a habit tracker and personal data analytics app that lets you keep focus on what matters. Flow owns none of your data. That's yours. If you just want look around or get started with Flow, you can create a free account at http://flowdash.co.

django-reactjs-boilerplate - An example how you can use ReactJS with your Django project.

  •    Javascript

I gave the talk a second time at a PyLadies meetup and it was recorded by Engineers.SG. The goal is to show how you can use ReactJS in your existing Django apps today.

fulcro - A library for development of single-page full-stack web applications in clj/cljs

  •    Clojure

Provide structure and patterns that encourage simplicity in overall design. Provide an out-of-the box experience that is as easy as possible, except where it conflicts with the first goal.

source-editor - A native source editor for iOS and macOS, written in Swift

  •    Swift

A native source editor for iOS and macOS. Under the hood, this uses SavannaKit. The goal of this project is to provide a very fast source editor, supporting many programming languages, out of the box. Currently, only Swift is supported. But adding support for a new language requires little work. This project is available under the MIT license. See the LICENSE file for more info.

react-pixi - Create/control a Pixi.js canvas using React

  •    Javascript

This library works with React 15. If you are using React 16, look at react-pixi-fiber or a different library also called react-pixi. Create/control a Pixi.js canvas using React.

reactotron - A desktop app for inspecting your React JS and React Native projects

  •    Javascript

Make sure your reactotron-* dependencies match the version of the Reactotron app. For example reactotron-react-native@2 will only work with the 2.x version of the app. reactotron-react-native@2 requires react-native >= 0.54. If you need, an older version, checkout the 1.x branch.