Skip to content
This repository has been archived by the owner on Feb 12, 2024. It is now read-only.

docs: improve README of browser-create-react-app #3737

Merged
merged 3 commits into from
Jul 27, 2021
Merged
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions examples/browser-create-react-app/README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
## IPFS React app

A minimal demonstration of how to use js-ipfs in a `create-react-app` generated app.
This is a minimal demonstration of how to use `js-ipfs` in a `create-react-app` generated app.

It boots up a js-ipfs instance (an IPFS node) via a custom React hook in `./src/hooks/use-ipfs-factory.js`, which is called from `./src/App.js`. Once the IPFS node is set up, `App.js` displays its ident and its version number.
It boots up a `js-ipfs` instance (an IPFS node) via a custom React hook in `./src/hooks/use-ipfs-factory.js`, which is called from `./src/App.js`. Once the IPFS node is set up, `./src/App.js` displays the ident of this node and the version number of `js-ipfs` used to spawn it.
achingbrain marked this conversation as resolved.
Show resolved Hide resolved

> _Remember that a Peer ID of an IPFS node is [the multihash of the public key of this node](https://github.com/libp2p/specs/blob/master/peer-ids/peer-ids.md#peer-ids), and the public-private key pair of a node is generated by typing `ipfs init`._
> _Side note: what we call ident here, or "id", is the Peer ID of the IPFS node and is [the multihash of the public key of this node](https://github.com/libp2p/specs/blob/master/peer-ids/peer-ids.md#peer-ids). The public-private key pair of a node is generated by typing `ipfs init`._
achingbrain marked this conversation as resolved.
Show resolved Hide resolved

![Screen shot of the js ipfs node id info](./images/screenshot.png)


**Note**: this example is useful to learn how to spawn IPFS from a web page. It is also possible to [spawn an IPFS daemon from the command line](https://docs.ipfs.io/install/command-line/) with `ipfs daemon`. While self-hosting is advised, one can also delegate IPFS operations to a third-party like Infura. See tutorials [here](https://blog.infura.io/part-2-getting-started-with-ipfs-on-infura/) and [here](https://blog.infura.io/part-2-getting-started-with-ipfs-on-infura/).
**Note**: this example demo is useful to learn how to spawn IPFS from a web page. It is also possible to [spawn an IPFS daemon from the command line](https://docs.ipfs.io/install/command-line/) with `ipfs daemon`. While self-hosting is advised, one can also delegate IPFS operations to a third-party like Infura. See tutorials [here](https://blog.infura.io/part-2-getting-started-with-ipfs-on-infura/) and [here](https://blog.infura.io/part-2-getting-started-with-ipfs-on-infura/).
achingbrain marked this conversation as resolved.
Show resolved Hide resolved

## To start

Expand All @@ -23,14 +23,14 @@ $ npm start
```
## Call structure in `App.js`
All React applications store their main logic in `App.js`:
* `App.js` renders the cosmetics of the demo and call `useIpfs` to retrieve the `id` of the node
* `App.js` renders the cosmetics of the demo and calls `useIpfs` to retrieve the `id` of the node
* `useIpfsFactory.js` initialises and closes the IPFS local node
* `useIpfs.js` does the actual calls to IPFS to retrieve the property specified in argument (here the retrieved property is `id`, requested from `App.js`)

## Annexes
### Console message `[HMR] Waiting for update signal from WDS...`
### You may be puzzled by a console message `[HMR] Waiting for update signal from WDS...`

This message comes from the hot reload capability of webpack, that can update the web app every time you save your development code. To remove it, see here: https://stackoverflow.com/questions/59695102/reactjs-console-error-hmr-waiting-for-update-signal-from-wds
This message comes from the hot reload capability of `webpack`, that can update the web app every time you save your development code. To remove it, see here: https://stackoverflow.com/questions/59695102/reactjs-console-error-hmr-waiting-for-update-signal-from-wds

### Available Scripts from create-react-app

Expand Down Expand Up @@ -64,5 +64,5 @@ But with modern hosting services like Heroku, Netlity or Fleek, you can skip the

You can learn more on IPFS API in the [IPFS documentation](https://docs.ipfs.io/) and [IPFS npm documentation](https://www.npmjs.com/package/ipfs-http-client).

Details how to use the File System abstraction of IPFS (add, cat, egt, ls etc.) are [here](https://github.com/ipfs/js-ipfs/blob/master/docs/core-api/FILES.md)
Details how to use the File System abstraction of IPFS (add, cat, get, ls etc.) are [here](https://github.com/ipfs/js-ipfs/blob/master/docs/core-api/FILES.md)