L1 20210518

讲义Reach 学习班 第一期.pptx
代码部分helloworld.zip

ES6 基础Demo

  1. //#region template string
  2. let basket = { count: 1, };
  3. const TemplateString = () => {
  4.   let str = 'There are  ' + basket.count + '  ' +
  5.     'items in your basket '
  6.   console.log('old method:', str);
  8.   str = `
  9.   There are ${basket.count + ('a' + 'b')} items in your basket 
  10. `;
  11.   console.log('new method:', str);
  12. }
  13. TemplateString()
  14. //#endregion
  16. //#region  arrow function
  17. function hellowWorld() {
  18.   console.log(`Hello World`)
  19. }
  20. const hellowWorldBeta = () => {
  21.   console.log(`Hello World`)
  22. }
  23. hellowWorld()
  24. hellowWorldBeta()
  26. let Person = () => {
  27.   return {
  28.     name: 'Alice',
  29.     playCard: () => {
  30.       console.log(`I can play card`)
  31.     }
  32.   }
  33. }
  34. console.log(Person())
  35. console.log(Person().name)
  36. Person = () => ({
  37.   name: 'Bob',
  38.   playCard: () => {
  39.     console.log(`I can play card`)
  40.   }
  41. })//构造函数直接返回一个对象
  42. console.log(Person())
  43. //#endregion
  45. //#region promise
  46. // let success = false;
  47. // const giveCFX = new Promise(function (resolve, reject) {
  49. //   reject('bad');
  50. //   resolve('ok');
  51. // });
  52. // giveCFX.then(function (v) {
  53. //   console.log(`resolved${v}`)
  54. // }).catch((x) => {
  55. //   console.log(x)
  56. // }).finally(()=>{
  57. //   console.log('finally')
  58. // })
  59. //#endregion

L4 20210529

在Firefox和Chrome下面安装meta mask

Firefox 选择扩展和主题，搜索metamask即可
image.png
Chrome
进入Web Store进行搜索 https://chrome.google.com/webstore/category/extensions

ReactJS

官方网站： https://reactjs.org/
入门教程：http://www.ruanyifeng.com/blog/2015/03/react.html

简单了解State，Props即可上手

剪刀石头布网页版

源码如下
tut-9.zip
运行命令是./reach react
主要熟悉页面的生命周期，跟着流程找出各个网页对应的视图和相关的组件方法，State

L520210605

视频

链接：https://pan.baidu.com/s/13eRJhdQfzoVH6Vcdr4Z4RQ 提取码：il56 复制这段内容后打开百度网盘手机App，操作更方便哦—来自百度网盘超级会员V5的分享

Vue入门

https://www.runoob.com/w3cnote/vue-js-quickstart.html

安装命令

sudo apt update
sudo apt install nodejs npm

cnpm install -g @vue/cli (请安装cnpm，命令是npm install -g cnpm —registry=https://registry.npm.taobao.org))
vue create vuecli-reach-tut
cnpm install @reach-sh/stdlib

仓库源代码

https://github.com/nicholasburka/reach-vue-tutorial/tree/vue/src

L620210610

视频

链接：https://pan.baidu.com/s/1Qk0qfbGcN5-5lsOBOzbi6w 提取码：5ht5
复制这段内容后打开百度网盘手机App，操作更方便哦—来自百度网盘超级会员V5的分享

安装命令

1.git clone https://github.com/uxk0587/reach-vue-tutorial.git

  1. cd reach-vue-tutorial

3.curl https://raw.githubusercontent.com/reach-sh/reach-lang/master/reach -o reach ; chmod +x reach

4.npm install @reach-sh/stdlib

  1. REACH_CONNECTOR_MODE=ETH ./reach devnet 【后端】


    执行这条命令前得改一下代码 ，把scr/App.vue的代码改成 import * as reach from ‘@reach-sh/stdlib/ETH.mjs’

  2. npm run serve 【前端】

    资料

    VueX
    https://vuex.vuejs.org/zh/
    Vue
    https://www.bilibili.com/video/BV12J411m7MG?p=4&spm_id_from=pageDriver

L7 20210615

Hashlock控制台代码

workshop-hash-lock.zip

视频

链接：https://pan.baidu.com/s/1XpK7TehdaHBXz3VD0sjPbA 提取码：fk1e
复制这段内容后打开百度网盘手机App，操作更方便哦—来自百度网盘超级会员V5的分享

作业

用Vue/ReactJs 实现hashlock的网页版本。要求

  1. A打开网页，页面有两个文本框，输入金额和密码。然后点击提交。生成一个智能合约。
  2. B加入该智能合约，B 输入密码，点击提交。
  3. 如果B输入正确，B得到赏金，否则赏金退还给A。