Section7 : Advanced Multi-Page Front-Ends (1)

158. App Mockups

 

*putting together this application

 

158. CRA vs Next

Routing = showing multiple pages to users

 

 

160. Next Page's Architecture

 

1. git bash 내에서 kickstart dir 안으로 들어옴 

2. $ npm install next react react-dom

3. next를 실행하면 new dir 이 자동적으로 생성됨

4. pages dir 생성

5. pages dir 안에 js 파일 2개 생성

show.js

newcampaign.js

 

161. Basics of Next Routing

 

package.json 수정사항

 

$ npm run dev

 

 

1. url: http://localhost:3000

url 방문해 보면 404 에러 뜸

 

2. url: http://localhost:3000/newcampaign

위 url 주소로 방문

 url: http://localhost:3000/show

 

-> * pages dir 안에서 페이지 파일 생성!

 

162. Root Routes

 

page > index.js 

= root route 역할

 

1. newcampaign.js을 index.js로 rename

2. 다시 http://localhost:3000 로 접속했을 때 newcampaign.js의 페이지가 나옴

 

* 이 순서대로

 

164. CampaignFactory Instance

 

1. web3.js 파일 생성

[web3.js]

import Web3 from "web3";

Window.ethereum.request({method: "eth_requestAccounts"});

const web3 = new Web3(Window.ethereum);

export default web3;

 

 

166. Getting a Test Campaign

 

167. Fetching Deployed Campaigns

 

(new ver.) index.js

import React, { Component } from 'react';
import factory from '../etherum/factory';

class CampaignIndex extends Component{
  async componentDidMount(){
    const campaigns = await factory.methods.getDeployedCampaigns().call();

    console.log(campaigns);
  }

  render(){
    return <div>Campaigns Index! </div>;
  }
}

export default CampaignIndex;

 

168. Why Next.js, Anyway?

 

Next.js = server side rendering

 

 

much more flexible for a wide users

 

170. Server vs Client Web3 Instances

 

web3.js

import Web3 from "web3";

let web3;

if (typeof window !== "undefined" && typeof window.ethereum !== "undefined") {
  // We are in the browser and metamask is running.
  window.ethereum.request({ method: "eth_requestAccounts" });
  web3 = new Web3(window.ethereum);
} else {
  // We are on the server *OR* the user is not running metamask
  const provider = new Web3.providers.HttpProvider(
    "https://rinkeby.infura.io/v3/15c1d32581894b88a92d8d9e519e476c"
  );
  web3 = new Web3(provider);
}

export default web3;

 

171. GetInitialProps Function

 

index.js

 

*사이트 연결이 안 됨....다시 시도

-> 사이트 접속 전 $npm run dev 필수

* 2번째 에러,,,,,

172. Semantic UI React

$ npm install --save semantic-ui-react

 

173. Card Group Setup

https://react.semantic-ui.com/views/card/

 

$ npm install --save semantic-ui-css

 

Card Group 예시

174. Rendering Card Group - 176. Adding a button

 

index.js

import React, { Component } from "react";
import { Card, Button } from "semantic-ui-react";
import factory from "../ethereum/factory";

class CampaignIndex extends Component {
  static async getInitialProps() {
    const campaigns = await factory.methods.getDeployedCampaigns().call();

    return { campaigns };
  }
  renderCampaigns() {
    const items = this.props.campaigns.map((address) => {
      return {
        header: address,
        description: <a>View Campaign</a>,
        fluid: true,
      };
    });
    return <Card.Group items={items} />;
  }
  render() {
    return (
      <div>
        <link
          rel="stylesheet"
          href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"
        ></link>
        {this.renderCampaigns()}
        <Button content="Create Campaign" icon="add circle" primary />
      </div>
    );
  }
}

export default CampaignIndex;