ReactでWebアプリをつくる 1

プロジェクトの作成

今回もviteを使います。
Vite+React+tailwind cssのプロジェクトを作成しました。

ViteでReact + TypeScript + TailwindCSSの環境構築をする

tailwind css は公式に書いてあったやり方だとうまくcssが反映されないのですが、上の記事を参考にしたらcssが反映されるようになりました。

javascript

Reactのドキュメントを読んでいたら「javascriptに自信がないならjavascriptのチュートリアルから読んでみるといいよ」って書いてあったので、そちらにも目を通しています。
Kotlinでは絶対ありえない言語仕様なのでびっくりします。
これとか意味わからないですよね。

"3" + 4 + 5; // "345"
3 + 4 + "5"; // "75"

こんな実装することはない気がするんですが、どこかでこういうの見かけた時に気をつけねばってことですね。

コンポーネント

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

これでコンポーネントになるんですね。
クラスでもOKみたいです。
vueより簡単かもしれない。
ドキュメントにも

コンポーネント名は常に大文字で始めてください。

https://ja.reactjs.org/docs/components-and-props.html

って書いてあるけど、関数名を大文字で始めるのちょっと気持ち悪いですね。
今までどの言語でも、もちろんjsでも関数って小文字で始める習慣があるので。

Passing Props to a Component

ドキュメントがもう一つあって、ちょっと書き方が違うみたいです。
大文字開始は一緒。
こっちの書き方で作っていこうと思います。

ドキュメント読破

ドキュメントも一通り読んだので、さっそくHello Worldしていこうかと思います。

export default function Hello({userName}) {
  return (
    <div>Hello, World! {userName}</div>
  );
}

import { useState } from 'react'
import Hello from './components/hello';

function App() {
  const [count, setCount] = useState(0)
  const name = 'Josh Perez'

  return (
    <div className="App">
      <p>aaaa</p>
      <div>
        <Hello userName={'aaaaa'}/>
      </div>
    </div>
  )
}

export default App

これでいけてるんですが、コンポーネントの引数に型がないのでエディタ上で警告がでています。

export default function Hello({string: userName}) {
  return (
    <div>Hello, World! {userName}</div>
  );
}

これはダメっぽい。
むむむ。
どうしたら…。
ま、これは後で考えるとしてさっそくアプリを作っていこうかと思います。

今回はここまでです。
ここまで読んでくださりありがとうございます。