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 all 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
15 changes: 7 additions & 8 deletions examples/browser-create-react-app/README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
## 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 [PeerId](https://docs.libp2p.io/concepts/peer-id/) of this node and the version number of `js-ipfs` used to spawn it.

> _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: The PeerId of the 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). The public-private key pair of a node is generated by typing `ipfs init`._

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

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,4 @@ 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)