Start from the React Starter, and see the page beside the code as you change it.
React needs no setup: no project, no build step, no install. The React Starter comes with React 19 and runs offline.
Open the React Starter Click React on the Home screen. With a Snippet open, click + at the end of the tabs and choose React . Wait a moment. With Run as you type on, as it is at first, the Starter runs by itself, and its page appears beside the code: a counter with − and + buttons.
// A small demo, so there is something to run. Clear it and write your own.
import { useEffect, useState } from "react"
JSX CSS
1 ⌄ import { useEffect , useState } from "react"
2 ⌄ import { createRoot } from "react-dom/client"
3 ⌄
4 ⌄ // One component, rendered into the markup's #root.
5 ⌄ function Counter () {
6 ⌄ const [ count , setCount ] = useState ( 0 )
7 ⌄
8 ⌄ useEffect (() => {
9 ⌄ console . log ( "count" , count )
10 ⌄ }, [ count ])
11 ⌄
12 ⌄ return (
13 ⌄ < div className = "rounded-2xl bg-stone-900 p-8 text-center text-stone-100 shadow-sm ring-1 ring-stone-800" >
14 ⌄ < p className = "text-sm font-medium text-emerald-400" > Components and hooks </ p >
15 ⌄ < p className = "my-4 text-6xl font-bold tabular-nums" >{ count }</ p >
16 ⌄ < button className = "button" onClick ={() => setCount (( n ) => n - 1 )}>
17 ⌄ −
18 ⌄ </ button >
19 ⌄ < button className = "button bg-emerald-700 text-white" onClick ={() => setCount (( n ) => n + 1 )}>
20 ⌄ +
21 ⌄ </ button >
22 ⌄ </ div >
23 ⌄ )
24 ⌄ }
25 ⌄
26 ⌄ createRoot ( document . getElementById ( "root" )). render (< Counter />)
Done · code changed since · Runs as you type
The React Starter: the component, and beside it the page and its console. The strip over the code has two Parts: JSX , the component, and CSS , the page's styles, with Tailwind turned on. See Web pages .
Change the component In the JSX Part, change the component. For example, make + add 10: setCount((n) => n + 10). Stop typing. A moment later, JSpark runs the Snippet again and the page shows your change. JSX CSS
1 ⌄ import { useEffect , useState } from "react"
2 ⌄ import { createRoot } from "react-dom/client"
3 ⌄
4 ⌄ // One component, rendered into the markup's #root.
5 ⌄ function Counter () {
6 ⌄ const [ count , setCount ] = useState ( 0 )
7 ⌄
8 ⌄ useEffect (() => {
9 ⌄ console . log ( "count" , count )
10 ⌄ }, [ count ])
11 ⌄
12 ⌄ return (
13 ⌄ < div className = "rounded-2xl bg-stone-900 p-8 text-center text-stone-100 shadow-sm ring-1 ring-stone-800" >
14 ⌄ < p className = "text-sm font-medium text-emerald-400" > Components and hooks </ p >
15 ⌄ < p className = "my-4 text-6xl font-bold tabular-nums" >{ count }</ p >
16 ⌄ < button className = "button" onClick ={() => setCount (( n ) => n - 1 )}>
17 ⌄ −
18 ⌄ </ button >
19 ⌄ < button className = "button bg-emerald-700 text-white" onClick ={() => setCount (( n ) => n + 1 )}>
20 ⌄ +
21 ⌄ </ button >
22 ⌄ </ div >
23 ⌄ )
24 ⌄ }
25 ⌄
26 ⌄ createRoot ( document . getElementById ( "root" )). render (< Counter />)
The component in the JSX Part: useState holds the count, useEffect prints it. The page is a real page in Chromium, in a process of its own. To run the code yourself at any time, press ⌘↵ or Ctrl+Enter
Read the page’s console What the page prints with console.log appears in the console under it. The Starter prints count each time it changes, so each click adds a line.
import { useEffect, useState } from "react"
JSX CSS
1 ⌄ import { useEffect , useState } from "react"
2 ⌄ import { createRoot } from "react-dom/client"
3 ⌄
4 ⌄ // One component, rendered into the markup's #root.
5 ⌄ function Counter () {
6 ⌄ const [ count , setCount ] = useState ( 0 )
7 ⌄
8 ⌄ useEffect (() => {
9 ⌄ console . log ( "count" , count )
10 ⌄ }, [ count ])
11 ⌄
12 ⌄ return (
13 ⌄ < div className = "rounded-2xl bg-stone-900 p-8 text-center text-stone-100 shadow-sm ring-1 ring-stone-800" >
14 ⌄ < p className = "text-sm font-medium text-emerald-400" > Components and hooks </ p >
15 ⌄ < p className = "my-4 text-6xl font-bold tabular-nums" >{ count }</ p >
16 ⌄ < button className = "button" onClick ={() => setCount (( n ) => n - 1 )}>
17 ⌄ −
18 ⌄ </ button >
19 ⌄ < button className = "button bg-emerald-700 text-white" onClick ={() => setCount (( n ) => n + 1 )}>
20 ⌄ +
21 ⌄ </ button >
22 ⌄ </ div >
23 ⌄ )
24 ⌄ }
25 ⌄
26 ⌄ createRoot ( document . getElementById ( "root" )). render (< Counter />)
Done · code changed since · Runs as you type
Each click changes the count on the page and prints it in the console. To give the page or the console more room, use the two buttons on the console's heading. They switch between Hide console , Show both and Hide page .
The pictures show JSpark on a Mac. On Windows, the window looks a little different and uses Ctrl for ⌘, but everything works the same way.