https://github.com/chadtech/desert-code-camp-session
https://github.com/chadtech/desert-code-camp-session
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/chadtech/desert-code-camp-session
- Owner: Chadtech
- Created: 2016-09-30T22:06:02.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-10-08T07:55:32.000Z (over 9 years ago)
- Last Synced: 2025-02-16T07:42:15.202Z (over 1 year ago)
- Language: JavaScript
- Size: 24.4 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# HI THERE
This is my talk for Desert Code Camp 2016.1. Its about how React works 'under the hood'.
In this repo, we build a simple rendering library, that is very similar to React. In the src folder, numbered files are progressively more complicated, each building on the prior, and introducing new features. Below is a summary of each file
0 We render a div, using a function called 'div'.
1 We render a p, using a function called 'p', that takes an argument that is text to include in the p.
2 We make a function that makes any variety of html tags, with parameters 'attributes' and 'children' to assign to the html element.
3 We add a little sugar to make the children parameter a little easier
4 An example of arranging and stylizing divs
5 Another example, of a simple identity theft application
6 We add event listeners to our html rendering functions
7 We make components, that have render functions
8 We give components state, and we render using that state
9 We make a React knock-off called 'Respond', which lets us event listeners modify state
A We make a counter application that doesnt work, because the app never re-renders
B We make a functional counter application that does work, because the app re-renders after state changes
C We make Respond Components which can be nested inside each other
D We give Respond Components props
E We talk through how to render more efficiently through diffing
F We address some of the problems with diffing
G We make a function that diffs two VDOMS
H We talk through how to merge two vdoms, and render the differences
I We make some psuedo code about merging two VDOMs