Skip to content

Commit cb95b35

Browse files
author
kento
committed
📝 Update
1 parent 325efd2 commit cb95b35

File tree

1 file changed

+68
-66
lines changed

1 file changed

+68
-66
lines changed

content/blog/Others/_11/index.md

Lines changed: 68 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,95 @@
11
---
2-
title: "[メモ]Actix WebでAPIサーバーを立てる"
3-
postdate: "2023-06-10"
4-
update: "2023-06-10"
2+
title: "[下書き]今更のReact総復習"
3+
postdate: "2024-03-30"
4+
update: "2024-03-30"
55
seriesName: "その他"
66
seriesSlug: "Others"
7-
description: "RustのWebフレームワークであるActix Webに関するメモです"
8-
tags: ["Rust", "Actix Web"]
9-
keywords: ["Rust", "Actix Web"]
10-
published: false
7+
description: "今更Reactを総復習します"
8+
tags: ["React"]
9+
keywords: ["React"]
10+
published: true
1111
---
1212

13-
# Actix Web入門
13+
## コンポーネント
1414

15-
以前から、メインではないにしろRustを書いているのですが、AtCoderの問題を解くとかローカルで動くものばかりなので、外に公開できるものを作ってみたいと思いました
15+
propsとstateはコンポーネントで値(状態 ≒ state)を扱う。propsは引数、stateはコンポーネントのローカル変数
1616

17-
今回はRustのフレームワークの中でメジャーであると思われるActix Webを利用しAPIサーバーを立てる手順を残したいと思います。極力最小構成で行くつもりです。
1817

19-
[Actix](https://actix.rs/)
18+
propsにはいろんな型の値を渡せる(プリミティブ & オブジェクト)。
2019

21-
現在進行形で勉強中なので適宜記事は追記されます。
20+
```jsx
21+
const Child = (props) => {
22+
console.log(props)
2223

23-
現在はPostgreSQLからデータを取得、JSONで返すという所までは進んでいます。これをどうやってデプロイしようかと悩んでいるところです。
24-
25-
## Rustプロジェクト作成
26-
27-
まずは`cargo new <プロジェクト名>`でプロジェクトを作成します。
28-
29-
```bash
30-
$ cargo new web-server
31-
Created binary (application) `web-server` package
32-
```
33-
34-
作成されたディレクトリに移動し、`cargo run`を実行し`Hello World`が返ってくればOKデス。
24+
return (
25+
<>
26+
<p>id: {props.obj.id}</p>
27+
<p>name: {props.obj.name}</p>
28+
</>
29+
)
30+
}
3531

36-
```bash
37-
$ cargo run
38-
Compiling web-server v0.1.0 (C:\github\LearningRust\web-server)
39-
Finished dev [unoptimized + debuginfo] target(s) in 0.73s
40-
Running `target\debug\web-server.exe`
41-
Hello, world!
32+
const App = () => {
33+
return (
34+
<Child obj={{ id: 1, name: "kento" }} />
35+
)
36+
}
4237
```
4338

44-
## actx-webでサーバー起動
39+
分割代入で受け取る。
4540

46-
次に、Cargo.tomlに`actix-web = "4"`を追記します。
41+
```jsx
42+
const Child = ({ obj: { id, name }}) => {
43+
return (
44+
<>
45+
<p>id: {id}</p>
46+
<p>name: {name}</p>
47+
</>
48+
)
49+
}
4750

48-
```toml
49-
[package]
50-
name = "web-server"
51-
version = "0.1.0"
52-
edition = "2021"
51+
const App = () => {
52+
return (
53+
<Child obj={{ id: 1, name: "kento" }} />
54+
)
55+
}
56+
```
5357

54-
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
58+
TypeScriptでの型定義。
5559

56-
[dependencies]
57-
actix-web = "4"
60+
```tsx
61+
const Child = ({ obj: { id, name }}: { obj: { id: number, name: string }}) => {
62+
return (
63+
<>
64+
<p>id: {id}</p>
65+
<p>name: {name}</p>
66+
</>
67+
)
68+
}
5869
```
5970

60-
次に、main.rsを以下の通りに書き換えます。
71+
## useState
6172

62-
```rust
63-
use actix_web::{get, App, HttpResponse, HttpServer, Responder};
73+
```jsx
74+
const App = () => {
75+
const [count, setCount] = useState(0)
6476

65-
#[get("/")]
66-
async fn hello() -> impl Responder {
67-
HttpResponse::Ok().body("Hello world!")
68-
}
69-
70-
#[actix_web::main]
71-
async fn main() -> std::io::Result<()> {
72-
HttpServer::new(|| {
73-
App::new()
74-
.service(hello)
75-
})
76-
.bind(("127.0.0.1", 8080))?
77-
.run()
78-
.await
77+
return (
78+
<>
79+
<p>count: {count}</p>
80+
<button onClick={() => setCount(count + 1)}>+1</button>
81+
</>
82+
)
7983
}
8084
```
8185

82-
再度、`cargo run`を実行します。
8386

84-
```bash
85-
$ cargo run
86-
Compiling web-server v0.1.0 (C:\github\LearningRust\web-server)
87-
Finished dev [unoptimized + debuginfo] target(s) in 5.91s
88-
Running `target\debug\web-server.exe`
89-
```
87+
## コンポーネントが再レンダリングされるタイミング(詳しく書く)
88+
89+
- stateが変化した時
90+
- propsが変化した時
91+
- 親コンポーネントが再レンダリングされた時
9092

91-
この状態でブラウザーで`localhost:8080`にアクセスしすれば、`Hello World!`という文字列が表示されます。
93+
## 参考
9294

93-
https://zenn.dev/aula/articles/64fa0bebb99109
95+
[>Vueユーザー「あれ、ReactでonClickが動かない。。」のワケ - Qiita](https://qiita.com/shiori_hoshimi/items/1179abac2e017ef20a03)

0 commit comments

Comments
 (0)