# nccc react

## https://www.npmjs.com/package/wagmi

node --version

mkdir react_1020
cd react_1020
npx --version
https://create-react-app.dev/
npx create-react-app demo1
cd demo1
npm start

# ctrl+tilda (```)

ctrl+C
npm run build
npm install -g serve
npm list -g
serve -s build

# 要安裝的模組

名稱: ES7+ React/Redux/React-Native snippets
識別碼: dsznajder.es7-react-js-snippets
描述: Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.
版本: 4.4.3
發行者: dsznajder
VS Marketplace 連結: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets


名稱: HTML Boilerplate
識別碼: sidthesloth.html5-boilerplate
描述: A basic HTML5 boilerplate snippet generator.
版本: 1.1.1
發行者: sidthesloth
VS Marketplace 連結: https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate


名稱: JavaScript (ES6) code snippets
識別碼: xabikos.JavaScriptSnippets
描述: Code snippets for JavaScript in ES6 syntax
版本: 1.8.0
發行者: charalampos karypidis
VS Marketplace 連結: https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

名稱: Path Intellisense
識別碼: christian-kohler.path-intellisense
描述: Visual Studio Code plugin that autocompletes filenames
版本: 2.8.1
發行者: Christian Kohler
VS Marketplace 連結: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

# https://trufflesuite.com/drizzle/

# https://chrome.google.com/webstore/category/extensions?hl=zh-TW

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=zh-TW


import './App.css';
import React from 'react'
function App() {
  return (
    // <div className="App">
    //   <header className="App-header">
    //     <p>
    //       使用react來作簡易的<em>frontend</em>
    //     </p>
    //   </header>
    // </div>
    //React.createElement('div',null,"h1","使用react想連到區塊鏈")
    React.createElement('div',{className:'App'},React.createElement('h1',null,'Hi'),
    React.createElement('h1',null,"I am Mark"))
  );
}

export default App;

# 直接套用jsx

import './App.css';
import React from 'react'
function App() {
  return (
    <div className="App">
      <h1>使用react想連到區塊鏈</h1>
    </div>
    //React.createElement('div',null,"h1","使用react想連到區塊鏈")
    // React.createElement('div',{className:'App'},React.createElement('h1',null,'Hi'),
    // React.createElement('h1',null,"I am Mark"))
  );
}

export default App;

# 建立目錄`components`, 建立檔案`Dashboard.js`

import React, { Component } from 'react'

class Dashboard extends Component {
    render() {
        return (
            <div>
                <h1>這是儀表版</h1>
                <h2>詳細資料寫在這兒</h2>
                <ul>
                    <li>truffle</li>
                    <li>ganache</li>
                </ul>
            </div>
        )
    }
}
export default Dashboard;

# App.js

import './App.css';
import React from 'react'
import Dashboard from './components/Dashboard';
import Person from './components/Person';
function App() {
  return (
    <div className="App">
      <h1>使用react想連到區塊鏈</h1>
      <Person name="Mark" age="43"/>
      <Person name="Tim" age="35"></Person>
      <Person name="Arial" age="37"/>
      <Person name="Kevin" age="48"></Person>
      <Dashboard></Dashboard>
      <Dashboard></Dashboard>
      <Dashboard></Dashboard>
    </div>
  );
}

export default App;

# React Class Component

import React from 'react'

const Person = props => {
    return (
        <div><h1>I am {props.name}, I am {props.age} years old.
        {Math.floor(Math.random() * 5)}</h1>

        </div>
    )
}

export default Person

# React class component

import React from 'react'

const Person = props => {
    return (
        <div><h1>I am {props.name}, I am {props.age} years old.
            {Math.floor(Math.random() * 5)}</h1>
        <h2>My job function is {props.children}</h2>
        </div>
    )
}

export default Person

import './App.css';
import React from 'react'
import Dashboard from './components/Dashboard';
import Person from './components/Person';
import Pet from './components/Pet';
import { Component } from 'react';
class App extends Component {
  state = {
    persons: [
      { name: "Mark", age: 45 },
      { name: "James", age: 37 },
      { name: "Tim", age: 35 },
      { name: "Kevin", age: 50 }
    ]
  };
  changeNameHandler = ()=>{
    this.setState({
      persons: [
        { name: "Captain America", age: 45 },
        { name: "Thor", age: 37 },
        { name: "Iron Man", age: 35 },
        { name: "Hawk", age: 50 }
      ]
    })
  }
  render() {

    return (
      <div className="App">
        <h1>使用react想連到區塊鏈</h1>
        <button onClick={this.changeNameHandler}>改變</button>
        <Person name={this.state.persons[0].name} age={this.state.persons[0].age} />
        <Pet specie="cat" name="king"></Pet>
        <Person name={this.state.persons[1].name} age={this.state.persons[1].age}>
          Team Leader
        </Person>
        <Pet specie="dog" name="happy"></Pet>
        <Person name={this.state.persons[2].name} age={this.state.persons[2].age} />
        <Person name={this.state.persons[3].name} age={this.state.persons[3].age}></Person>
        <Dashboard></Dashboard>
        <Dashboard></Dashboard>
        <Dashboard></Dashboard>
      </div>
    );
  }
}

export default App;


npx create-react-app demo2
code demo2
npm start

# Counter1.js

import React from 'react'
import { useState } from 'react'
function Counter1() {
    //let counter = 20;
    const [dishCount, setDishCount] = useState(20)
    function changeCounter() {
        //counter += 1;
        setDishCount(dishCount + 1)
        console.log("counter=", dishCount)
    }
    return (
        <div><p>Counter1={dishCount}</p>
            <button onClick={() => { changeCounter() }}>+1</button>
        </div>
    )
}

export default Counter1

# App.js

import './App.css';
import Counter1 from './components/Counter1';

function App() {
  return (
    <div className="App">
      <Counter1/>
    </div>
  );
}

export default App;

# https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=zh-TW



npx create-react-app demo3
cd demo3
npm i wagmi ethers
code .

# App.js

import './App.css';
import { WagmiConfig, createClient } from 'wagmi'
import { getDefaultProvider } from 'ethers'
import Profile from './components/Profile';
const client = createClient({
  autoConnect: true,
  provider: getDefaultProvider()
})
function App() {
  return (
    <WagmiConfig client={client}>
      <div className="App">
        <Profile/>
        <p>可以去使用wagmi連到ethereum的區塊鏈了</p>
      </div>
    </WagmiConfig>
  );
}

export default App;

# Profile.js

import React from 'react'
import { useAccount, useConnect, useDisconnect } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'
function Profile() {
    const { address, isConnected } = useAccount()
    const { connect } = useConnect({ connector: new InjectedConnector() })
    const { disconnect } = useDisconnect()
    if (isConnected) {
        return (
            <div><h1>Connected</h1>
            <h2>連結的帳號是:{address}</h2>
            <button onClick={()=>disconnect()}>disconnect from wallet</button>
            </div>
        )
    } else {
        return (
            <div>
                <h1>Not yet connected</h1>
                <button onClick={() => connect()}>connect to wallet</button>
            </div>
        )
    }

}

export default Profile


# back to demo2
## Counter1.js

import React from 'react'
import { useState } from 'react'
function Counter1() {
    const [dishCount, setDishCount] = useState(5)
    const [showDishMessage, setShowDishMessage] = useState(true)
    const [bowCount, setBowCount] = useState(3)
    const [showBowMessage, setShowBowMessage] = useState(true)
    function changeDishCounter() {
        setDishCount(dishCount + 1)
        console.log("counter=", dishCount)
    }

    return (
        <div>
            <h3>用了{dishCount}個盤子</h3>
            {showDishMessage && <h4>該洗盤子了</h4>}
            <h3>用了{bowCount}個碗</h3>
            {showBowMessage && <h4>該洗碗了</h4>}

            <button onClick={() => { changeDishCounter() }}>用盤子</button>
        </div>
    )
}

export default Counter1

# Counter2.js

import React from 'react'
import { useReducer } from 'react'
function Counter2() {
    function reducer(state, action) {
        switch (action.type) {
            case "useBow":
                let bowNeedWash = false;
                if (state.bowCount > 9) {
                    bowNeedWash = true
                }
                return { ...state, bowCount: state.bowCount + 1, showBowMessage: bowNeedWash }
            case "washBow":
                return { ...state, bowCount: 0, showBowMessage: false }
            case "useDish":
                let dishNeedWash = false;
                if (state.dishCount > 4) {
                    dishNeedWash = true
                }
                return { ...state, dishCount: state.dishCount + 1, showDishMessage: dishNeedWash }
            case "washDish":
                return { ...state, dishCount: 0, showDishMessage: false }
            default:
                return state
        }
    }
    const [state, dispatch] = useReducer(reducer, {
        dishCount: 5,
        bowCount: 3,
        showDishMessage: true,
        showBowMessage: true
    })
    return (
        <div>
            <h2>Counter2</h2>
            <h3>用了{state.dishCount}個盤子</h3>
            {state.showDishMessage && <h1>該洗盤子了</h1>}
            <button onClick={() => dispatch({ type: 'useDish' })}>用盤子</button>
            <button onClick={() => dispatch({ type: 'washDish' })}>洗盤子</button>
            <h3>用了{state.bowCount}個碗</h3>
            {state.showBowMessage && <h1>該洗碗了</h1>}
            <button onClick={() => dispatch({ type: 'useBow' })}>用碗</button>
            <button onClick={() => dispatch({ type: 'washBow' })}>洗碗</button><br />
        </div>
    )
}

export default Counter2

# https://zh-hant.reactjs.org/docs/hooks-intro.html

# 今天三個檔案
### https://drive.google.com/file/d/1cFcjUMDr4XblTB5xt9xnnzadEtilhr15/view?usp=sharing