SandBox for Easy Code Testing

개발환경이 미리 준비된 cloud 환경에서 code 를 빠르게 작성하여 동작을 확인할 수 있는 것임

https://codesandbox.io/

CodeSandbox: Instant Cloud-Based IDE

 

여기서는 react 용 project instance (strange-violet-7) 를 만들고 아래의 code 를 App.js 에 update 하여  useState 를 test 하였다.

 

Project creation steps

• click Create on top right cornet of the screen ->
• user can see the available options ( React, Vanilla, Docker, Next.js etc)
• click React

import { useState } from "react";
import "./styles.css";


export default function App() {
	const [item, setItem] = useState(1)
	const incrementItem = () => setItem ((item) => (item + 1))
	const decrementItem = () => setItem ((item) => (item- 1))
    
	return (
		<div className="App">
			<h1>Hello {item}</h1>
			<h2>Start editing to see some magic happen!</h2>
			<button onClick={incrementItem}>increment</button>
			<button onClick={decrementItem}>decrement</button>
		</div>
	);
}