//Bad case {someData.map(item =>( <div key={item.id}> hello! </div> ))} //Good case {React.Children.toArray( someData.map(item =><div> hello! </div>) )} React.Children.toArrayを利用する場合、key属性は要らなくなります。
はじめに ポートフォリオサイトを作りたいと思い、どうせ作るなら流行のreactで作りたいと考える。 ただ環境構築関係のサイト、Udemy、メンターなどもだいたいmac前提が多い。 Macは持っていなかったし、メインのデスクトップPCがwindowsなのと、外に出ないのでラップトップである必要性がない。 あと高い。 よってwsl2での最小限のreact環境構築をしてみた。 環境 windows10Home wsl2 Ubuntu 20.04LTS 目標環境 nodebrew nodejs 14.17.0 yarn 1.22.5 create-react-app コマンドのインストール 環境構築 こちらのサイト[1]を参考にした。 nodejs公式[2]2021年6月12日現在ではv14.17.0がLTS版における最新のようなのでそこだけ変更。 nodejsのダウンロードはうまくいったが、yarnのインストールがうまくいかないので別のサイト[3]を参考にして進めた。 ただ、create-react-appコマンドのパスが通っていない。 記事内にも対策が書いてあったがそれをしてもパスが通っていない。 findコマンドでパスを検索。 cd / find ./ -name create-react-app パスが見つかったのでそれを.bashrcに追加してsourceコマンドで更新。 具体的にはexport PATH=$PATH:'/home/ユーザー名/.yarn/bin' を追加。 whichコマンドでパスを確認。 which create-react-app 出力されたらパスが通っています。 あとは[1]の通りcreate-react-appコマンドを実行後cdしてからyarn startしたら実行できました。 おわりに 思ったより簡単でしたが、ある程度linuxの知識がないとやはり環境構築は難しいですね。 dockerも使えるようになったようですし、wsl2でいいのではと思わなくもない。 まあ情報があまりになさすぎるので、お金に余裕がある人はMac買った方がいいとは思います。 それではまた。 参考文献 [1]:WSLでReactを使ってHello Worldしてみた [2]:nodejs公式 [3]:yarnのインストール - Ubuntu
5.3 開発用フロントエンド構築 開発用フロントエンドを構築します。 構成は以下の通りです。 構成 React 今回の主目的なので TypeScript Storybookに付随して webpack バンドルにこれを使うので ts-loader TypeScriptのコンパイルにこれを使う CSS in JS Qiita執筆にあたり、ファイル数を増やしたくないので、cssファイル不要にする。 html-webpack-plugin htmlにも色々書きこみたい JSX 標準的で扱いやすいので。 構築コマンド npm init プロジェクト初期化 yarn add react react-dom react-routeor-dom React yarn add typescript TypeScript yarn add webpack webpack-cli webpack-dev-server webpack yarn add prettier コード自動補正（細かい体裁を気にしないで、速く書きたい） touch tsconfig.json TypeScriptの設定 touch .prettierrc prettierの設定 touch .prettierignore prettier除外設定 touch src 製造ファイル touch dist コンパイル結果出力先 npx -p @storybook/cli sb init Storybookインストール、初期化 git init プロジェクトGit対象 touch .gitignore Git除外設定 ディレクトリ設計 ├── src │ ├── index.tsx │ ├── index.html │ └── comtainer │ └── Tetris.tsx ├── dist ├── node_modules ├── package.json ├── tsconfig.json ├── webpack.config.js ├── README.md ├── .prettierrc.md └── .prettierignore.md npm 設計 package.json { "name": "reacttetris", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack serve --config ./webpack.config.js", "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook", "prettier": "prettier --write \"src/**/*.tsx\"" }, "author": "", "license": "ISC", "dependencies": {}, "devDependencies": { "@babel/core": "^7.14.5", "@storybook/addon-actions": "^6.2.9", "@storybook/addon-essentials": "^6.2.9", "@storybook/addon-links": "^6.2.9", "@storybook/react": "^6.2.9", "@types/react": "^17.0.11", "@types/react-dom": "^17.0.7", "babel-loader": "^8.2.2", "html-webpack-plugin": "^5.3.1", "prettier": "^2.3.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^5.2.0", "ts-loader": "^9.2.3", "typescript": "^4.3.2", "webpack": "^5.38.1", "webpack-cli": "^4.7.2", "webpack-dev-server": "^3.11.2" } } src/index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>TETRIS</title> </head> <body> <div id="app"></div> <script src="./bundle.js"></script> </body> </html> src/comtainer/Tetris.tsx import * as React from 'react' export interface Props { content: string } export const Tetris = (props: Props) => { return <div> {props.content} </div> } webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = [{ mode: 'development', entry: { bundle: './src/index.tsx' }, devtool: 'inline-source-map', output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { // 拡張子 .ts の場合 test: /\.tsx?$/, // TypeScript をコンパイルする use: 'ts-loader', exclude: /node_modules/, }, ] }, resolve: { // 拡張子を配列で指定 extensions: [ '.ts', '.tsx', '.js', '.jsx', ], }, devServer: { contentBase: path.resolve(__dirname, 'dist'), port: 3000, }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html" }) ] }]; npm run storybook
