React でルーティングする方法

Ⅰ. はじめに

タイトルの通り「React でルーティングする方法」です。

Ⅱ. やり方

1. react-router-dom をインストールする

npm i -D react-router-dom

2. ファイルを編集する

src/App.js

import React from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Navbar from './Navbar'
import About from './components/About'
import User from './components/User'

function App () {
  return (
    <BrowserRouter> /* <HashRouter> */
      <Navbar />
      <Switch>
        <Route exact path='/about' component={About} />
        <Route exact path='/user/:id' component={User} />
      </Switch>
    </BrowserRouter> /* </HashRouter> */
  )
}

export default App

src/Navbar.js

import React from 'react'
import { Link } from 'react-router-dom'

function Navbar () {
  return (
    <ul>
      <li><Link to='/about'>About</Link></li>
      <li><Link to='/user/1'>User</Link></li>
    </ul>
  )
}

export default Navbar

src/components/About.js

import React from 'react'

function About () {
  return <p>About</p>
}

export default About

src/components/User.js

import React from 'react'
import { useParams } from 'react-router-dom'

function User () {
  const { id } = useParams()
  return <p>User id = {id}</p>
}

export default User

実行結果

参考

https://reacttraining.com/react-router/web/example/basic
https://github.com/ReactTraining/react-router

React で ESLint を使う方法

Ⅰ. はじめに

タイトルの通り「React で ESLint を使う方法」です。

Ⅱ. やり方

1. 新規プロジェクトを作成する

create-react-app hello-world

2. ESLint をインストールする

npm i -g eslint

2. ESLint を初期化する

以下コマンド実行後、ESLint の設定ファイルが自動生成されます。

eslint --init

3. standard に対応する

.eslintrc

{
  "extends": ["standard", "standard-react"]
}

4. 必要なパッケージをインストールする

npm i -D babel-eslint eslint-config-standard eslint-config-standard-react eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-react

5. VSCode に拡張機能をインストールする

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

実行結果

FAQ

Q. VSCode で ESLint が動かない。

A. node_modules, package-lock.json, yarn.lock を削除した後に以下コマンドを実行する。

npm i

※ESLint の詳細ログは Ctrl + Shift + Uの出力タブで ESLint を選択すると表示されます。

参考

https://github.com/standard/eslint-config-standard-react

React で Bootstrap を使う方法

Ⅰ. はじめに

タイトルの通り「React で Bootstrap を使う方法」です。

Ⅱ. やり方

1. react-bootstrap, bootstrap をインストールする

npm install -D react-bootstrap bootstrap

2. ファイルを編集する

src/index.js

import 'bootstrap/dist/css/bootstrap.min.css'

src/App.js

import React from 'react'
import { Button } from 'react-bootstrap'

function App () {
  return (
    <Button onClick={() => alert('hello')}>ボタン</Button>
  );
}

export default App

実行結果

参考

https://react-bootstrap.github.io/getting-started/introduction

React で HelloWorld する方法

Ⅰ. はじめに

タイトルの通り「React で HelloWorld する方法」です。

Ⅱ. やり方

1. 新規プロジェクトを作成する

npx create-react-app hello-world

2. サーバを起動する

cd hello-world
npm start

3. src/App.js を書き換える

import React from 'react'

function App () {
  return (
    <p>Hello world!</p>
  );
}

export default App

実行結果

参考

https://github.com/facebook/create-react-app

C# で Blowfish で暗号化、複合する方法

Ⅰ. はじめに

タイトルの通り「C# で Blowfish で暗号化、複合する方法」です。

Ⅱ. やり方

1. 必要なパッケージをNuGetからインストールする

Install-Package Portable.BouncyCastle

2. サンプルプログラムを書く

using Org.BouncyCastle.Crypto.Engines;
using Org.BouncyCastle.Crypto.Modes;
using Org.BouncyCastle.Crypto.Paddings;
using Org.BouncyCastle.Crypto.Parameters;

private static byte[] Blowfish(byte[] key, byte[] iv, byte[] bytes, bool forEncryption)
{
  // Blowfish
  // Mode = CBC
  // PaddingMode = Zero
  var cbcBlockCipher = new CbcBlockCipher(new BlowfishEngine());
  var cipher = new PaddedBufferedBlockCipher(cbcBlockCipher, new ZeroBytePadding());
  cipher.Init(forEncryption, new ParametersWithIV(new KeyParameter(key), iv));

  var resultBytes = new byte[cipher.GetOutputSize(bytes.Length)];

  var length = cipher.ProcessBytes(bytes, 0, bytes.Length, resultBytes, 0);
  cipher.DoFinal(resultBytes, length);

  return resultBytes;
}

static void Main(string[] args)
{
  // key (64 bits)
  var key = new byte[] { 0x00, 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07 };
  // iv (64 bits)
  var iv = new byte[] { 0x08, 0x09, 0x0A, 0x0B, 0x0C, 0x0D, 0x0E, 0x0F };

  var str = "Hello World!";

  // 暗号化
  var encryptedBytes = Blowfish(key, iv, Encoding.UTF8.GetBytes(str), true);
  Console.WriteLine(BitConverter.ToString(encryptedBytes));

  // 複合
  var decryptedBytes = Blowfish(key, iv, encryptedBytes, false);
  Console.WriteLine(Encoding.UTF8.GetString(decryptedBytes));
}

実行結果

DD-78-3D-30-DC-E2-9F-0D-81-BD-9C-36-C0-B9-6B-35
Hello World!

参考

https://ja.wikipedia.org/wiki/Blowfish