Git Product home page Git Product logo

react-scratch's Introduction

This codebase attempts to implement React, including:

  • internal view hierarchy (normally known as the virtual dom)
  • application of view hierarchy to dom
  • a subset of hooks (useState, useEffect, useContext, useMemo, useCallback, useRef)

While adhering to the existing API and external behavior:

  • Same render behaviors
  • Same API (other than minor differences that weren't important to implement)

If you are interested in how this was developed, I made an article going through the internal architecture: https://www.rob.directory/blog/react-from-scratch

To run the project for development:

bun run react
bun run dev

This will compile all the TS code in src/, which then a bun server will serve a website at http://localhost:3000

The demo website is supposed to be an example of all the different features implemented. It includes

  • Rendering components as children
  • Hooks
    • useState
    • useMemo
    • useCallback
    • useContext
    • useRef
  • Fetching data
  • Conditional components
  • Rendering components in lists, with removing + adding items
  • Optimized DOM updates

Screen-2024-08-23-182000-ezgif com-optimize

react-scratch's People

Contributors

robpruzan avatar

Stargazers

杜梦杰 avatar k. amoh avatar JKPark avatar  avatar  avatar Ray Wong avatar rokas avatar Alex avatar Guo avatar Ilya Medvedev avatar Huaiqing Wen avatar Alexey Taktarov avatar fengxh avatar Asif Vora avatar Joshua Adu-Mensah (Qwaben Josh) avatar yanzhuang avatar carvin avatar Nico avatar Harvey Keefe avatar Couch Janus avatar Akshay Ram Vignesh avatar Washington Soares avatar Indrajit Chakrabarty avatar  avatar Limboer avatar Cindy Lin avatar A. Göktuğ Yalçın avatar Ryota Murakami avatar Arpan Patel  avatar  avatar bin avatar  avatar Prince Fefar avatar Jay Lee avatar Abdullah Clement Abdul Shakur avatar Paul Nodet avatar vipex avatar Aaron Pham avatar Aiden Bai avatar John Balladares avatar 你好世界 avatar Sudheendra Bhaskar avatar  avatar xuyan avatar skuramatata avatar Adrian avatar Faishal manzar avatar Wei-Yu Chen avatar Murtuzaali Surti avatar Prabjot Singh avatar Supachai Suwanthip avatar Tyler Scott Williams avatar Guilherme avatar Miguel Mendoza avatar Markus Rauhalahti avatar Sanil  avatar Muhammad Hadi avatar Abhinandan Mishra avatar Mustafa Eray avatar  avatar n0099 avatar sanyan avatar Jayesh Parmar avatar Darshan Shah avatar Chris avatar Aidar Nugmanoff avatar shoma-mano avatar Johnny Jiang avatar Tanvir Raj avatar Kai avatar Trevor Ramey avatar Duc-Thien Bui avatar Li Arolf Rey avatar Andrew Chou avatar Dragan Aleksic avatar ComputerGuy avatar Kwaku Biney avatar Barry Buck avatar Lucas Laborne avatar Jake Scott avatar Andrei Surugiu avatar  avatar

Watchers

Aaron Pham avatar Abdullah Clement Abdul Shakur avatar  avatar SkylineTech  avatar

react-scratch's Issues

contitional render inser node in wrong place

When the conditionally rendered node is the first child of the parent node, as shown in the code below, the position of this node is not inserted as expected as the first child of the parent when it changes from an empty node to a real node.

image
image

This seems to be because the 'updateDom' method only concerns itself with the 'lastUpdatedSibling', and the first child node does not have a 'lastUpdatedSibling'.image
image

Would you consider revising your blog post with the full content of this library?

Hi @RobPruzan - I absolutely loved your post about this library.

I really wanted to follow along with the post and see these steps for myself in code. I knew there would be some exercises left to the reader, so I opened up this codebase alongside the post.

Unfortunately, there's enough drift between the post and this code base that I couldn't really do the thing I wanted: follow a step-by-step guide to building this codebase (mostly).

I get the sense that's not the intention of your post, so I hope this issue doesn't read as a complaint. Instead, I'd love to just encourage you to create a supplemental resource, or a course, or something else that does a deep dive on this code and walks through the process step-by-step.

In fact, I'd be willing to pay you at least $40 for a resource like that. I'd even pay in advance. This is about how much Rebuilding Rails costs, and it's one of the best books I ever read back when I was writing Ruby on Rails code. I think what you've done here could be like that, but for React.

I don't know you or your life or anything, so if that's not interesting to you, all good. But I wanted to write this to thank you for the very interesting read, for publishing this code base, and I wanted to let you know you have at least one paying customer ready to go on this one.

Thanks for putting this out there into the world. Have a great week!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.