Use Juno with React
Explore how to create a Juno project developed with React.
Table of contents
Quickstart
Learn how to create a satellite, set up a collection, and save data from a React app.
1. Set up a satellite and new collection
Create a new satellite in the Juno's console.
After your project is ready, create a collection in your datastore, which we'll call demo
, using the console.
2. Create a React app
Create a React app using for example a Vite template.
npm create vite@latest myjunoapp -- --template react
3. Install the Juno SDK core library
Use @junobuild/core
client library which provides a convenient interface for working with Juno from a React app.
Navigate to the React app and install @junobuild/core
.
cd myjunoapp && npm i @junobuild/core
4. Insert data from your app
In App.jsx
, initialize the library with your public satellite ID.
Add an insert
function to persist a document.
import { useEffect, useState } from "react";
import { initJuno, setDoc } from "@junobuild/core";
function App() {
const [record, setRecord] = useState(undefined);
// TODO: Replace 'satelliteId' with your actual satellite ID
useEffect(() => {
(async () =>
await initJuno({
satelliteId: "aaaaa-bbbbb-ccccc-ddddd-cai",
}))();
}, []);
const insert = async () => {
const doc = await setDoc({
collection: "demo",
doc: {
key: `my-key-${new Date().getTime()}`,
data: {
hello: "world",
},
},
});
setRecord(doc);
};
return (
<>
<button onClick={insert}>Insert a document</button>
{record !== undefined && <span>Key: {record.key}</span>}
</>
);
}
export default App;
5. Start the app
Start the app, go to http://localhost:5173 in a browser, click "Insert a document," and you should see the data successfully persisted in your satellite on the blockchain.
Note-taking app
This tutorial, published as a blog post, demonstrates how to build a basic note-taking app. The app authenticates and identifies the user, stores their notes in a simple key-pair database, some files in storage, and allows the user to log in and retrieve their data. The app uses:
- Juno datastore: a simple key-pair database for storing user data and other information.
- Juno storage: a file storage system to store and serve user-generated content, such as photos.
- Juno authentication: easy-to-use SDKs that support truly anonymous authentication.
For detailed instructions, visit the guide 👉 Build A Web3 App With React JS.
Hosting
If you're looking to deploy your existing app or website developed with React and Juno, this guide is for you.
1. Set up a satellite
If you haven't created a satellite yet, go ahead and create a new one in the Juno's console.
2. Install Juno CLI and log in
Install the Juno command line interface by executing the following command in your terminal:
npm i -g @junobuild/cli
After the CLI is ready, log in to your satellite from your terminal to authenticate your device.
juno login
3. Deploy
Build your app:
npm run build
Deploy your project by running the following command from your project’s root folder:
juno deploy
When prompted to provide the name or path of the folder containing your built dapp files, answer dist
.
4. Open
Open your browser and you should see your deployed app or website.
juno open