• Stars
    star
    128
  • Rank 280,177 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Code for the Frontend Masters React State Modeling Workshop

Frontend Masters React State Modeling Workshop

Welcome to the Frontend Masters React + XState workshop!

🆕 Using Svelte? Check out the Svelte port of this workshop!

XState

Getting Started

To run this workshop:

Exercises

Exercises are separated by directory in src/##. Each directory will contain a README.md describing the goal of the exercise, as well as tips and comments in the Timer.js and timerMachine.js files.

Your objective is to accomplish the goals in README.md. If you get stuck, refer to the Timer.final.js and/or timerMachine.final.js files in each directory.

More Repositories

1

react-redux-form

Create forms easily in React with Redux.
JavaScript
2,066
star
2

flipping

Flipping awesome animations.
TypeScript
1,380
star
3

useEffectReducer

useReducer + useEffect = useEffectReducer
TypeScript
791
star
4

RxCSS

JavaScript
416
star
5

sassdash

The Sass implementation of lodash.
SCSS
386
star
6

sass-svg

Inline SVG for Sass.
CSS
314
star
7

frontend-masters-xstate-workshop

Frontend Masters State Machines & XState Workshop
JavaScript
243
star
8

frontend-masters-css

SCSS
169
star
9

sassport

Sass with JavaScript superpowers.
JavaScript
147
star
10

nm8

Ridiculously small animation library.
TypeScript
122
star
11

frontend-masters-xstate-v2

Frontend Masters XState Workshop v2
JavaScript
121
star
12

react-simple-datepicker

Simple datepicker for React.
JavaScript
119
star
13

xstate-test-demo

Demo React project for model-based testing with @xstate/test
JavaScript
111
star
14

durable-entities-xstate

XState + Durable Entities = 🚀
TypeScript
53
star
15

xstate-react-workshop

React Finland - Modeling React Applications with Statecharts Workshop
JavaScript
24
star
16

weatherboard

TypeScript
23
star
17

xviz

Small graph visualization library
TypeScript
19
star
18

propelcss

CSS
19
star
19

postcss-emoji-style

JavaScript
19
star
20

xstate-todomvc

Created with CodeSandbox
JavaScript
18
star
21

xstate-examples

Example XState Projects
17
star
22

xstate-command

Command palette with XState
TypeScript
12
star
23

react-finland-xstate-2022

React Finland 2022 XState Workshop
JavaScript
11
star
24

mbt-workshop

Model-Based Testing Workshop
JavaScript
11
star
25

react-finland-xstate-workshop

React Finland XState Workshop
JavaScript
11
star
26

sass-v

CSS Custom Properties + Sass = 🚀
SCSS
10
star
27

RxAnimate

Reactive Animations
TypeScript
10
star
28

openapi-test

OpenAPI Testing Library
TypeScript
10
star
29

node-azure-mvc

Example application for creating an MVC Express + Node + TypeScript app and deploying it to Azure
TypeScript
10
star
30

redux-test-store

Test existing stores in Redux, the easy way
JavaScript
8
star
31

skylake

💎 A light JavaScript library.
JavaScript
8
star
32

xstate-interpreter

Reactive statechart interpreter.
TypeScript
7
star
33

paz

Peaceful Azure deployments with node
6
star
34

movement

Sass/SCSS/CSS animation framework for creating, composing, sequencing, and using animations.
CSS
6
star
35

davidkpiano

5
star
36

getrect

TypeScript
5
star
37

rxio

TypeScript
4
star
38

xstate-tetris

TypeScript
4
star
39

issuspensereadyyet

...
JavaScript
4
star
40

react-digraph

A library for creating directed graph editors
JavaScript
4
star
41

tracker

Track DOM elements efficiently.
4
star
42

netlify-edge-machine

TypeScript
4
star
43

neo4j-workshop

Neo4j Statecharts Workshop
JavaScript
3
star
44

rxform

TypeScript
3
star
45

gulp-sassport

Sassport gulp plugin
JavaScript
3
star
46

sassport-reference

Import by Reference in Sass using Sassport
JavaScript
3
star
47

vanilla-todomvc-ts

TypeScript
3
star
48

cadenza-old

SCSS/CSS Framework
CSS
2
star
49

movi

Stately animations
2
star
50

cse-articles

Microsoft CSE Articles
2
star
51

rxstyle

Animation framework for RxJS
JavaScript
2
star
52

sassport-svgo

Inline, optimized SVG inside your Sass files.
JavaScript
2
star
53

sassport-dynamic

Dynamic imports for Node-Sass using Sassport
JavaScript
2
star
54

rrf-docs

CSS
2
star
55

react-redux-form-builder

React Redux Form Builder
JavaScript
2
star
56

webanimate

TypeScript
2
star
57

stately-site

HTML
2
star
58

cz-temp

CSS
2
star
59

angular-fluid

Form Logic User Interface Directive - Form Logic implementation for AngularJS
CSS
2
star
60

orlandodevs-site

HTML
1
star
61

react-redux-form-docs

1
star
62

styledash

JavaScript
1
star
63

react-state-machine

Finite State Machines for React.
1
star
64

logicapp-specflow-demo

C#
1
star
65

generator-sass-guide

Yeoman generator for Sass Guidelines
JavaScript
1
star
66

sassport-math

Math for Sass.
JavaScript
1
star
67

emojio

1
star
68

goatspresso

Goats and Espresso
JavaScript
1
star
69

test-gen-demo

TypeScript
1
star
70

react-redux-form-book

1
star
71

postcss-movement

1
star
72

rxy

For Atomic Hack Party
PHP
1
star
73

movt

Movement
JavaScript
1
star
74

react-dynamic

Dynamic.js Animation Library for React
1
star
75

styleguides

1
star
76

react-move

Nothing to see here
JavaScript
1
star
77

cadenza

1
star
78

sass-z

Z-index management for Sass.
1
star
79

eyeglass-math

Math. For Sass.
JavaScript
1
star