|
1 | 1 | ---
|
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" |
5 | 5 | seriesName: "その他"
|
6 | 6 | 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 |
11 | 11 | ---
|
12 | 12 |
|
13 |
| -# Actix Web入門 |
| 13 | +## コンポーネント |
14 | 14 |
|
15 |
| -以前から、メインではないにしろRustを書いているのですが、AtCoderの問題を解くとかローカルで動くものばかりなので、外に公開できるものを作ってみたいと思いました。 |
| 15 | +propsとstateはコンポーネントで値(状態 ≒ state)を扱う。propsは引数、stateはコンポーネントのローカル変数。 |
16 | 16 |
|
17 |
| -今回はRustのフレームワークの中でメジャーであると思われるActix Webを利用しAPIサーバーを立てる手順を残したいと思います。極力最小構成で行くつもりです。 |
18 | 17 |
|
19 |
| -[Actix](https://actix.rs/) |
| 18 | +propsにはいろんな型の値を渡せる(プリミティブ & オブジェクト)。 |
20 | 19 |
|
21 |
| -現在進行形で勉強中なので適宜記事は追記されます。 |
| 20 | +```jsx |
| 21 | +const Child = (props) => { |
| 22 | + console.log(props) |
22 | 23 |
|
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 | +} |
35 | 31 |
|
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 | +} |
42 | 37 | ```
|
43 | 38 |
|
44 |
| -## actx-webでサーバー起動 |
| 39 | +分割代入で受け取る。 |
45 | 40 |
|
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 | +} |
47 | 50 |
|
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 | +``` |
53 | 57 |
|
54 |
| -# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html |
| 58 | +TypeScriptでの型定義。 |
55 | 59 |
|
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 | +} |
58 | 69 | ```
|
59 | 70 |
|
60 |
| -次に、main.rsを以下の通りに書き換えます。 |
| 71 | +## useState |
61 | 72 |
|
62 |
| -```rust |
63 |
| -use actix_web::{get, App, HttpResponse, HttpServer, Responder}; |
| 73 | +```jsx |
| 74 | +const App = () => { |
| 75 | + const [count, setCount] = useState(0) |
64 | 76 |
|
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 | + ) |
79 | 83 | }
|
80 | 84 | ```
|
81 | 85 |
|
82 |
| -再度、`cargo run`を実行します。 |
83 | 86 |
|
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 | +- 親コンポーネントが再レンダリングされた時 |
90 | 92 |
|
91 |
| -この状態でブラウザーで`localhost:8080`にアクセスしすれば、`Hello World!`という文字列が表示されます。 |
| 93 | +## 参考 |
92 | 94 |
|
93 |
| -https://zenn.dev/aula/articles/64fa0bebb99109 |
| 95 | +[>Vueユーザー「あれ、ReactでonClickが動かない。。」のワケ - Qiita](https://qiita.com/shiori_hoshimi/items/1179abac2e017ef20a03) |
0 commit comments