git.iko.soy/urbit.org
on master help sign in
Clarify React in Landscape and fix a couple of minor typos. (#705)
3c73c81Neal Davis
tutorials/hoon/landscape-tile.md+10−5
compare with master
unifiedsplit
@@ -28,7 +28,12 @@ The wizard prompts you with three questions.
28
28
29### Testing the Default App
29### Testing the Default App
30
30
31+With the questions answered, you now have two halves of a default app:
32+
33+- `urbit/app/testing.hoon`, which contains your Hoon code
34+- `tile/tile.js`, which is the source file React uses to build `urbit/app/testing/js/tile.js`
35+
31−With the questions answered, you now have two halves a default app that comes with the repo: `testing.hoon` and `tiles/tile.js`. Let's test of that the default app is set up correctly, so that we make an app of our own.
36+Let's test that the default app is set up correctly, so that we make an app of our own.
32
37
33Run `npm run build`. This copies files into the pier that you linked into the `/app` directory of your desk. Your Hoon file will be `/app/testing.hoon`, and your js file will be `/app/testing/js/tile.js`.
38Run `npm run build`. This copies files into the pier that you linked into the `/app` directory of your desk. Your Hoon file will be `/app/testing.hoon`, and your js file will be `/app/testing/js/tile.js`.
34
39
@@ -48,7 +53,7 @@ Let's examine a sample tile that has different Hoon code from the default, to ex
48
53
49`tile.js` does the actual front-end rendering using React. The details of React are left for the reader to learn on their own, but you can see here how to store data in the state. That tile will be rendered every time the state gets updated. Calling `api.action` will send a JSON poke to our gall app. We have attached the function where we use that to the button on the tile, so it will get run when the button is clicked.
54`tile.js` does the actual front-end rendering using React. The details of React are left for the reader to learn on their own, but you can see here how to store data in the state. That tile will be rendered every time the state gets updated. Calling `api.action` will send a JSON poke to our gall app. We have attached the function where we use that to the button on the tile, so it will get run when the button is clicked.
50
55
51−In your pier, replace the code in `/app/testing.hoon` with the Hoon code below.
56+In your pier, replace the code in `urbit/app/testing.hoon` with the Hoon code below.
52
57
53``` hoon
58``` hoon
54/+ *server
59/+ *server
@@ -74,7 +79,7 @@ In your pier, replace the code in `/app/testing.hoon` with the Hoon code below.
74 ==
79 ==
75--
80--
76|_ [bol=bowl:gall ~]
81|_ [bol=bowl:gall ~]
77−+* this .
82+++ this .
78++ bound
83++ bound
79 |= [wir=wire success=? binding=binding:eyre]
84 |= [wir=wire success=? binding=binding:eyre]
80 ^- (quip move _this)
85 ^- (quip move _this)
@@ -133,7 +138,7 @@ In your pier, replace the code in `/app/testing.hoon` with the Hoon code below.
133 ==
138 ==
134++ coup-helm-hi
139++ coup-helm-hi
135 |= [pax=path cop=(unit tang)]
140 |= [pax=path cop=(unit tang)]
136− ~& ["Coup recieved" pax]
141+ ~& ["Coup received" pax]
137 :_ this
142 :_ this
138 ?~ cop
143 ?~ cop
139 (send-status-diff "successfully found {<pax>}")
144 (send-status-diff "successfully found {<pax>}")
@@ -158,7 +163,7 @@ In your pier, replace the code in `/app/testing.hoon` with the Hoon code below.
158--
163--
159```
164```
160
165
161−Now, replace the code below is the contents of `/app/testing/js/tile.js` with the code below. Once you've replaced the code in both files, run `|commit %home` in the Dojo.
166+Now, place the code below into `tile/tile.js`. (`npm` should automatically update `urbit/app/testing/js/tile.js` if you have run `npm run serve`; else, you'll need to `npm run build` again.) Once you've replaced the code in both files, run `|commit %home` in the Dojo.
162
167
163``` javascript
168``` javascript
164import React, { Component } from 'react';
169import React, { Component } from 'react';