Let's learn React by building react within 100 lines of code

Overview

kReact

Let's learn React by building react within 100 lines of code 🏂🏻

Medium article: https://kamesh-dev.medium.com/kreact-building-your-own-react-virtual-dom-b0376cbbd3c

🤖 Introduction

  • kReact is built similar to react and mimics its internal working.
  • React is a great library that automates most of the DOM handling for us.
  • But most of us don't know how this magic automation happens in the backend 😰 .
  • Let's us also know and learn the magic and build one for ourselves 🐱‍🏍.
  • The main objective of this project is to make you understand how React works internally.

🐾 How to Use?

  • Clone this repository
  • Run npm install to install JS dependencies
  • Run npm start

License

This repository is available MIT license.

You might also like...
CodeSwing is an interactive coding playground for VS Code
CodeSwing is an interactive coding playground for VS Code

🎢 CodeSwing is an interactive coding playground for VS Code, that allows you to build/explore/learn rich web applications ("swings"). It's

Use SWC with Rollup to transform ESNext and TypeScript code.
Use SWC with Rollup to transform ESNext and TypeScript code.

rollup-plugin-swc SWC is an extensible Rust-based platform for the next generation of fast developer tools. This plugin is designed to replace rollup-

Embed code samples from different frameworks with a live preview inside your existing Docusaurus pages.
Embed code samples from different frameworks with a live preview inside your existing Docusaurus pages.

docusaurus-plugin-code-preview Embed code samples from different frameworks with a live preview inside your existing Docusaurus pages. Quick Installat

🦋 Jump to local IDE source code while click the element of browser automatically

👀 Why When developing a React app, you have a lot of components in your app. Sometimes you may forget where the code is located that you want to edit

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

A mobile-first React prototyping tool with React-Bootstrap component integration
A mobile-first React prototyping tool with React-Bootstrap component integration

A mobile-first React prototyping tool with React-Bootstrap component integration

  Add Prometheus metrics to your React App. Built on top of promjs and react-performance libraries
Add Prometheus metrics to your React App. Built on top of promjs and react-performance libraries

prom-react Add Prometheus metrics to your React App. Built on top of promjs and react-performance libraries Scope and purpose The main objective of th

Owner
kamesh sethupathi
Kamesh Sethupathi is a full-stack developer, designer, and tech enthusiast. He is currently working at ZOHO as a front-end developer.
kamesh sethupathi
A plugin that resolves barrel files imports within babel

babel-plugin-resolve-barrel-files This plugin parses and resolves a barrel file What is a barrel file? Usually, index files with a lot of export state

Gabriel Rohden 4 Apr 26, 2022
Raycast lets you control your tools with a few keystrokes.

Raycast Extensions (Beta) Raycast lets you control your tools with a few keystrokes. This repository contains all extensions that are available in the

Raycast 2.4k Sep 20, 2022
Dev environment for building scalable, high-quality user interfaces

React Cosmos A dev environment for building scalable, high-quality user interfaces. Visual TDD. Develop one component at a time. Isolate the UI you're

React Cosmos 7.6k Sep 20, 2022
Dev environment for building scalable, high-quality user interfaces

React Cosmos A dev environment for building scalable, high-quality user interfaces. Visual TDD. Develop one component at a time. Isolate the UI you're

React Cosmos 7.6k Sep 25, 2022
React Dev Inspector - jump to local IDE code directly from browser React component by just a simple click

React Dev Inspector Introduction This package allows users to jump to local IDE code directly from browser React component by just a simple click, whi

zthxxx 811 Sep 25, 2022
The recommended Code Splitting library for React ✂️✨

React code splitting made easy. Reduce your bundle size without stress ✂️ ✨ . npm install @loadable/component Docs See the documentation at loadable-c

Greg Bergé 6.8k Sep 30, 2022
Sapling - A convenient way to traverse your React app in VS Code

Sapling - A convenient way to traverse your React app in VS Code

OSLabs Beta 461 Sep 8, 2022
Code Kitchen - a React live-coding playground

Code Kitchen is a React live-coding playground which allows the developers to embed React component demos into a React UI library’s web documents.

FreeWheel, a Comcast Company 64 Aug 27, 2022
Easily detect React components source code from Chrome!

Easily detect React components source code from Chrome!

Kyohei Fukuda 115 Sep 28, 2022
🌟 JavaScript Style Guide, with linter & automatic code fixer

JavaScript Standard Style Sponsored by English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Ko

Standard JS 27.5k Sep 29, 2022