【React】コピペでReact入門 Part2【初級】
この記事はReact初心者の方向けに、コマンドやソースコードをコピペしながら読み進めていただける内容になっています。
こんにちは、nomurabbitです。今回はコピペでデザイン入門と題して、Reactのアプリにデザインライブラリを追加します。
MUI（Material-ui）というReact向けのデザインライブライを使って、コピペでかっこいいアプリを作っちゃいましょう！
デザインライブラリ
アプリケーションを構築しようとしたときに、画面のデザインって悩んじゃいますよね。そんなときに活躍してくれるのがデザインライブラリです。今回紹介するMUIというデザインライブラリはReact向けのいい感じのコンポーネントをたくさん提供してくれます。この記事では、前回の記事で構築したテンプレートにMUIのデザインコンポーネントを追加していきます。
Ctrl + Cの準備はオーケーですかー？
Reactテンプレートの準備
まずはReactテンプレートを作成しましょう。前回と同様ホームフォルダに作成したreactフォルダで作業します。コマンドプロンプトを起動する方法は、
- Windowsキーを押しながらRキーを押して
- ファイル名を指定して実行ダイアログにcmdと入力して
- エンターキーを押す。
でしたね。起動したコマンドプロンプトに下記のコマンドをコピペして、今日の分のテンプレートを作成しましょう。
$ cd react
$ yarn create react-app my_react_app_design --template typescript
reactフォルダがない方は、cd reactの前にmkdir reactと打ってみてください。
余談ですが、デザインライブラリに限らずパッケージにはバージョンがあります。バージョンが異なるとコンポーネントの名称やソースコードの書き方が変わる可能性があります。自分が使っているバージョンを意識して開発しましょう。
ちなみに今回使うMUIのバージョンは5.2.5です。
と、言ってる間にテンプレートの作成が済みました。Happy hacking!と表示されていたら成功です。
MUIのインストール
先ほど作成したテンプレートのフォルダに移動して、テンプレートにMUIを追加しましょう。以下のコマンドを実行します。
この操作は他のテンプレートには影響を与えないので、思い切って実行しちゃって大丈夫ですよ！
$ cd my_react_app_design $ yarn add @mui/material @emotion/react @emotion/styled @mui/icons-material
このような画面になれば、MUIのインストールは成功です。
ここからはVisual Studio Codeの出番だね！
ページのデザイン
MUIを追加した直後の状態で、
$ yarn start
と打つと、ブラウザでこんな画面が起動すると思います。
今からこの画面を編集していきます。ブラウザを開いたまま、今一度Windowsキー＋Rキーでもう一つ別のコマンドプロンプトを起動させて、今度は以下のコマンドを打ってみてください。Visual Studio Codeでmy_react_app_designフォルダが開くと思います。
$ cd react $ cd my_react_app_design $ code %cd%
Visual Studio Codeが起動したらApp.tsxを書き換えちゃいましょう。
App.tsxの内容を全て削除して、以下の内容をまるっとコピペしてください。
import * as React from 'react'; import AppBar from '@mui/material/AppBar'; import Box from '@mui/material/Box'; import CssBaseline from '@mui/material/CssBaseline'; import Divider from '@mui/material/Divider'; import Drawer from '@mui/material/Drawer'; import IconButton from '@mui/material/IconButton'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemText from '@mui/material/ListItemText'; import HomeIcon from '@mui/icons-material/Home'; import MenuIcon from '@mui/icons-material/Menu'; import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; const drawerWidth = 240; export default function App() { const [mobileOpen, setMobileOpen] = React.useState<boolean>(false); const handleDrawerToggle = () => { setMobileOpen(!mobileOpen); }; const drawer = ( <div> <Toolbar /> <Divider /> <List> <ListItem button key={'home'} onClick={() => {}}> <ListItemIcon> <HomeIcon /> </ListItemIcon> <ListItemText primary={'home'} /> </ListItem> </List> <Divider /> </div> ); const container = undefined; return ( <Box sx={{ display: 'flex' }}> <CssBaseline /> <AppBar position="fixed" sx={{ width: { sm: `calc(100% - ${drawerWidth}px)` }, ml: { sm: `${drawerWidth}px` }, }} > <Toolbar> <IconButton color="inherit" aria-label="open drawer" edge="start" onClick={handleDrawerToggle} sx={{ mr: 2, display: { sm: 'none' } }} > <MenuIcon /> </IconButton> <Typography variant="h6" noWrap component="div"> react web site </Typography> </Toolbar> </AppBar> <Box component="nav" sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }} aria-label="mailbox folders" > {/* The implementation can be swapped with js to avoid SEO duplication of links. */} <Drawer container={container} variant="temporary" open={mobileOpen} onClose={handleDrawerToggle} ModalProps={{ keepMounted: true, // Better open performance on mobile. }} sx={{ display: { xs: 'block', sm: 'none' }, '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth }, }} > {drawer} </Drawer> <Drawer variant="permanent" sx={{ display: { xs: 'none', sm: 'block' }, '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth }, }} open > {drawer} </Drawer> </Box> <Box component="main" sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }} > <Toolbar /> Hello React App Design! </Box> </Box> ); }
Git Hubにも同じApp.tsxをアップロードしています。こちらもご覧ください。
