Write React, React Native, and Express apps entirely in Dart. One language for frontend, backend, and mobile. 2026-01-29T11:28:23Z https://dartnode.org/ dart_node team https://dartnode.org/blog/introducing-dart-node/ 2024-01-15T00:00:00Z https://dartnode.org/%3Cp%3EToday%20we're%20excited%20to%20introduce%20%3Cstrong%3Edart_node%3C/strong%3E,%20a%20framework%20that%20lets%20you%20build%20React,%20React%20Native,%20and%20Express%20applications%20entirely%20in%20Dart.%3C/p%3E%3Ch2%20id=%22why-dart_node%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#why-dart_node%22%3EWhy%20dart_node?%3C/a%3E%3C/h2%3E%3Cp%3EIf%20you're%20a%20%3Cstrong%3EReact%20developer%3C/strong%3E,%20you've%20probably%20wished%20TypeScript's%20types%20existed%20at%20runtime.%20You've%20probably%20fought%20with%20complex%20webpack%20configs.%20You've%20probably%20wondered%20why%20you%20need%20three%20different%20config%20files%20just%20to%20get%20a%20project%20started.%3C/p%3E%3Cp%3EIf%20you're%20a%20%3Cstrong%3EFlutter%20developer%3C/strong%3E,%20you've%20probably%20wished%20you%20could%20use%20your%20Dart%20skills%20in%20the%20web%20ecosystem.%20You've%20probably%20wanted%20access%20to%20React's%20massive%20component%20library.%20You've%20probably%20wanted%20to%20share%20code%20between%20your%20Flutter%20app%20and%20a%20React%20Native%20version.%3C/p%3E%3Cp%3Edart_node%20is%20for%20both%20of%20you.%3C/p%3E%3Ch2%20id=%22what-makes-dart-different%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#what-makes-dart-different%22%3EWhat%20Makes%20Dart%20Different%3C/a%3E%3C/h2%3E%3Cp%3EDart%20and%20TypeScript%20both%20add%20type%20safety%20to%20dynamic%20languages.%20But%20they%20made%20different%20design%20choices:%3C/p%3E%3Cp%3E%3Cstrong%3ETypeScript%20chose%20maximum%20JavaScript%20compatibility.%3C/strong%3E%20This%20was%20brilliant%20-%20it%20meant%20instant%20access%20to%20the%20npm%20ecosystem%20and%20gradual%20adoption%20in%20existing%20codebases.%20But%20it%20came%20with%20a%20cost:%20types%20are%20erased%20at%20compile%20time.%3C/p%3E%3Cp%3E%3Cstrong%3EDart%20chose%20maximum%20type%20safety.%3C/strong%3E%20Types%20exist%20at%20runtime.%20Null%20safety%20is%20sound.%20Generics%20aren't%20erased.%20When%20you%20serialize%20an%20object,%20you%20can%20validate%20its%20structure.%20When%20you%20deserialize%20it,%20you%20know%20what%20you're%20getting.%3C/p%3E%3Cp%3EHere's%20a%20concrete%20example:%3C/p%3E%3Cpre%20class=%22language-typescript%22%3E%3Ccode%20class=%22language-typescript%22%3E%3Cspan%20class=%22token%20comment%22%3E//%20TypeScript%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Einterface%3C/span%3E%20%3Cspan%20class=%22token%20class-name%22%3EUser%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20name%3Cspan%20class=%22token%20operator%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20builtin%22%3Estring%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20age%3Cspan%20class=%22token%20operator%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20builtin%22%3Enumber%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Econst%3C/span%3E%20user%3Cspan%20class=%22token%20operator%22%3E:%3C/span%3E%20User%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%20%3Cspan%20class=%22token%20constant%22%3EJSON%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3Eparse%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3EapiResponse%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3Cspan%20class=%22token%20comment%22%3E//%20Is%20user%20actually%20a%20User?%20We%20hope%20so!%3C/span%3E%3Cspan%20class=%22token%20builtin%22%3Econsole%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3Elog%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Euser%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Ename%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3EtoUpperCase%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3Cspan%20class=%22token%20comment%22%3E//%20Runtime%20crash%20if%20name%20is%20undefined%3C/span%3E%3C/code%3E%3C/pre%3E%3Cpre%20class=%22language-dart%22%3E%3Ccode%20class=%22language-dart%22%3E%3Cspan%20class=%22token%20comment%22%3E//%20Dart%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Eclass%3C/span%3E%20%3Cspan%20class=%22token%20class-name%22%3EUser%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%3Cspan%20class=%22token%20keyword%22%3Efinal%3C/span%3E%20%3Cspan%20class=%22token%20class-name%22%3EString%3C/span%3E%20name%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%3Cspan%20class=%22token%20keyword%22%3Efinal%3C/span%3E%20int%20age%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%3Cspan%20class=%22token%20class-name%22%3EUser%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3Erequired%20%3Cspan%20class=%22token%20keyword%22%3Ethis%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Ename%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20required%20%3Cspan%20class=%22token%20keyword%22%3Ethis%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Eage%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%3Cspan%20class=%22token%20keyword%22%3Efactory%3C/span%3E%20%3Cspan%20class=%22token%20class-name%22%3EUser%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3EfromJson%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20class-name%22%3EMap%3C/span%3E%3Cspan%20class=%22token%20generics%22%3E%3Cspan%20class=%22token%20punctuation%22%3E<%3C/span%3E%3Cspan%20class=%22token%20class-name%22%3EString%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%3Cspan%20class=%22token%20keyword%22%3Edynamic%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%20json%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20%3Cspan%20class=%22token%20class-name%22%3EUser%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20name%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20json%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'name'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3Eas%3C/span%3E%20%3Cspan%20class=%22token%20class-name%22%3EString%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%3Cspan%20class=%22token%20comment%22%3E//%20Validated!%3C/span%3E%20%20%20%20age%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20json%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'age'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3Eas%3C/span%3E%20int%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%3Cspan%20class=%22token%20comment%22%3E//%20Validated!%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Efinal%3C/span%3E%20user%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%20%3Cspan%20class=%22token%20class-name%22%3EUser%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3EfromJson%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20function%22%3EjsonDecode%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3EapiResponse%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3Cspan%20class=%22token%20comment%22%3E//%20If%20we%20get%20here,%20user.name%20is%20definitely%20a%20String%3C/span%3E%3Cspan%20class=%22token%20function%22%3Eprint%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Euser%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Ename%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3EtoUpperCase%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%3Cspan%20class=%22token%20comment%22%3E//%20Safe!%3C/span%3E%3C/code%3E%3C/pre%3E%3Cp%3EThis%20isn't%20about%20TypeScript%20being%20bad%20-%20it's%20about%20different%20trade-offs%20for%20different%20needs.%3C/p%3E%3Ch2%20id=%22the-dart_node-stack%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#the-dart_node-stack%22%3EThe%20dart_node%20Stack%3C/a%3E%3C/h2%3E%3Cp%3EWe've%20built%20five%20packages%20that%20give%20you%20full-stack%20capabilities:%3C/p%3E%3Ch3%20id=%22dart_node_core%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#dart_node_core%22%3Edart_node_core%3C/a%3E%3C/h3%3E%3Cp%3EThe%20foundation%20layer.%20Provides%20JavaScript%20interop%20utilities,%20Node.js%20bindings,%20and%20the%20glue%20that%20makes%20everything%20work%20together.%3C/p%3E%3Ch3%20id=%22dart_node_express%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#dart_node_express%22%3Edart_node_express%3C/a%3E%3C/h3%3E%3Cp%3EType-safe%20Express.js%20bindings.%20Build%20REST%20APIs%20with%20the%20same%20patterns%20you%20know%20from%20Express,%20but%20with%20Dart's%20type%20safety.%3C/p%3E%3Cpre%20class=%22language-dart%22%3E%3Ccode%20class=%22language-dart%22%3E%3Cspan%20class=%22token%20keyword%22%3Eimport%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'dart:js_interop'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Eimport%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'package:dart_node_express/dart_node_express.dart'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Efinal%3C/span%3E%20app%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Eexpress%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3Eapp%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Eget%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'/users/:id'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Ehandler%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Ereq%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20res%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%3Cspan%20class=%22token%20keyword%22%3Efinal%3C/span%3E%20id%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%20req%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Eparams%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'id'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20res%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3EjsonMap%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'user'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'id'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20id%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3Eapp%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3Elisten%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20number%22%3E3000%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%3Cspan%20class=%22token%20function%22%3Eprint%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Server%20running%20on%20port%203000'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3EtoJS%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3C/code%3E%3C/pre%3E%3Ch3%20id=%22dart_node_react%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#dart_node_react%22%3Edart_node_react%3C/a%3E%3C/h3%3E%3Cp%3EReact%20bindings%20with%20hooks,%20components,%20and%20JSX-like%20syntax.%20Everything%20you%20love%20about%20React,%20in%20Dart.%3C/p%3E%3Cpre%20class=%22language-dart%22%3E%3Ccode%20class=%22language-dart%22%3E%3Cspan%20class=%22token%20class-name%22%3EReactElement%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Ecounter%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%3Cspan%20class=%22token%20keyword%22%3Efinal%3C/span%3E%20count%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EuseState%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20number%22%3E0%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%3Cspan%20class=%22token%20keyword%22%3Ereturn%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Ebutton%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20onClick%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E_%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20count%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3EsetWithUpdater%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Ec%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20c%20%3Cspan%20class=%22token%20operator%22%3E+%3C/span%3E%20%3Cspan%20class=%22token%20number%22%3E1%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20children%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%3Cspan%20class=%22token%20function%22%3Etext%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Count:%20%3C/span%3E%3Cspan%20class=%22token%20interpolation%22%3E%3Cspan%20class=%22token%20punctuation%22%3E${%3C/span%3E%3Cspan%20class=%22token%20expression%22%3Ecount%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Evalue%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20string%22%3E'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3C/code%3E%3C/pre%3E%3Ch3%20id=%22dart_node_react_native%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#dart_node_react_native%22%3Edart_node_react_native%3C/a%3E%3C/h3%3E%3Cp%3EReact%20Native%20bindings%20for%20mobile%20development.%20Use%20with%20Expo%20for%20a%20complete%20mobile%20development%20experience.%3C/p%3E%3Cpre%20class=%22language-dart%22%3E%3Ccode%20class=%22language-dart%22%3E%3Cspan%20class=%22token%20class-name%22%3EReactElement%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Eapp%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%3Cspan%20class=%22token%20keyword%22%3Ereturn%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EsafeAreaView%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Echildren%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20function%22%3Eview%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Estyle%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'padding'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20number%22%3E20%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20children%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3ErnText%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Echildren%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%3Cspan%20class=%22token%20function%22%3Etext%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Hello%20from%20Dart!'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3C/code%3E%3C/pre%3E%3Ch3%20id=%22dart_node_ws%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#dart_node_ws%22%3Edart_node_ws%3C/a%3E%3C/h3%3E%3Cp%3EWebSocket%20bindings%20for%20real-time%20communication.%20Build%20chat%20apps,%20dashboards,%20and%20more.%3C/p%3E%3Cpre%20class=%22language-dart%22%3E%3Ccode%20class=%22language-dart%22%3E%3Cspan%20class=%22token%20keyword%22%3Efinal%3C/span%3E%20server%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EcreateWebSocketServer%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Eport%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20number%22%3E8080%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3Eserver%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3EonConnection%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Eclient%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20url%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20client%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3EonMessage%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Emessage%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%20%20client%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3Esend%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Echo:%20%3C/span%3E%3Cspan%20class=%22token%20interpolation%22%3E%3Cspan%20class=%22token%20punctuation%22%3E${%3C/span%3E%3Cspan%20class=%22token%20expression%22%3Emessage%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Etext%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20string%22%3E'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3C/code%3E%3C/pre%3E%3Ch2%20id=%22getting-started%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#getting-started%22%3EGetting%20Started%3C/a%3E%3C/h2%3E%3Cp%3EGetting%20started%20is%20straightforward:%3C/p%3E%3Cpre%20class=%22language-bash%22%3E%3Ccode%20class=%22language-bash%22%3E%3Cspan%20class=%22token%20function%22%3Emkdir%3C/span%3E%20my_app%20%3Cspan%20class=%22token%20operator%22%3E&&%3C/span%3E%20%3Cspan%20class=%22token%20builtin%20class-name%22%3Ecd%3C/span%3E%20my_appdart%20create%20%3Cspan%20class=%22token%20parameter%20variable%22%3E-t%3C/span%3E%20package%20%3Cspan%20class=%22token%20builtin%20class-name%22%3E.%3C/span%3Edart%20pub%20%3Cspan%20class=%22token%20function%22%3Eadd%3C/span%3E%20dart_node_core%20dart_node_express%3C/code%3E%3C/pre%3E%3Cp%3EWrite%20your%20server:%3C/p%3E%3Cpre%20class=%22language-dart%22%3E%3Ccode%20class=%22language-dart%22%3E%3Cspan%20class=%22token%20keyword%22%3Eimport%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'dart:js_interop'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Eimport%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'package:dart_node_express/dart_node_express.dart'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Evoid%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Emain%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%3Cspan%20class=%22token%20keyword%22%3Efinal%3C/span%3E%20app%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Eexpress%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20app%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Eget%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'/'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Ehandler%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Ereq%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20res%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%20%20res%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3EjsonMap%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'message'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Hello%20from%20Dart!'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20app%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3Elisten%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20number%22%3E3000%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20function%22%3Eprint%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Server%20running%20on%20port%203000'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3EtoJS%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3C/code%3E%3C/pre%3E%3Cp%3ECompile%20and%20run:%3C/p%3E%3Cpre%20class=%22language-bash%22%3E%3Ccode%20class=%22language-bash%22%3Edart%20compile%20js%20lib/server.dart%20%3Cspan%20class=%22token%20parameter%20variable%22%3E-o%3C/span%3E%20build/server.js%3Cspan%20class=%22token%20function%22%3Enode%3C/span%3E%20build/server.js%3C/code%3E%3C/pre%3E%3Cp%3EThat's%20it.%20No%20webpack.%20No%20babel.%20No%20complex%20configuration.%3C/p%3E%3Ch2%20id=%22who-is-this-for%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#who-is-this-for%22%3EWho%20Is%20This%20For?%3C/a%3E%3C/h2%3E%3Cp%3E%3Cstrong%3EReact%20developers%3C/strong%3E%20who%20want%20better%20type%20safety%20without%20losing%20the%20React%20patterns%20they%20know.%3C/p%3E%3Cp%3E%3Cstrong%3EFlutter%20developers%3C/strong%3E%20who%20want%20to%20use%20their%20Dart%20skills%20in%20the%20JavaScript%20ecosystem.%3C/p%3E%3Cp%3E%3Cstrong%3EFull-stack%20developers%3C/strong%3E%20who%20want%20to%20share%20code%20between%20frontend,%20backend,%20and%20mobile.%3C/p%3E%3Cp%3E%3Cstrong%3EAnyone%3C/strong%3E%20who's%20tired%20of%20maintaining%20three%20different%20codebases%20in%20three%20different%20languages.%3C/p%3E%3Ch2%20id=%22whats-next%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#whats-next%22%3EWhat's%20Next%3C/a%3E%3C/h2%3E%3Cp%3EThis%20is%20just%20the%20beginning.%20We're%20working%20on:%3C/p%3E%3Cul%3E%3Cli%3EMore%20React%20hooks%20and%20component%20bindings%3C/li%3E%3Cli%3ENavigation%20libraries%20for%20React%20Native%3C/li%3E%3Cli%3EState%20management%20solutions%3C/li%3E%3Cli%3EBuild%20tooling%20improvements%3C/li%3E%3Cli%3EMore%20documentation%20and%20examples%3C/li%3E%3C/ul%3E%3Ch2%20id=%22try-it-out%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#try-it-out%22%3ETry%20It%20Out%3C/a%3E%3C/h2%3E%3Cp%3ECheck%20out%20the%20%3Ca%20href=%22/docs/getting-started/%22%3EGetting%20Started%20guide%3C/a%3E%20to%20build%20your%20first%20dart_node%20application.%20Browse%20the%20%3Ca%20href=%22/api/%22%3EAPI%20documentation%3C/a%3E%20to%20see%20what's%20available.%20And%20if%20you%20have%20questions,%20open%20an%20issue%20on%20GitHub.%3C/p%3E%3Cp%3EWe%20can't%20wait%20to%20see%20what%20you%20build.%3C/p%3E%3Chr%3E%3Cp%3E%3Cem%3Edart_node%20is%20open%20source%20and%20MIT%20licensed.%20Contributions%20are%20welcome!%3C/em%3E%3C/p%3E

We're excited to announce dart_node, a framework for building React, React Native, and Express applications entirely in Dart.

https://dartnode.org/blog/build-react-website-with-dart/ 2026-01-28T00:00:00Z https://dartnode.org/%3Cp%3EWhat%20if%20you%20could%20build%20React%20apps%20without%20the%20existential%20dread%20of%20%3Ccode%3Eundefined%20is%20not%20a%20function%3C/code%3E#why-dart-besides-the-obvious-joy-of-not-using-javascript%22%3EWhy%20Dart?%20(Besides%20the%20Obvious%20Joy%20of%20Not%20Using%20JavaScript)%3C/a%3E%3C/h2%3E%3Cp%3ELet's%20be%20honest.%20TypeScript%20was%20a%20massive%20improvement%20over%20JavaScript.%20But%20its%20types%20are%20like%20a%20bouncer%20who%20checks%20IDs%20at%20the%20door%20and%20then%20goes%20home.%20Once%20you're%20past%20the%20compiler,%20anything%20goes.%3C/p%3E%3Cp%3EDart%20takes%20a%20different%20approach.%20Types%20exist%20at%20runtime.%20Null%20safety%20is%20sound.%20When%20your%20code%20compiles,%20you%20know%20your%20%3Ccode%3EString%3C/code%3E%20is%20actually%20a%20%3Ccode%3EString%3C/code%3E%20and%20not%20secretly%20%3Ccode%3Eundefined%3C/code%3E%20wearing%20a%20fake%20mustache.%3C/p%3E%3Cp%3EAlready%20know%20Flutter?%20You%20already%20know%20Dart.%20Now%20you%20can%20use%20those%20same%20skills%20to%20build%20React%20web%20apps.%20One%20language.%20Full%20stack.%20No%20context%20switching%20between%20"Dart%20brain"%20and%20"TypeScript%20brain."%3C/p%3E%3Ch2%20id=%22setting-up-your-project%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#setting-up-your-project%22%3ESetting%20Up%20Your%20Project%3C/a%3E%3C/h2%3E%3Cp%3EGetting%20started%20takes%20about%2030%20seconds.%20Create%20a%20new%20Dart%20project:%3C/p%3E%3Cpre%20class=%22language-bash%22%3E%3Ccode%20class=%22language-bash%22%3E%3Cspan%20class=%22token%20function%22%3Emkdir%3C/span%3E%20my_react_app%20%3Cspan%20class=%22token%20operator%22%3E&&%3C/span%3E%20%3Cspan%20class=%22token%20builtin%20class-name%22%3Ecd%3C/span%3E%20my_react_appdart%20create%20%3Cspan%20class=%22token%20parameter%20variable%22%3E-t%3C/span%3E%20package%20%3Cspan%20class=%22token%20builtin%20class-name%22%3E.%3C/span%3E%3C/code%3E%3C/pre%3E%3Cp%3EAdd%20the%20dependencies%20to%20your%20%3Ccode%3Epubspec.yaml%3C/code%3E:%3C/p%3E%3Cpre%20class=%22language-yaml%22%3E%3Ccode%20class=%22language-yaml%22%3E%3Cspan%20class=%22token%20key%20atrule%22%3Ename%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20my_react_app%3Cspan%20class=%22token%20key%20atrule%22%3Eenvironment%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%20%3Cspan%20class=%22token%20key%20atrule%22%3Esdk%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20^3.0.0%3Cspan%20class=%22token%20key%20atrule%22%3Edependencies%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%20%3Cspan%20class=%22token%20key%20atrule%22%3Edart_node_core%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20^0.11.0%3Cspan%20class=%22token%20punctuation%22%3E-%3C/span%3Ebeta%20%20%3Cspan%20class=%22token%20key%20atrule%22%3Edart_node_react%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20^0.11.0%3Cspan%20class=%22token%20punctuation%22%3E-%3C/span%3Ebeta%3C/code%3E%3C/pre%3E%3Cp%3ERun%20%3Ccode%3Edart%20pub%20get%3C/code%3E.%20Done.%20No%20webpack%20config.%20No%20babel.%20No%2047%20dev%20dependencies%20fighting%20each%20other.%3C/p%3E%3Ch2%20id=%22your-first-component%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#your-first-component%22%3EYour%20First%20Component%3C/a%3E%3C/h2%3E%3Cp%3ECreate%20%3Ccode%3Eweb/app.dart%3C/code%3E.%20This%20is%20where%20the%20magic%20happens:%3C/p%3E%3Cpre%20class=%22language-dart%22%3E%3Ccode%20class=%22language-dart%22%3E%3Cspan%20class=%22token%20keyword%22%3Eimport%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'dart:js_interop'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Eimport%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'package:dart_node_react/dart_node_react.dart'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Evoid%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Emain%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%3Cspan%20class=%22token%20keyword%22%3Efinal%3C/span%3E%20root%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%20%3Cspan%20class=%22token%20class-name%22%3EDocument%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3EgetElementById%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'root'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Eroot%20%3Cspan%20class=%22token%20operator%22%3E!=%3C/span%3E%20%3Cspan%20class=%22token%20keyword%22%3Enull%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20operator%22%3E?%3C/span%3E%20%3Cspan%20class=%22token%20class-name%22%3EReactDOM%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3EcreateRoot%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Eroot%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3Erender%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20class-name%22%3EApp%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20keyword%22%3Ethrow%3C/span%3E%20%3Cspan%20class=%22token%20class-name%22%3EStateError%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Root%20element%20not%20found'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20class-name%22%3EReactElement%3C/span%3E%20%3Cspan%20class=%22token%20class-name%22%3EApp%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EcreateElement%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20class-name%22%3EJSAny%3C/span%3E%20props%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Ereturn%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Ediv%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20className%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'app'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20children%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Eh1%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Hello%20from%20Dart!'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3EpEl%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Look%20ma,%20no%20JavaScript!'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3EtoJS%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3C/code%3E%3C/pre%3E%3Cp%3EThe%20%3Ccode%3EcreateElement%3C/code%3E%20function%20wraps%20your%20component%20logic.%20Inside,%20you%20return%20React%20elements%20using%20helper%20functions%20like%20%3Ccode%3Ediv%3C/code%3E,%20%3Ccode%3Eh1%3C/code%3E,%20and%20%3Ccode%3EpEl%3C/code%3E.%20It%20feels%20like%20React%20because%20it%20%3Cem%3Eis%3C/em%3E%20React,%20just%20with%20better%20types.%3C/p%3E%3Ch2%20id=%22state-management-usestate-without-the-guesswork%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#state-management-usestate-without-the-guesswork%22%3EState%20Management:%20useState%20Without%20the%20Guesswork%3C/a%3E%3C/h2%3E%3Cp%3EHere's%20where%20Dart%20really%20shines.%20The%20%3Ccode%3EuseState%3C/code%3E%20hook%20returns%20a%20%3Ccode%3EStateHook<T>%3C/code%3E%20with%20actual,%20honest-to-goodness%20type%20safety:%3C/p%3E%3Cpre%20class=%22language-dart%22%3E%3Ccode%20class=%22language-dart%22%3E%3Cspan%20class=%22token%20class-name%22%3EReactElement%3C/span%3E%20%3Cspan%20class=%22token%20class-name%22%3ECounter%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EcreateElement%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20class-name%22%3EJSAny%3C/span%3E%20props%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Efinal%3C/span%3E%20count%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EuseState%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20number%22%3E0%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Ereturn%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Ediv%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20className%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'counter'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20children%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Eh2%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Count:%20%3C/span%3E%3Cspan%20class=%22token%20interpolation%22%3E%3Cspan%20class=%22token%20punctuation%22%3E${%3C/span%3E%3Cspan%20class=%22token%20expression%22%3Ecount%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Evalue%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20string%22%3E'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Ebutton%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20%20%20%20%20text%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Increment'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20onClick%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E_%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20count%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3EsetWithUpdater%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Ec%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20c%20%3Cspan%20class=%22token%20operator%22%3E+%3C/span%3E%20%3Cspan%20class=%22token%20number%22%3E1%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Ebutton%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20%20%20%20%20text%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Reset'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20onClick%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E_%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20count%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Eset%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20number%22%3E0%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3EtoJS%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3C/code%3E%3C/pre%3E%3Cp%3EThree%20ways%20to%20update%20state:%3C/p%3E%3Cul%3E%3Cli%3E%3Ccode%3Ecount.value%3C/code%3E%20-%20read%20the%20current%20value%3C/li%3E%3Cli%3E%3Ccode%3Ecount.set(5)%3C/code%3E%20-%20set%20a%20new%20value%20directly%3C/li%3E%3Cli%3E%3Ccode%3Ecount.setWithUpdater((old)%20=>%20old%20+%201)%3C/code%3E%20-%20update%20based%20on%20previous%20value%3C/li%3E%3C/ul%3E%3Cp%3ENo%20more%20%3Ccode%3EuseState<number%20|%20undefined>(undefined)%3C/code%3E%20gymnastics.%20Just%20%3Ccode%3EuseState(0)%3C/code%3E.%20The%20compiler%20knows%20it's%20an%20%3Ccode%3Eint%3C/code%3E.%3C/p%3E%3Ch2%20id=%22building-forms-the-part-everyone-dreads%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#building-forms-the-part-everyone-dreads%22%3EBuilding%20Forms%20(The%20Part%20Everyone%20Dreads)%3C/a%3E%3C/h2%3E%3Cp%3EForms%20don't%20have%20to%20be%20painful.%20Here's%20a%20login%20form%20that%20actually%20works:%3C/p%3E%3Cpre%20class=%22language-dart%22%3E%3Ccode%20class=%22language-dart%22%3E%3Cspan%20class=%22token%20class-name%22%3EReactElement%3C/span%3E%20%3Cspan%20class=%22token%20class-name%22%3ELoginForm%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EcreateElement%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20class-name%22%3EJSAny%3C/span%3E%20props%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Efinal%3C/span%3E%20emailState%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EuseState%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E''%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Efinal%3C/span%3E%20passwordState%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EuseState%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E''%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Efinal%3C/span%3E%20errorState%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%20useState%3Cspan%20class=%22token%20generics%22%3E%3Cspan%20class=%22token%20punctuation%22%3E<%3C/span%3E%3Cspan%20class=%22token%20class-name%22%3EString%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E?%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Enull%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Evoid%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EhandleSubmit%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Eif%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3EemailState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Evalue%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3EisEmpty%20%3Cspan%20class=%22token%20operator%22%3E||%3C/span%3E%20passwordState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Evalue%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3EisEmpty%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%20%20%20%20%20%20errorState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Eset%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Please%20fill%20in%20all%20fields'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Ereturn%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Eprint%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Logging%20in:%20%3C/span%3E%3Cspan%20class=%22token%20interpolation%22%3E%3Cspan%20class=%22token%20punctuation%22%3E${%3C/span%3E%3Cspan%20class=%22token%20expression%22%3EemailState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Evalue%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20string%22%3E'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Ereturn%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Ediv%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20className%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'login-form'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20children%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Eh2%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Sign%20In'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Eif%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3EerrorState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Evalue%20%3Cspan%20class=%22token%20operator%22%3E!=%3C/span%3E%20%3Cspan%20class=%22token%20keyword%22%3Enull%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Ediv%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3EclassName%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'error'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20child%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Espan%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3EerrorState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Evalue%3Cspan%20class=%22token%20operator%22%3E!%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Einput%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20%20%20%20%20type%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'email'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20placeholder%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Email'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20value%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20emailState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Evalue%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20className%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'input'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20onChange%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Ee%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20emailState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Eset%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20function%22%3EgetInputValue%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Ee%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3EtoDart%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Einput%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20%20%20%20%20type%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'password'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20placeholder%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Password'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20value%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20passwordState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Evalue%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20className%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'input'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20onChange%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Ee%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20passwordState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Eset%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20function%22%3EgetInputValue%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Ee%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3EtoDart%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Ebutton%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20%20%20%20%20text%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Sign%20In'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20className%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'btn%20btn-primary'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20onClick%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20handleSubmit%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3EtoJS%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3C/code%3E%3C/pre%3E%3Cp%3EThe%20%3Ccode%3EgetInputValue%3C/code%3E%20helper%20extracts%20input%20values%20from%20events.%20Call%20%3Ccode%3E.toDart%3C/code%3E%20to%20convert%20JavaScript%20strings%20to%20Dart%20strings.%20Clean%20and%20predictable.%3C/p%3E%3Ch2%20id=%22side-effects-with-useeffect%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#side-effects-with-useeffect%22%3ESide%20Effects%20with%20useEffect%3C/a%3E%3C/h2%3E%3Cp%3ENeed%20to%20fetch%20data%20when%20a%20component%20mounts?%20%3Ccode%3EuseEffect%3C/code%3E%20works%20exactly%20like%20you'd%20expect:%3C/p%3E%3Cpre%20class=%22language-dart%22%3E%3Ccode%20class=%22language-dart%22%3E%3Cspan%20class=%22token%20class-name%22%3EReactElement%3C/span%3E%20%3Cspan%20class=%22token%20class-name%22%3EUserList%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EcreateElement%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20class-name%22%3EJSAny%3C/span%3E%20props%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Efinal%3C/span%3E%20usersState%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%20useState%3Cspan%20class=%22token%20generics%22%3E%3Cspan%20class=%22token%20punctuation%22%3E<%3C/span%3E%3Cspan%20class=%22token%20class-name%22%3EList%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E<%3C/span%3E%3Cspan%20class=%22token%20class-name%22%3EString%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Efinal%3C/span%3E%20loadingState%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EuseState%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20boolean%22%3Etrue%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20function%22%3EuseEffect%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20class-name%22%3EFuture%3C/span%3E%3Cspan%20class=%22token%20generics%22%3E%3Cspan%20class=%22token%20punctuation%22%3E<%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Evoid%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EloadUsers%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20keyword%22%3Easync%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Eawait%3C/span%3E%20%3Cspan%20class=%22token%20class-name%22%3EFuture%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3Edelayed%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20class-name%22%3EDuration%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Eseconds%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20number%22%3E1%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%20%20%20%20usersState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Eset%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Alice'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Bob'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Charlie'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%20%20%20%20loadingState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Eset%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20boolean%22%3Efalse%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Eunawaited%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20function%22%3EloadUsers%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Ereturn%3C/span%3E%20%3Cspan%20class=%22token%20keyword%22%3Enull%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Ereturn%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Ediv%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20className%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'user-list'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20children%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Eh2%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Users'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Eif%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3EloadingState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Evalue%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Espan%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Loading...'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Eelse%3C/span%3E%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Eul%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20children%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20usersState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Evalue%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3Emap%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Euser%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Eli%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Echild%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Espan%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Euser%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3EtoList%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3EtoJS%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3C/code%3E%3C/pre%3E%3Cp%3EPass%20an%20empty%20list%20%3Ccode%3E[]%3C/code%3E%20to%20run%20the%20effect%20only%20on%20mount.%20Return%20a%20cleanup%20function%20or%20%3Ccode%3Enull%3C/code%3E%20if%20you%20don't%20need%20cleanup.%20No%20surprises%20here.%3C/p%3E%3Ch2%20id=%22all-your-favorite-html-elements%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#all-your-favorite-html-elements%22%3EAll%20Your%20Favorite%20HTML%20Elements%3C/a%3E%3C/h2%3E%3Cp%3Edart_node_react%20provides%20functions%20for%20every%20HTML%20element%20you%20need:%3C/p%3E%3Cpre%20class=%22language-dart%22%3E%3Ccode%20class=%22language-dart%22%3E%3Cspan%20class=%22token%20class-name%22%3EReactElement%3C/span%3E%20%3Cspan%20class=%22token%20class-name%22%3EPageLayout%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EcreateElement%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20class-name%22%3EJSAny%3C/span%3E%20props%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Ereturn%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Ediv%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20className%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'layout'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20children%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Eheader%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20%20%20%20%20className%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'header'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20child%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Eh1%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'My%20Dart%20React%20App'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3EmainEl%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20%20%20%20%20className%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'main-content'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20children%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Esection%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20className%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'hero'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20children%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Eh2%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Welcome'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3EpEl%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Build%20type-safe%20React%20apps%20with%20Dart.'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Efooter%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20%20%20%20%20className%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'footer'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20child%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EpEl%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Built%20with%20dart_node_react'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3EtoJS%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3C/code%3E%3C/pre%3E%3Cp%3EYou%20get%20%3Ccode%3Ediv%3C/code%3E,%20%3Ccode%3Espan%3C/code%3E,%20%3Ccode%3Eh1%3C/code%3E-%3Ccode%3Eh6%3C/code%3E,%20%3Ccode%3EpEl%3C/code%3E,%20%3Ccode%3Eul%3C/code%3E,%20%3Ccode%3Eli%3C/code%3E,%20%3Ccode%3Ebutton%3C/code%3E,%20%3Ccode%3Einput%3C/code%3E,%20%3Ccode%3Eform%3C/code%3E,%20%3Ccode%3Eheader%3C/code%3E,%20%3Ccode%3Efooter%3C/code%3E,%20%3Ccode%3EmainEl%3C/code%3E,%20%3Ccode%3Esection%3C/code%3E,%20%3Ccode%3Enav%3C/code%3E,%20%3Ccode%3Earticle%3C/code%3E,%20and%20more.%20Everything%20you%20need%20to%20build%20real%20UIs.%3C/p%3E%3Ch2%20id=%22compiling-and-running%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#compiling-and-running%22%3ECompiling%20and%20Running%3C/a%3E%3C/h2%3E%3Cp%3ECreate%20%3Ccode%3Eweb/index.html%3C/code%3E:%3C/p%3E%3Cpre%20class=%22language-html%22%3E%3Ccode%20class=%22language-html%22%3E%3Cspan%20class=%22token%20doctype%22%3E%3Cspan%20class=%22token%20punctuation%22%3E<!%3C/span%3E%3Cspan%20class=%22token%20doctype-tag%22%3EDOCTYPE%3C/span%3E%20%3Cspan%20class=%22token%20name%22%3Ehtml%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20punctuation%22%3E<%3C/span%3Ehtml%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20punctuation%22%3E<%3C/span%3Ehead%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%20%20%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20punctuation%22%3E<%3C/span%3Emeta%3C/span%3E%20%3Cspan%20class=%22token%20attr-name%22%3Echarset%3C/span%3E%3Cspan%20class=%22token%20attr-value%22%3E%3Cspan%20class=%22token%20punctuation%20attr-equals%22%3E=%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%22%3C/span%3EUTF-8%3Cspan%20class=%22token%20punctuation%22%3E%22%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%20%20%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20punctuation%22%3E<%3C/span%3Etitle%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3EMy%20Dart%20React%20App%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20punctuation%22%3E</%3C/span%3Etitle%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20punctuation%22%3E</%3C/span%3Ehead%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20punctuation%22%3E<%3C/span%3Ebody%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%20%20%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20punctuation%22%3E<%3C/span%3Ediv%3C/span%3E%20%3Cspan%20class=%22token%20attr-name%22%3Eid%3C/span%3E%3Cspan%20class=%22token%20attr-value%22%3E%3Cspan%20class=%22token%20punctuation%20attr-equals%22%3E=%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%22%3C/span%3Eroot%3Cspan%20class=%22token%20punctuation%22%3E%22%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20punctuation%22%3E</%3C/span%3Ediv%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%20%20%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20punctuation%22%3E<%3C/span%3Escript%3C/span%3E%20%3Cspan%20class=%22token%20attr-name%22%3Esrc%3C/span%3E%3Cspan%20class=%22token%20attr-value%22%3E%3Cspan%20class=%22token%20punctuation%20attr-equals%22%3E=%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%22%3C/span%3Ehttps://unpkg.com/react@18/umd/react.development.js%3Cspan%20class=%22token%20punctuation%22%3E%22%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20script%22%3E%3C/span%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20punctuation%22%3E</%3C/span%3Escript%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%20%20%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20punctuation%22%3E<%3C/span%3Escript%3C/span%3E%20%3Cspan%20class=%22token%20attr-name%22%3Esrc%3C/span%3E%3Cspan%20class=%22token%20attr-value%22%3E%3Cspan%20class=%22token%20punctuation%20attr-equals%22%3E=%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%22%3C/span%3Ehttps://unpkg.com/react-dom@18/umd/react-dom.development.js%3Cspan%20class=%22token%20punctuation%22%3E%22%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20script%22%3E%3C/span%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20punctuation%22%3E</%3C/span%3Escript%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%20%20%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20punctuation%22%3E<%3C/span%3Escript%3C/span%3E%20%3Cspan%20class=%22token%20attr-name%22%3Esrc%3C/span%3E%3Cspan%20class=%22token%20attr-value%22%3E%3Cspan%20class=%22token%20punctuation%20attr-equals%22%3E=%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%22%3C/span%3Eapp.dart.js%3Cspan%20class=%22token%20punctuation%22%3E%22%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20script%22%3E%3C/span%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20punctuation%22%3E</%3C/span%3Escript%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20punctuation%22%3E</%3C/span%3Ebody%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20tag%22%3E%3Cspan%20class=%22token%20punctuation%22%3E</%3C/span%3Ehtml%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%3C/code%3E%3C/pre%3E%3Cp%3ECompile%20your%20Dart%20to%20JavaScript:%3C/p%3E%3Cpre%20class=%22language-bash%22%3E%3Ccode%20class=%22language-bash%22%3Edart%20compile%20js%20web/app.dart%20%3Cspan%20class=%22token%20parameter%20variable%22%3E-o%3C/span%3E%20web/app.dart.js%3C/code%3E%3C/pre%3E%3Cp%3EServe%20the%20%3Ccode%3Eweb%3C/code%3E%20directory%20and%20open%20it%20in%20your%20browser.%20That's%20it.%20Your%20React%20app%20is%20running,%20and%20you%20didn't%20write%20a%20single%20line%20of%20JavaScript.%3C/p%3E%3Ch2%20id=%22putting-it-together-a-task-manager%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#putting-it-together-a-task-manager%22%3EPutting%20It%20Together:%20A%20Task%20Manager%3C/a%3E%3C/h2%3E%3Cp%3EHere's%20a%20complete%20example%20combining%20everything%20you've%20learned:%3C/p%3E%3Cpre%20class=%22language-dart%22%3E%3Ccode%20class=%22language-dart%22%3E%3Cspan%20class=%22token%20class-name%22%3EReactElement%3C/span%3E%20%3Cspan%20class=%22token%20class-name%22%3ETaskManager%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EcreateElement%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20class-name%22%3EJSAny%3C/span%3E%20props%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Efinal%3C/span%3E%20tasksState%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%20useState%3Cspan%20class=%22token%20generics%22%3E%3Cspan%20class=%22token%20punctuation%22%3E<%3C/span%3E%3Cspan%20class=%22token%20class-name%22%3EList%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E<%3C/span%3E%3Cspan%20class=%22token%20class-name%22%3EString%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E%3E%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Efinal%3C/span%3E%20newTaskState%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EuseState%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E''%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Evoid%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EaddTask%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Eswitch%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3EnewTaskState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Evalue%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3Etrim%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3EisEmpty%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Ecase%3C/span%3E%20%3Cspan%20class=%22token%20boolean%22%3Etrue%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Ereturn%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Ecase%3C/span%3E%20%3Cspan%20class=%22token%20boolean%22%3Efalse%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%20%20%20%20%20%20%20%20%20tasksState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3EsetWithUpdater%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Etasks%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Etasks%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20newTaskState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Evalue%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%20%20%20%20%20%20newTaskState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Eset%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E''%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Evoid%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EremoveTask%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Eint%20index%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%20%20%20%20tasksState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3EsetWithUpdater%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Etasks%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E{%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Efinal%3C/span%3E%20updated%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Etasks%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%20%20%20%20updated%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3EremoveAt%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Eindex%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Ereturn%3C/span%3E%20updated%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20keyword%22%3Ereturn%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Ediv%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20className%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'task-manager'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20children%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Eh2%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'My%20Tasks'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Ediv%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20%20%20%20%20className%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'add-task'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20children%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Einput%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'text'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20placeholder%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'New%20task...'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20value%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20newTaskState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Evalue%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20onChange%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Ee%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20newTaskState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20keyword%22%3Eset%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20function%22%3EgetInputValue%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Ee%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3EtoDart%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Ebutton%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Etext%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Add'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20onClick%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20addTask%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Eul%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20%20%20%20%20className%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'task-list'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20children%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20tasksState%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Evalue%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3Eindexed%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3Emap%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Eitem%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3Eli%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20children%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Espan%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Eitem%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E$%3Cspan%20class=%22token%20number%22%3E2%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20function%22%3Ebutton%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20string-literal%22%3E%3Cspan%20class=%22token%20string%22%3E'Delete'%3C/span%3E%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onClick%3Cspan%20class=%22token%20punctuation%22%3E:%3C/span%3E%20%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E_%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%3Cspan%20class=%22token%20operator%22%3E=%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E%3E%3C/span%3E%20%3Cspan%20class=%22token%20function%22%3EremoveTask%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3Eitem%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E$%3Cspan%20class=%22token%20number%22%3E1%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3E%3Cspan%20class=%22token%20function%22%3EtoList%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E(%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%20%20%20%20%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%20%20%3Cspan%20class=%22token%20punctuation%22%3E}%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E.%3C/span%3EtoJS%3Cspan%20class=%22token%20punctuation%22%3E,%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E)%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E;%3C/span%3E%3C/code%3E%3C/pre%3E%3Cp%3EState%20management,%20event%20handling,%20list%20rendering.%20All%20type-safe.%20All%20Dart.%3C/p%3E%3Ch2%20id=%22whats-next%22%20tabindex=%22-1%22%3E%3Ca%20class=%22header-anchor%22%20href=%22#whats-next%22%3EWhat's%20Next?%3C/a%3E%3C/h2%3E%3Cp%3EYou've%20got%20the%20basics.%20Now%20go%20build%20something.%20Explore%20%3Ca%20href=%22/api/dart_node_react/%22%3Emore%20hooks%3C/a%3E%20like%20%3Ccode%3EuseMemo%3C/code%3E%20and%20%3Ccode%3EuseCallback%3C/code%3E.%20Check%20out%20the%20%3Ca%20href=%22https://github.com/AstroCodez/dart_node/tree/main/examples/frontend%22%3Efull-stack%20example%3C/a%3E%20with%20authentication,%20API%20integration,%20and%20WebSocket%20support.%3C/p%3E%3Cp%3ENo%20more%20fighting%20with%20type%20coercion.%20No%20more%20%3Ccode%3Eany%3C/code%3E%20escape%20hatches.%20Just%20clean,%20type-safe%20React%20apps%20in%20a%20language%20that%20respects%20your%20time.%3C/p%3E%3Cp%3EWelcome%20to%20the%20future.%20It%20compiles%20to%20JavaScript,%20but%20at%20least%20you%20don't%20have%20to%20write%20it.%3C/p%3E

Learn how to build type-safe React web applications using Dart and the dart_node_react package. Step-by-step tutorial with working code examples.