Pure TypeScript implementation of styled JSX functional components and state management

Simple vanilla, dependency free implementation of:

• JSX functional component rendering with virtual DOM and simple hooks
• Redux style state management
• A Styled Component implementation

Intended as an illustration of how the basics and internals of React / Redux / Styled Components work under the hood and not intended for production use.

View demo.

---

Includes the following packages:

• Functional component JSX rendering
• Redux style state management
• Styled Components implementation

Demonstrated with an example Todo app 🙀.

Also includes:

• Simple implementation of a test utility inspired by Enzyme to mount components and simulate events.
• GitHub workflow for CI builds; runs the usual tasks and creates sandboxed preview distributions hosted on gh-pages for each pull request and merges into master.

---

Getting started

yarn install

Build

yarn build

Build artifacts can be found in the dist directory.

Development

yarn start

The development version of the app will be started at https://localhost:1234 using Parcel with live reloading.

Test

Run all tests using Jest with coverage.

yarn test

---

License

The MIT License (MIT) Copyright (c) 2020 Matt Dunn