react でプロジェクトを作成する

vue案件が多い中、reactを使用する必要があったので、勉強することにした。

react 勉強シリーズ

目次

react をインストールする

参考:Create React App

npx create-react-app my-app-name

上記のコマンドで react が自動でインストールされる。

※そんなことしないと思うが、「my-app-name」を「react」にすると怒られ、インストールできないので注意。私は何も考えずにそうして、無事に怒られた。

cd my-app-name

次にインストールしたディレクトリに移動する。

npm start

で、ローカルホスト(http://localhost:3000/)が開かれる。

reactの初期画面

これだけで、reactのアプリが起動する。

起動だけを考えるとvue より楽かもしれない、vueはいろいろと選択する必要があるので。

まずはソースを覗き見る

この時点で表示されているのは App.js のようで、

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Edit <code>src/App.js</code> and save to reload.</p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >Learn React</a>
      </header>
    </div>
  );
}

export default App;

該当ソースがこんな感じで、Javascriptを使用してhtmlを吐き出している?

正直、ぱっと見だとvue のtemplate構文のほうが見やすい気がする。

まあ、少しづつ、慣れていく。

次に読むおすすめ記事

foreachの中で非同期が終わったら僕の肩を叩いてください

JavaScriptにおけるcount++と++countの違いについて調べてみた

react を適当に触って確かめてみる。

今更ながら、即時関数がとでも便利でかっこいい

複雑な文字列パターンをマッチさせる必要がある場合はIF分ではなく正規表現を使うべきだとChat GPTが言ってた

この記事に対するコメント

react.jsが急に、突然インストールできなくなった | ウェブ制作を手掛ける「nove」のオウンドメディア へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です