Skip to content

Latest commit

 

History

History
49 lines (42 loc) · 2.4 KB

README.md

File metadata and controls

49 lines (42 loc) · 2.4 KB
Raw

Atomic Data React Vite Typescript Template

This is a template / boilerplate for React apps using Atomic Data. It demonstrates the use of @tomic/react. Run npx degit atomicdata-dev/react-template my-project to use this template on your machine. You can also open this repo on codesandbox

  • Easily create decentralized applications with real-time updates and linked data
  • Read more in the Atomic Data docs
  • Designed to work with Atomic-Server
  • Powered by React, typescript, vite, @tomic/react
  • All tools in this template (including this template itself) are MIT Licensed / free / open source.

Atomic Data React tutorial

In this tutorial, we'll be building a data browser that can create and edit arbitrary data. The @tomic/react NPM package will deal with global state management and component updates, as well as authentication and authorization.awdawd wdaw d

# First, make sure yarn (or NPM) is installed.
yarn create vite atomic-browser --template react-ts
# Install dependencies
yarn
# Add the Atomic Data React dependency
yarn add @tomic/react
# Run server
yarn run dev
# Open http://localhost:3000/ to see app
  • For VSCode users, install recommended extensions (vite + react + typescript)
  • Import Store and StoreContext from @tomic/react.
  • Instantiate a Store.
  • Wrap contents in App in the StoreContext.Provider, and pass it a newly instantiated Store.
  • Let's view some data!
    • Create a new Browser resource that will handle navigation of current Resource
    • Create ResourcePage with a simple Title shown
    • Render a description property using useString
    • Add loading and error states
    • Render values using ValueComp and PropVal
  • Let's edit data!
    • Create an Atomic Data agent on https://atomicdata.dev/invites/1
    • Go to User Settings and copy the secret
    • Return the second set function from useString, and call this when the input of the description changes
  • Let's add routing / navigation
    • Create a Context in Browser.tsx for navigation
    • Give it the setState for the current subject
    • consume it where you want to handle navigation actions using useContext