+{"pageProps":{"content":"[[\"$r\",\"MaxWidth\",\"8\",{\"children\":[[\"$r\",\"HomepageHero\",null,{}],\"\\n\",[\"$r\",\"h1\",null,{\"id\":\"what-is-reactunity\",\"children\":\"What is ReactUnity?\"}],\"\\n\",[\"$r\",\"p\",null,{\"children\":\"ReactUnity is a UI Framework for Unity, that lets you code in React and CSS. It runs this code inside a JavaScript engine and outputs Unity components to directly render them inside Unity. The goal of ReactUnity is to provide Unity developers a declarative way to build user interfaces, similar to web technologies like React and HTML.\"}],\"\\n\",[\"$r\",\"p\",null,{\"children\":[\"Here is a sample \",[\"$r\",\"em\",null,{\"children\":\"Todo App\"}],\" to show off some React and CSS features of ReactUnity.\"]}],\"\\n\"]}],[\"$r\",\"Sandpack\",null,{\"children\":[[\"$r\",\"pre\",null,{\"children\":[\"$r\",\"code\",null,{\"className\":\"language-js\",\"children\":\"import { render } from '@reactunity/renderer';\\nimport { useRef, useState } from 'react';\\n\\nexport function TodoItem(props) {\\n return <view className='todo-item'>\\n <view className='todo-item-name'>\\n {props.item.text}\\n </view>\\n\\n <button className='todo-remove-button'\\n onClick={() => props.onRemove(props.item.id)}>\\n <icon>delete</icon>\\n </button>\\n </view>;\\n}\\n\\nexport function TodoPage() {\\n const lastId = useRef(3);\\n const [items, setItems] = useState([\\n { id: 0, text: 'Take a walk' },\\n { id: 1, text: 'Buy groceries' },\\n { id: 2, text: 'Prepare dinner' },\\n ]);\\n\\n const inputRef = useRef();\\n\\n function addTodo(item) {\\n inputRef.current.Value = '';\\n setItems(oldItems => {\\n const newItems = [...oldItems];\\n newItems.push({ id: lastId.current++, text: item });\\n return newItems;\\n });\\n }\\n\\n function removeTodo(id) {\\n setItems(oldItems => oldItems.filter(x => x.id !== id));\\n }\\n\\n return <scroll className='todo-root'>\\n <view className=\\\"todo-header\\\">\\n TODO app example\\n </view>\\n\\n <view className='todo-input-section'>\\n <input className='todo-input' ref={inputRef}\\n placeholder='Enter a new todo'\\n onSubmit={(ev, sender) => addTodo(sender.Value)} />\\n\\n <button className='todo-add-button'\\n onClick={() => addTodo(inputRef.current.Value)}>\\n <icon>add</icon>\\n </button>\\n </view>\\n\\n <view className=\\\"todo-items\\\">\\n {items.map((item) =>\\n <TodoItem item={item} key={item.id}\\n onRemove={removeTodo} />)}\\n </view>\\n </scroll>;\\n}\\n\\nrender(<TodoPage />);\\n\"}]}],[\"$r\",\"pre\",null,{\"children\":[\"$r\",\"code\",null,{\"className\":\"language-css\",\"children\":\".todo-root {\\n flex-direction: column;\\n align-self: center;\\n align-items: stretch;\\n margin: 16px;\\n padding: 32px;\\n\\n background-color: #dedede;\\n border-radius: 8px;\\n box-shadow: 1px 1px 6px -2px black;\\n}\\n\\n.todo-header {\\n color: cornflowerblue;\\n font-size: 30px;\\n font-weight: bold;\\n margin-bottom: 18px;\\n text-align: center;\\n}\\n\\n.todo-input-section {\\n flex-direction: row;\\n align-items: stretch;\\n width: 360px;\\n margin-bottom: 18px;\\n}\\n\\n.todo-input {\\n flex-shrink: 1;\\n flex-grow: 1;\\n}\\n\\n.todo-item {\\n flex-direction: row;\\n align-items: center;\\n transition: rotate var(--item-animation-duration), margin-bottom var(--item-animation-duration);\\n rotate: 0 0 0;\\n width: 360px;\\n padding: 4px 0 4px 8px;\\n margin-bottom: 0px;\\n transform-origin: top;\\n\\n background-color: white;\\n border: 1px solid #dedede;\\n border-radius: 8px;\\n\\n --item-animation-duration: 400ms;\\n}\\n\\n.todo-item:not(:first-child) {\\n margin-top: 10px;\\n}\\n\\n.todo-item:enter {\\n rotate: 90deg 0 0;\\n margin-bottom: -66px;\\n}\\n\\n.todo-item:leave {\\n rotate: 90deg 0 0;\\n margin-bottom: -66px;\\n pointer-events: none;\\n state-duration: var(--item-animation-duration);\\n}\\n\\n.todo-item-name {\\n flex-shrink: 1;\\n flex-grow: 1;\\n}\\n\\n.todo-add-button,\\n.todo-remove-button {\\n width: 50px;\\n height: 50px;\\n margin-left: 8px;\\n}\\n\"}]}]]}],[\"$r\",\"MaxWidth\",\"last\",{\"children\":[\"\\n\",[\"$r\",\"h2\",null,{\"id\":\"how-does-reactunity-work\",\"children\":\"How does ReactUnity work?\"}],\"\\n\",[\"$r\",\"p\",null,{\"children\":[\"React library is built in a way so that the React paradigm can be used in different platforms. In fact, all platforms which can run Javascript can have a framework like ReactUnity. There are actually more \",[\"$r\",\"a\",null,{\"href\":\"https://github.com/chentsulin/awesome-react-renderer\",\"target\":\"_blank\",\"rel\":\"nofollow noopener noreferrer\",\"children\":\"Awesome React Renderers\"}],\" you probably haven’t heard of.\"]}],\"\\n\",[\"$r\",\"p\",null,{\"children\":[\"The same way you use \",[\"$r\",\"code\",null,{\"children\":\"react-dom\"}],\" for web applications, and React Native for mobile applications; you can use ReactUnity for Unity UIs.\"]}],\"\\n\",[\"$r\",\"h2\",null,{\"id\":\"how-can-i-learn-reactunity\",\"children\":\"How can I learn ReactUnity?\"}],\"\\n\",[\"$r\",\"p\",null,{\"children\":[\"To learn ReactUnity, you need to learn React first. You can start by the \",[\"$r\",\"a\",null,{\"href\":\"https://reactjs.org/\",\"target\":\"_blank\",\"rel\":\"nofollow noopener noreferrer\",\"children\":\"official React documentation\"}],\". If you already feel confident with React, you can keep reading this documentation.\"]}]]}]]","toc":"[]","meta":{"id":"home","layout":"Home","title":"ReactUnity Docs","permalink":"index.html"}},"__N_SSG":true}
0 commit comments