docs: guides and examples (#54)

blog/2023-10-05-setting-up-your-internet-identity-on-internetcomputer-dot-org/index.md

@@ -92,7 +92,6 @@ The new passkey will inherit a default name. Optionally, you can rename it to ma
 
 In this guide, we've walked you through the process of setting up your Internet Identity for another domain. We hope this has been helpful and will provide you with easy access to Juno's administration console and other dApps using multiple domains for sign-in with Internet Identity.
 
-
 👋
 
 Stay connected with Juno by following us on [X/Twitter](https://twitter.com/junobuild).

docs/build/analytics.md

@@ -93,7 +93,7 @@ Before integrating Juno Analytics into your app or website, you need to create a
 
 The platform will then create your orbiter smart contract and provision its resources. Once the process is complete, click "Close" to terminate the creation wizard.
 
-At this point, you have successfully created the analytics; however, you have not yet listed which satellites are eligible to track page views and events. 
+At this point, you have successfully created the analytics; however, you have not yet listed which satellites are eligible to track page views and events.
 
 5. To complete the configuration, proceed to the Analytics/**Settings** page to configure them.
 

docs/faq.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 9
+sidebar_position: 10
 ---
 
 # FAQ

docs/guides/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Guides and Examples",
+  "position": 4,
+  "link": {
+    "type": "generated-index",
+    "description": "Start building with your preferred technologies. Explore our quick start guides and tutorials, designed to assist you in hosting and developing web dapps using your favorite frameworks."
+  }
+}

docs/guides/react.md

@@ -0,0 +1,150 @@
+---
+id: react
+title: React
+toc_min_heading_level: 2
+toc_max_heading_level: 2
+---
+
+# Use Juno with React
+
+Learn how to create a Juno project developed with React.
+
+## Table of contents
+
+- [Quickstart](#quickstart)
+- [Note-taking app](#note-taking-app)
+- [Hosting](#hosting)
+
+---
+
+## 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](../add-juno-to-an-app/create-a-satellite.md) in the Juno's console.
+
+After your project is ready, create a collection in your datastore, which we'll call `demo` in the [console](https://console.juno.build).
+
+### 2. Create a React app
+
+Create a React app using for example a [Vite](https://vitejs.dev/guide/) template.
+
+```bash
+npm create vite@latest my-app -- --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`.
+
+```bash
+cd my-app && 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.
+
+```javascript
+import { useEffect, useState } from "react";
+import { initJuno, setDoc } from "@junobuild/core";
+
+function App() {
+  const [record, setRecord] = useState(undefined);
+
+  // TODO: Replace the following satelliteId with your app's effective 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 && <output>Key: {record.key}</output>}
+    </>
+  );
+}
+
+export default App;
+```
+
+### 5. Start the app
+
+Start the app, go to [http://localhost:5173](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](/blog/build-a-web3-app-with-react-js), 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](../build/datastore.md): a simple key-pair database for storing user data and other information.
+- Juno [storage](../build/storage.md): a file storage system to store and serve user-generated content, such as photos.
+- Juno [authentication](../build/authentication.md): easy-to-use SDKs that support truly anonymous authentication.
+
+For detailed instructions, visit the guide 👉 [Build A Web3 App With React JS](/blog/build-a-web3-app-with-react-js).
+
+---
+
+## Hosting
+
+If you're looking to deploy your existing app or website developed with React without implementing any additional features with Juno, this guide is for you.
+
+### 1. Set up a satellite
+
+[Create a new satellite](../add-juno-to-an-app/create-a-satellite.md) 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:
+
+```bash
+npm i -g @junobuild/cli
+```
+
+After the CLI is ready, log in to your satellite from your terminal to authenticate your device.
+
+```bash
+juno login
+```
+
+### 3. Deploy
+
+Deploy your project by running the following command from your project’s root folder:
+
+```bash
+juno deploy
+```
+
+### 4. Open
+
+Open your browser and you should see your deployed app or website.
+
+```bash
+juno open
+```
+
+[satellite]: ../terminology.md#satellite

docs/infrastructure/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Infrastructure",
-  "position": 4,
+  "position": 5,
   "link": {
     "type": "generated-index",
     "description": "Few information about the Big Tech-less infrastructure that powers the smart contracts of Juno."

docs/miscellaneous/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Miscellaneous",
-  "position": 7,
+  "position": 8,
   "link": {
     "type": "generated-index"
   }

docs/pricing.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 11
+sidebar_position: 12
 ---
 
 # Pricing

docs/roadmap.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 7
 ---
 
 # Roadmap

docs/terminology.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 8
+sidebar_position: 9
 ---
 
 # Terminology

docs/troubleshooting.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 10
+sidebar_position: 11
 ---
 
 # Troubleshooting