178. The Need for a layout
헤더-푸터 각 페이지마다 매번 다시 작성하기 번거로움
=> 레이아웃을 만들어 재사용하자
= Layout.js
Layout.js
180. The Layout Component
1. components folder 생성
2. Layout.js file 생성
181. Assembling a Header - 183.Two Column layout
184. Nested Routing
http://localhost:3000/campaigns/new
: url 접속
185. Final Css Fix
Layout.js
import React from "react";
import { Container } from "semantic-ui-react";
import Head from "next/head";
import Header from "./Header";
const Layout = (props) => {
return (
<div>
<Container>
<Head>
<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"
></link>
</Head>
<Header />
{props.children}
</Container>
</div>
);
};
export default Layout;
186. Form Creation
new.js
187. Input Change Handlers
-> Event Handler
1. set up a new piece of state to hold that value that the user is entering
188. Form Submittal
*new.js (update ver)
import React, { Component } from 'react';
import { Form, Button, Input } from 'semantic-ui-react';
import Layout from '../../components/Layout';
import factory from '../../ethereum/factory';
import web3 from '../../ethereum/web3';
class CampaignNew extends Component {
state = {
minimumContribution: '',
};
onSubmit = async (event) => {
event.preventDefault();
const accounts = await web3.eth.getAccounts();
await factory.methods.createCampaign(this.state.minimumContribution).send({
from: accounts[0],
});
};
render() {
return (
<Layout>
<h3>Create Campaign</h3>
<Form onSubmit={this.onSubmit}>
<Form.Field>
<label>Minimum Contribution</label>
<Input
label="wei"
labelPosition="right"
value={this.state.minimumContribution}
onChange={(event) =>
this.setState({ minimumContribution: event.target.value })
}
/>
</Form.Field>
<Button primary>Create!</Button>
</Form>
</Layout>
);
}
}
export default CampaignNew;
189. Testing Submittal196. Header navigation
190. Form Error handling
default 로 에러 메세지 띄워주지 않음
=> 에러 태그 추가 => 해결!
191. Button Spinners
-> 언제 이 스피너를 보여줄 것인가?
create 버튼 눌렀을 때
192. Important Note About Installing next-routes
installing the next-routes library
*If error like ERESOLVE unable to resolve dependency tree errors, you'll need to pass the --legacy-peer-deps flag:
npm install next-routes --legacy-peer-deps
193. Routing Issues
install
194. Next Routes Setup
automatically navigate our user from our campaign new component to somewhere else inside of our application
[routes.js]
[server.js]
const { createServer } = require("http");
const next = require("next");
const app = next({
dev: process.env.NODE_ENV !== "production",
});
const routes = require("./routes");
const handler = routes.getRequestHandler(app);
app.prepare().then(() => {
createServer(handler).listen(3000, (err) => {
if (err) throw err;
console.log("Ready on localhost:3000");
});
});
$npm run dev
195. Automatic Navigation
196. Header navigation
[Header.js]
import React from "react";
import { Menu } from "semantic-ui-react";
const Header = () => {
return (
<Menu style={{ marginTop: "10px" }}>
<Menu.Item>CrowdCoin</Menu.Item>
<Menu.Menu position="right">
<Menu.Item>Campaigns</Menu.Item>
<Menu.Item>+</Menu.Item>
</Menu.Menu>
</Menu>
);
};
export default Header;
'PBL Ⅲ > Ethereum and Solidity' 카테고리의 다른 글
| Section7 : Advanced Multi-Page Front-Ends (3) (0) | 2022.10.02 |
|---|---|
| Section7 : Advanced Multi-Page Front-Ends (1) (0) | 2022.09.14 |
| Section6 : Ethereum Project Infrastructure (0) | 2022.09.09 |
| Section5 : Real Projects with Ethereum (0) | 2022.09.09 |
| Section4 : Building Interative Front-Ends (0) | 2022.08.28 |