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

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

次に読むおすすめ記事

JavaScriptでUnary plus (+)を使いかっこよくNumber型に変換する

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

JavaScriptの配列で重複したものを削除し、ユニークな配列を作成する

Javascriptで任意の値を持つn個の配列を作成する

javascriptでimportするときに { 中括弧 } をつける時とつかない時があって釈然としない

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

お気軽にコメントを下さい

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