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構文のほうが見やすい気がする。

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