今回はNodeJS環境での簡単なTodoを管理するWebアプリケーションをReactで作成します。
環境
Ubuntu: 22.04.5 LTS
Node.js: v20.17.0
npm: 10.8.3
Reactアプリケーションの立ち上げ
|
1 |
sudo npm install -g create-react-app |
|
1 |
create-react-app academy-react-app |
|
1 |
cd academy-react-app |
|
1 |
npm start |
下の画面が表示されれば成功です。
コンポーネントの編集
Reactのアプリケーションを立ち上げることができました。
それでは画面を編集していきます。
src/App.js の中身を以下のコードに置き換えてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import React from 'react'; import './App.css'; function App() { return ( <div className="App"> <h5>Sample Component</h5> <p> Text Before Changed </p> <button > Press Here! </button> </div> ); } export default App; |
下のように表示されるはずです。
コンポーネントライブラリ
ここに今回はMaterial-UIというReactのコンポーネントライブラリを使って少しだけ見た目を整えます。
Reactでコンポーネントを使う時こういったライブラリを使うと便利です。
まずは必要なモジュールをインストールします。
一度コンソールでCtrl+Cでアプリを終了し、下のコマンドを入力・実行してください。
|
1 |
npm install @mui/system @emotion/react @emotion/styled |
App.jsの内容を以下に書き換えてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import React from 'react'; import Box from '@mui/system/Box'; import { Button } from '@mui/material'; import { styled } from '@mui/material/styles'; import './App.css'; function App() { const useStyles = styled('div', { slot: 'root', })(({ theme }) => ({ padding: theme.spacing(3, 2), })); return ( <div className="App"> <useStyles> <Box sx={{ textAlign: 'center'}}>Sample Component</Box> <Box sx={{ textAlign: 'center'}}>Text Before Changed</Box> <Button variant="contained" color="primary" >PRESS HERE!</Button> </useStyles> </div> ); } export default App; |
保存して再度以下のコマンドを実行しましょう。
|
1 |
npm start |
ブラウザで下のように表示されていれば問題ありません。
クリックイベント処理
さらにボタンのクリック時の動作を追加します。
|
1 |
<Button variant="contained" color="primary" > |
となっているところを以下のように書き換えてください。
|
1 |
<Button variant="contained" color="primary" onClick={() => alert("Button Pressed!")} > |
保存してブラウザ上でボタンをクリックすると「Button Pressed!」と表示されるはずです。
フックによるステート管理
ボタンで画面のコンポーネントを編集できるようにします。
まず、App.jsのReactをインポートしてる部分をuseState関数をインポートできるように以下のように変更してください。
|
1 |
import React, { useState } from 'react'; |
そしてreturn関数の前に下の一行を追加してください。
|
1 |
const [text, setText] = useState("Text Before chenged") |
続いてボタンのクリック時の動作を
|
1 |
alert("Button Pressed!") |
から
|
1 |
setText("Button Pressed!") |
にしてください。
最後に
|
1 |
Text Before Changed |
となっている部分を以下のように変更してください。
|
1 |
{text} |
App.jsは以下のようになっているはずです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import React, { useState } from 'react'; import Box from '@mui/system/Box'; import { Button } from '@mui/material'; import { styled } from '@mui/material/styles'; import './App.css'; function App() { const useStyles = styled('div', { slot: 'root', })(({ theme }) => ({ padding: theme.spacing(3, 2), })); const [text, setText] = useState("Text Before chenged") return ( <div className="App"> <useStyles> <Box sx={{ textAlign: 'center'}}>Sample Component</Box> <Box sx={{ textAlign: 'center'}}>{text}</Box> <Button variant="contained" color="primary" onClick={() => setText("Button Pressed!")} >PRESS HERE!</Button> </useStyles> </div> ); } export default App; |
保存してブラウザ上でボタンをクリックし「Text Before chenged」が「Button Pressed!」に変れば問題ありません。
ここではReactのフックを使ってtextというステートをsetText関数で変更し、
textに関連している全てのコンポーネントを自動で更新しています。
詳しくはReact公式: ステートフックの利用法を参照してください。(Languagesから言語を日本語にできます)
JavaScriptの関数は非同期に処理される点について注意してください。（前の関数の終了を待たずに次の関数が実行されます。）
アクテビティ
1. インプットフォームを置いて、入力した内容が下のスペースに表示されるようにしましょう。
(インプットフォームのonChangeの関数にステートフックを指定してテキストの変数を管理しましょう)
参考：https://mui.com/material-ui/react-text-field/
2. ボタンを押したらインプットフォームに入力された内容が下に追加されていくようにしましょう。
javascriptのmap関数を使うと便利です。
参考：https://reactjs.org/docs/lists-and-keys.html
3. 一行ごとにラジオボタンを表示させましょう。
参考：https://mui.com/material-ui/react-radio-button/
下ようになっていれば今回のアクティビティは完了です。
参考リンク：
